/* ==========================================================================
   VALTERIA DESIGN SYSTEM — TOKENS
   v0.2 — Aubergine + Copper (trimmed to site usage; fonts self-hosted)
   ========================================================================== */

:root {
  /* Aubergine — primary, near-black violet */
  --aubergine-50:  #F5F2FA;
  --aubergine-100: #E8E1F2;
  --aubergine-200: #CFC0E2;
  --aubergine-300: #A98DC4;
  --aubergine-400: #7E5BA0;
  --aubergine-500: #5B3D7C;
  --aubergine-600: #432A5E;
  --aubergine-700: #2E1C45;
  --aubergine-800: #1A0F2E;
  --aubergine-900: #0F0820;
  --aubergine-950: #08040F;

  /* Violet — secondary brand pop */
  --violet-100: #E9E2FD;
  --violet-200: #D4C5FB;
  --violet-300: #BBA3F7;
  --violet-400: #A78BFA;
  --violet-500: #8B6FE8;
  --violet-600: #6E50D1;
  --violet-700: #553EA3;

  /* Copper — warm accent, primary CTAs */
  --copper-50:  #FBF1EA;
  --copper-100: #F6E1D1;
  --copper-200: #EFC5A4;
  --copper-300: #E8A87A;
  --copper-400: #E08B5C;
  --copper-500: #C9622E;
  --copper-600: #A84E1F;
  --copper-700: #7A3617;

  /* Neutrals — slightly purple-biased slate */
  --neutral-0:   #F7F4FA;
  --neutral-50:  #FAFAFB;
  --neutral-100: #F2F2F5;
  --neutral-200: #E5E5EB;
  --neutral-300: #D1D1DA;
  --neutral-400: #9D9DAB;
  --neutral-500: #6B6B7B;
  --neutral-600: #4A4A58;

  /* Status */
  --success-500: #15916B;

  /* Dark-surface text (hero, platform, contact) */
  --ink-bright:    #F2EFFA;
  --ink-secondary: #B5ADC8;
  --ink-tertiary:  #8B86A3;

  /* Semantic — continuous dark material system */
  --bg:              #0B0712;
  --bg-subtle:       #100A1B;
  --surface:         #151020;
  --surface-raised:  #1B1428;
  --border:          rgba(226, 218, 242, 0.10);
  --border-strong:   rgba(226, 218, 242, 0.18);
  --text:            #F1EDF7;
  --text-secondary:  #B7AFC4;
  --text-tertiary:   #898094;
  --accent:          var(--copper-400);
  --focus-ring:      var(--copper-400);

  /* Type */
  --font-sans: 'Cabinet Grotesk', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Radius — 14px-anchored */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-2xl:  40px;
  --radius-full: 9999px;

  /* Shadow — tinted with brand purple, never pure black */
  --shadow-xs:     0 18px 56px rgba(4, 2, 8, 0.20);
  --shadow-copper: 0 16px 42px rgba(224, 139, 92, 0.22);

  /* Motion */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);

  /* Layout */
  --container-xl: 1280px;
  --gutter: 32px;
}

/* Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
::selection { background: var(--copper-400); color: var(--aubergine-950); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}