/* ==========================================================================
   VALTERIA DESIGN SYSTEM — TOKENS
   Cross-platform foundation: web, iOS, macOS
   v0.2 — Aubergine + Copper
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..900,30..100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ────────────────────────────────────────────────────────────────────────
     CORE PALETTE — Aubergine (primary, near-black violet)
     The brand. Carries hierarchy. Anchors every dark surface.
     ──────────────────────────────────────────────────────────────────────── */
  --aubergine-50:  #F5F2FA;
  --aubergine-100: #E8E1F2;
  --aubergine-200: #CFC0E2;
  --aubergine-300: #A98DC4;
  --aubergine-400: #7E5BA0;
  --aubergine-500: #5B3D7C;   /* mid */
  --aubergine-600: #432A5E;
  --aubergine-700: #2E1C45;   /* primary */
  --aubergine-800: #1A0F2E;   /* signature */
  --aubergine-900: #0F0820;   /* black-ish */
  --aubergine-950: #08040F;

  /* ────────────────────────────────────────────────────────────────────────
     VIOLET — secondary brand pop (the bright purple)
     Used in dark surfaces; AI features; focus rings.
     The original "--gold-*" names are kept as aliases at the bottom for
     backwards compat with components that pre-date this token rev.
     ──────────────────────────────────────────────────────────────────────── */
  --violet-50:  #F4F1FE;
  --violet-100: #E9E2FD;
  --violet-200: #D4C5FB;
  --violet-300: #BBA3F7;
  --violet-400: #A78BFA;   /* signature violet */
  --violet-500: #8B6FE8;
  --violet-600: #6E50D1;
  --violet-700: #553EA3;
  --violet-800: #3B2B73;
  --violet-900: #221941;

  /* ────────────────────────────────────────────────────────────────────────
     COPPER — accent (warm metallic, complement to aubergine)
     The new accent. Use sparingly: primary CTAs, value markers,
     "moments of warmth" against the cool primary.
     ──────────────────────────────────────────────────────────────────────── */
  --copper-50:  #FBF1EA;
  --copper-100: #F6E1D1;
  --copper-200: #EFC5A4;
  --copper-300: #E8A87A;
  --copper-400: #E08B5C;   /* signature copper */
  --copper-500: #C9622E;
  --copper-600: #A84E1F;
  --copper-700: #7A3617;
  --copper-800: #4F2210;
  --copper-900: #2A120A;

  /* ────────────────────────────────────────────────────────────────────────
     NEUTRALS — warm-cool slate, slightly purple-biased
     ──────────────────────────────────────────────────────────────────────── */
  --neutral-0:    #FFFFFF;
  --neutral-25:   #FCFCFD;
  --neutral-50:   #FAFAFB;
  --neutral-100:  #F2F2F5;
  --neutral-150:  #EAEAEF;
  --neutral-200:  #E5E5EB;
  --neutral-300:  #D1D1DA;
  --neutral-400:  #9D9DAB;
  --neutral-500:  #6B6B7B;
  --neutral-600:  #4A4A58;
  --neutral-700:  #34343F;
  --neutral-800:  #1F1F28;
  --neutral-900:  #131318;
  --neutral-1000: #0A0A0E;

  /* ────────────────────────────────────────────────────────────────────────
     STATUS — Functional states. Tinted to harmonize with aubergine.
     Each has 50/100/500/700 for surface, subtle, default, strong.
     ──────────────────────────────────────────────────────────────────────── */
  --success-50:  #E8F6EF;
  --success-100: #D6F2E5;
  --success-500: #15916B;
  --success-700: #0C6048;

  --warning-50:  #FDF4E1;
  --warning-100: #FCEBCC;
  --warning-500: #C57E1B;
  --warning-700: #8A5710;

  --danger-50:   #FCE9EB;
  --danger-100:  #F8DADC;
  --danger-500:  #C13E47;
  --danger-700:  #8A2730;

  --info-50:     #ECF1FA;
  --info-100:    #DCE3F5;
  --info-500:    #4A6BC9;
  --info-700:    #2E4690;

  /* ────────────────────────────────────────────────────────────────────────
     FEATURE COLORS — sanctioned per-product accents
     For products that need their own identity inside the Valteria house.
     Pick ONE per product and use it as `--feature` instead of (or alongside)
     copper. Aubergine + neutrals stay fixed — these only replace the warm
     accent slot. Each is muted enough to live next to aubergine without
     fighting it. Use the -subtle variant for backgrounds, the base for
     fills and CTAs, the -deep variant for text-on-tint.
     ──────────────────────────────────────────────────────────────────────── */
  --feature-copper-subtle: #FBF1EA;   /* default — Tasks, anything action-led */
  --feature-copper:        #E08B5C;
  --feature-copper-deep:   #C9622E;

  --feature-sage-subtle:   #E8F1ED;   /* wellness, sleep, calm */
  --feature-sage:          #6FA887;
  --feature-sage-deep:     #3F7458;

  --feature-clay-subtle:   #F4EBE5;   /* household, parenting, warmth */
  --feature-clay:          #B97F5F;
  --feature-clay-deep:     #8B5638;

  --feature-ink-subtle:    #E6ECF2;   /* finance, focus, precision */
  --feature-ink:           #4A6BC9;
  --feature-ink-deep:      #2E4690;

  --feature-rose-subtle:   #F5E6E8;   /* journaling, reflection, health */
  --feature-rose:          #C97485;
  --feature-rose-deep:     #8E4252;

  --feature-moss-subtle:   #ECEFE3;   /* habits, growth, food */
  --feature-moss:          #7C8A52;
  --feature-moss-deep:     #4F5A2C;

  --feature-amber-subtle:  #F6EDDA;   /* reading, study, library */
  --feature-amber:         #C99B47;
  --feature-amber-deep:    #8E6A1F;

  /* Active feature slot — products override these in their own scope.
     Default to copper so anything not explicitly opting in still feels
     like Valteria. */
  --feature:        var(--feature-copper);
  --feature-subtle: var(--feature-copper-subtle);
  --feature-deep:   var(--feature-copper-deep);

  /* ────────────────────────────────────────────────────────────────────────
     FEATURE-COLOR SCALES (alias-only)
     The docs reference these scales (-50/-100/-300/-400/-500/-700) so we
     map them to the canonical -subtle/main/-deep tokens above plus a few
     synthetic stops via color-mix. Names not in the canonical set
     (cyan, jade, violet, graphite) alias to the closest sibling.
     ──────────────────────────────────────────────────────────────────────── */
  --feature-rose-50:  var(--feature-rose-subtle);
  --feature-rose-100: color-mix(in srgb, var(--feature-rose-subtle) 80%, var(--feature-rose));
  --feature-rose-200: color-mix(in srgb, var(--feature-rose-subtle) 50%, var(--feature-rose));
  --feature-rose-300: color-mix(in srgb, var(--feature-rose) 70%, var(--feature-rose-subtle));
  --feature-rose-400: var(--feature-rose);
  --feature-rose-500: var(--feature-rose);
  --feature-rose-600: color-mix(in srgb, var(--feature-rose) 50%, var(--feature-rose-deep));
  --feature-rose-700: var(--feature-rose-deep);
  --feature-rose-800: var(--feature-rose-deep);

  --feature-amber-50:  var(--feature-amber-subtle);
  --feature-amber-100: color-mix(in srgb, var(--feature-amber-subtle) 80%, var(--feature-amber));
  --feature-amber-200: color-mix(in srgb, var(--feature-amber-subtle) 50%, var(--feature-amber));
  --feature-amber-300: color-mix(in srgb, var(--feature-amber) 70%, var(--feature-amber-subtle));
  --feature-amber-400: var(--feature-amber);
  --feature-amber-500: var(--feature-amber);
  --feature-amber-600: color-mix(in srgb, var(--feature-amber) 50%, var(--feature-amber-deep));
  --feature-amber-700: var(--feature-amber-deep);
  --feature-amber-800: var(--feature-amber-deep);

  /* jade ≈ moss / sage hybrid → use moss */
  --feature-jade-50:  var(--feature-moss-subtle);
  --feature-jade-100: color-mix(in srgb, var(--feature-moss-subtle) 80%, var(--feature-moss));
  --feature-jade-200: color-mix(in srgb, var(--feature-moss-subtle) 50%, var(--feature-moss));
  --feature-jade-300: color-mix(in srgb, var(--feature-moss) 70%, var(--feature-moss-subtle));
  --feature-jade-400: var(--feature-moss);
  --feature-jade-500: var(--feature-moss);
  --feature-jade-600: color-mix(in srgb, var(--feature-moss) 50%, var(--feature-moss-deep));
  --feature-jade-700: var(--feature-moss-deep);
  --feature-jade-800: var(--feature-moss-deep);

  /* cyan → sage (the only blue-green in the system) */
  --feature-cyan-50:  var(--feature-sage-subtle);
  --feature-cyan-100: color-mix(in srgb, var(--feature-sage-subtle) 80%, var(--feature-sage));
  --feature-cyan-200: color-mix(in srgb, var(--feature-sage-subtle) 50%, var(--feature-sage));
  --feature-cyan-300: color-mix(in srgb, var(--feature-sage) 70%, var(--feature-sage-subtle));
  --feature-cyan-400: var(--feature-sage);
  --feature-cyan-500: var(--feature-sage);
  --feature-cyan-600: color-mix(in srgb, var(--feature-sage) 50%, var(--feature-sage-deep));
  --feature-cyan-700: var(--feature-sage-deep);
  --feature-cyan-800: var(--feature-sage-deep);

  /* violet → use the existing violet scale */
  --feature-violet-50:  var(--violet-50);
  --feature-violet-100: var(--violet-100);
  --feature-violet-200: var(--violet-200);
  --feature-violet-300: var(--violet-300);
  --feature-violet-400: var(--violet-400);
  --feature-violet-500: var(--violet-500);
  --feature-violet-600: var(--violet-600);
  --feature-violet-700: var(--violet-700);
  --feature-violet-800: var(--violet-800);

  /* graphite → neutrals */
  --feature-graphite-50:  var(--neutral-50);
  --feature-graphite-100: var(--neutral-100);
  --feature-graphite-200: var(--neutral-200);
  --feature-graphite-300: var(--neutral-300);
  --feature-graphite-400: var(--neutral-500);
  --feature-graphite-500: var(--neutral-600);
  --feature-graphite-600: var(--neutral-700);
  --feature-graphite-700: var(--neutral-800);
  --feature-graphite-800: var(--neutral-900);

  /* Status -800 fallbacks (only -50/100/500/700 exist canonically) */
  --success-800: var(--success-700);
  --danger-800:  var(--danger-700);
  --warning-800: var(--warning-700);
  --info-800:    var(--info-700);

  /* ────────────────────────────────────────────────────────────────────────
     DATA-VIZ — Categorical palette for charts, project dots, calendar tags.
     Tested for adjacency contrast + colorblind reasonable distinguishability.
     ──────────────────────────────────────────────────────────────────────── */
  --data-1: var(--copper-400);    /* #E08B5C */
  --data-2: var(--violet-400);    /* #A78BFA */
  --data-3: #4FB3A6;              /* sage teal */
  --data-4: var(--info-500);      /* #4A6BC9 */
  --data-5: #D4636E;              /* dusty rose */
  --data-6: #7A8BA3;              /* slate */
  --data-7: #B89F4A;              /* burnished gold (chart-only) */
  --data-8: var(--aubergine-500); /* #5B3D7C */

  /* ────────────────────────────────────────────────────────────────────────
     SEMANTIC — LIGHT MODE (default)
     ──────────────────────────────────────────────────────────────────────── */
  --bg:              var(--neutral-0);
  --bg-subtle:       var(--neutral-50);
  --bg-muted:        var(--neutral-100);
  --bg-inverse:      var(--aubergine-800);
  --bg-elevated:     var(--neutral-0);

  --surface:         var(--neutral-0);
  --surface-raised:  var(--neutral-0);
  --surface-sunken:  var(--neutral-50);
  --surface-overlay: rgba(255, 255, 255, 0.96);

  --border:          var(--neutral-200);
  --border-strong:   var(--neutral-300);
  --border-subtle:   var(--neutral-100);
  --border-inverse:  rgba(255, 255, 255, 0.08);

  --text:            var(--aubergine-900);
  --text-secondary:  var(--neutral-600);
  --text-tertiary:   var(--neutral-500);
  --text-quaternary: var(--neutral-400);
  --text-inverse:    var(--neutral-0);
  --text-on-brand:   var(--neutral-0);
  --text-on-accent:  var(--aubergine-900);   /* copper bg → dark text */
  --text-link:       var(--aubergine-700);
  --text-link-hover: var(--aubergine-500);

  --brand:           var(--aubergine-700);
  --brand-hover:     var(--aubergine-600);
  --brand-pressed:   var(--aubergine-800);
  --brand-subtle:    var(--aubergine-50);
  --brand-subtle-hover: var(--aubergine-100);

  --accent:          var(--copper-400);
  --accent-hover:    var(--copper-500);
  --accent-pressed:  var(--copper-600);
  --accent-subtle:   var(--copper-50);
  --accent-subtle-hover: var(--copper-100);

  --pop:             var(--violet-400);      /* secondary pop, AI features */
  --pop-subtle:      var(--violet-50);

  --focus-ring:      var(--copper-400);
  --focus-ring-soft: rgba(224, 139, 92, 0.2);

  --selection-bg:    var(--copper-100);
  --selection-fg:    var(--aubergine-900);

  --highlight:       var(--copper-100);      /* inline text highlights */

  /* Scrim & overlays */
  --scrim:           rgba(26, 15, 46, 0.4);
  --scrim-strong:    rgba(26, 15, 46, 0.65);
  --scrim-blur:      8px;

  /* ────────────────────────────────────────────────────────────────────────
     TYPE
     ──────────────────────────────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;   /* italic display only */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — modular, 1.250 ratio at body, larger ratios at display */
  --text-2xs:   10px;
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-4xl:   48px;
  --text-5xl:   62px;
  --text-6xl:   80px;
  --text-7xl:  104px;
  --text-8xl:  128px;

  --leading-flat:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   1.9;

  --tracking-tightest: -0.04em;
  --tracking-tighter:  -0.03em;
  --tracking-tight:    -0.02em;
  --tracking-snug:     -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.12em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ────────────────────────────────────────────────────────────────────────
     SPACING — 4px base. The signature rhythm.
     ──────────────────────────────────────────────────────────────────────── */
  --space-0:    0;
  --space-px:   1px;
  --space-0_5:  2px;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-28:   112px;
  --space-32:   128px;
  --space-40:   160px;
  --space-48:   192px;
  --space-56:   224px;
  --space-64:   256px;

  /* Section rhythm — between top-level sections in long-form pages */
  --section-gap-sm: 64px;
  --section-gap-md: 96px;
  --section-gap-lg: 120px;
  --section-gap-xl: 160px;

  /* ────────────────────────────────────────────────────────────────────────
     RADIUS — 14px-anchored. Signature softness.
     ──────────────────────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-2xs:  2px;
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;   /* signature */
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-3xl:  56px;
  --radius-full: 9999px;

  /* ────────────────────────────────────────────────────────────────────────
     BORDER WIDTHS
     ──────────────────────────────────────────────────────────────────────── */
  --border-width-0: 0;
  --border-width-1: 1px;            /* default */
  --border-width-2: 2px;            /* focus inner */
  --border-width-4: 4px;            /* focus halo */

  /* ────────────────────────────────────────────────────────────────────────
     SHADOW — Tinted with the brand purple. Never pure black.
     ──────────────────────────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(26, 15, 46, 0.05);
  --shadow-sm:  0 2px 4px rgba(26, 15, 46, 0.06), 0 1px 2px rgba(26, 15, 46, 0.04);
  --shadow-md:  0 4px 12px rgba(26, 15, 46, 0.08), 0 2px 4px rgba(26, 15, 46, 0.04);
  --shadow-lg:  0 12px 32px rgba(26, 15, 46, 0.10), 0 4px 8px rgba(26, 15, 46, 0.06);
  --shadow-xl:  0 24px 56px rgba(26, 15, 46, 0.14), 0 8px 16px rgba(26, 15, 46, 0.08);
  --shadow-2xl: 0 40px 96px rgba(26, 15, 46, 0.20);

  /* Specialized */
  --shadow-copper:  0 8px 24px rgba(224, 139, 92, 0.30);   /* copper CTAs */
  --shadow-violet:  0 8px 24px rgba(167, 139, 250, 0.30);  /* AI / pop CTAs */
  --shadow-inner:   inset 0 1px 2px rgba(26, 15, 46, 0.08);
  --shadow-focus:   0 0 0 4px rgba(224, 139, 92, 0.20);    /* focus halo */

  /* Borders-as-shadow for token-precise hairlines on dark surfaces */
  --ring-default:   inset 0 0 0 1px var(--border);
  --ring-strong:    inset 0 0 0 1px var(--border-strong);

  /* ────────────────────────────────────────────────────────────────────────
     MOTION
     ──────────────────────────────────────────────────────────────────────── */
  --ease-linear:   linear;
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);          /* signature out */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);       /* gentle overshoot */
  --ease-bounce:   cubic-bezier(0.68, -0.55, 0.27, 1.55);   /* dramatic — sparingly */

  --duration-instant: 80ms;
  --duration-fast:    160ms;
  --duration-base:    240ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  --duration-slowest: 900ms;

  /* ────────────────────────────────────────────────────────────────────────
     LAYOUT
     ──────────────────────────────────────────────────────────────────────── */
  --container-xs:   480px;
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;
  --container-prose: 680px;     /* long-form reading width */

  --gutter-mobile:   16px;
  --gutter-tablet:   24px;
  --gutter-desktop:  32px;

  /* ────────────────────────────────────────────────────────────────────────
     Z-INDEX — Stacking order discipline.
     ──────────────────────────────────────────────────────────────────────── */
  --z-base:      0;
  --z-raised:    10;
  --z-sticky:    20;
  --z-overlay:   30;
  --z-dropdown:  40;
  --z-modal:     50;
  --z-popover:   60;
  --z-tooltip:   70;
  --z-toast:     80;
  --z-max:       9999;

  /* ────────────────────────────────────────────────────────────────────────
     PLATFORM — Device-specific safe areas / hit targets
     ──────────────────────────────────────────────────────────────────────── */
  --hit-target-min:    44px;       /* iOS HIG minimum */
  --hit-target-comfort: 48px;
  --safe-area-top:     env(safe-area-inset-top, 0px);
  --safe-area-bottom:  env(safe-area-inset-bottom, 0px);
}

/* ────────────────────────────────────────────────────────────────────────
   DARK MODE
   ──────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:              var(--aubergine-950);
  --bg-subtle:       var(--aubergine-900);
  --bg-muted:        var(--aubergine-800);
  --bg-inverse:      var(--neutral-50);
  --bg-elevated:     var(--aubergine-800);

  --surface:         var(--aubergine-900);
  --surface-raised:  var(--aubergine-800);
  --surface-sunken:  var(--aubergine-950);
  --surface-overlay: rgba(15, 8, 32, 0.94);

  --border:          rgba(255, 255, 255, 0.08);
  --border-strong:   rgba(255, 255, 255, 0.16);
  --border-subtle:   rgba(255, 255, 255, 0.04);
  --border-inverse:  var(--neutral-200);

  --text:            #F2EFFA;
  --text-secondary:  #B5ADC8;
  --text-tertiary:   #837A95;
  --text-quaternary: #5C5470;
  --text-inverse:    var(--aubergine-900);
  --text-on-brand:   var(--neutral-0);
  --text-on-accent:  var(--aubergine-900);
  --text-link:       var(--violet-300);
  --text-link-hover: var(--violet-200);

  /* In dark, the bright violet does primary brand work; copper still accents */
  --brand:           var(--violet-400);
  --brand-hover:     var(--violet-300);
  --brand-pressed:   var(--violet-500);
  --brand-subtle:    rgba(167, 139, 250, 0.10);
  --brand-subtle-hover: rgba(167, 139, 250, 0.16);

  --accent:          var(--copper-400);
  --accent-hover:    var(--copper-300);
  --accent-pressed:  var(--copper-500);
  --accent-subtle:   rgba(224, 139, 92, 0.10);
  --accent-subtle-hover: rgba(224, 139, 92, 0.16);

  --pop:             var(--violet-400);
  --pop-subtle:      rgba(167, 139, 250, 0.12);

  --focus-ring:      var(--copper-400);
  --focus-ring-soft: rgba(224, 139, 92, 0.25);

  --selection-bg:    rgba(224, 139, 92, 0.4);
  --selection-fg:    #FFF;

  --highlight:       rgba(224, 139, 92, 0.16);

  --scrim:           rgba(0, 0, 0, 0.6);
  --scrim-strong:    rgba(0, 0, 0, 0.8);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.30);
  --shadow-xl:  0 24px 56px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.40);
  --shadow-2xl: 0 40px 96px rgba(0, 0, 0, 0.70);
  --shadow-copper: 0 8px 24px rgba(224, 139, 92, 0.40);
  --shadow-violet: 0 8px 24px rgba(167, 139, 250, 0.40);
  --shadow-inner:  inset 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-focus:  0 0 0 4px rgba(224, 139, 92, 0.25);
}

/* ────────────────────────────────────────────────────────────────────────
   LEGACY ALIASES — DO NOT REMOVE
   The earlier rev shipped with --gold-* names that mapped to violet.
   These are kept as aliases so prior components (Foundations.jsx, Landing.jsx)
   keep rendering. New code MUST use --violet-* directly.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --gold-50:  var(--violet-50);
  --gold-100: var(--violet-100);
  --gold-200: var(--violet-200);
  --gold-300: var(--violet-300);
  --gold-400: var(--violet-400);
  --gold-500: var(--violet-500);
  --gold-600: var(--violet-600);
  --gold-700: var(--violet-700);
  --gold-800: var(--violet-800);
  --gold-900: var(--violet-900);
  --shadow-gold: var(--shadow-copper);  /* repointed: any "shadow-gold" use now reads as copper */
}

/* ────────────────────────────────────────────────────────────────────────
   BASE RESET / DEFAULTS
   ──────────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";   /* Inter humanist alternates */
}
::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* Focus ring — apply to anything interactive */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Reduced motion respects user preference */
@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;
  }
}