/* ==========================================================================
   JESSYNAYS DESIGN SYSTEM & COLOR TOKENS

   GENERATED FILE — do not hand-edit.
   Source of truth: themes.json.
   Regenerate with: node scripts/gen-themes.mjs

   Every color below is one of the palette's four colors, a tint/shade holding
   that color's hue, or an rgba() of it. No hue appears that isn't in the
   palette. Text lightness is solved against its own canvas so body copy
   clears WCAG AA (4.5:1) and primary copy clears AAA (7:1) in both modes.

   Each theme ships a dark and a light variant:
     [data-theme="<id>"]                     -> dark (default)
     [data-theme="<id>"][data-mode="light"]  -> light
   ========================================================================== */

/* --------------------------------------------------------------------------
   THEME-INDEPENDENT TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Typography */
  --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'Italianno', 'Great Vibes', cursive;

  /* Face used by every uppercased/letter-spaced label, plus the rotating seal.
     Architects Daughter sets narrower and lighter than the sans it replaced,
     so the two scales below re-balance size and tracking against the values
     the labels were originally designed at. */
  --font-caps: 'Architects Daughter', cursive;
  --font-caps-size-scale: 1.05;
  --font-caps-tracking-scale: 0.8;

  /* The seal keeps its own token so it can be pinned to a different face later
     without touching the labels. Its type size is not set here: fitSealText()
     measures the live font and writes --seal-fs-top / --seal-fs-bottom. */
  --font-seal: var(--font-caps);
  --seal-tracking: 0.086em;

  /* Geometry & spacing */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout bounds */
  --container-max: 1320px;
  --container-compact: 1040px;
  --header-height: 80px;

  /* Semantic danger (wishlist / remove). Deliberately outside every palette —
     a destructive affordance should read as red in all themes. */
  --danger: #e06c75;
  --danger-border: rgba(224, 108, 117, 0.5);
  --danger-bg: rgba(45, 22, 32, 0.85);

  /* Scrim over product photography — stays dark in both modes, since it sits
     on the image rather than on the page canvas. */
  --scrim-image-mid: rgba(18, 14, 22, 0.2);

  color-scheme: dark;
}

[data-mode="light"] {
  /* #e06c75 lands at 3.1:1 on paper, so the light variant takes a deeper red. */
  --danger: #b3242f;
  --danger-border: rgba(179, 36, 47, 0.45);
  --danger-bg: rgba(224, 108, 117, 0.14);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   THEME 3: Velvet Sand
   Palette: ["#58446f","#ab95c4","#d6cae6","#d8b26e"]
   Roles by luminance: lightest #d6cae6 | #d8b26e | #ab95c4 | darkest #58446f
                       warm accent #d8b26e · cool accent #ab95c4
   Surfaces from a separate palette: ["#CFB18D","#7E7767","#BDAD72","#9D6E5A"]
                       canvas anchors: dark #7E7767 · light #CFB18D
   -------------------------------------------------------------------------- */
[data-theme="theme3"],
[data-theme="theme3"][data-mode="dark"] {
  --theme-id: "theme3";
  --theme-name: "Velvet Sand";

  /* Surfaces */
  --bg-space: #0e0d0c;
  --bg-primary: #161513;
  --bg-secondary: #21201c;
  --bg-tertiary: #2c2a26;
  --bg-elevated: #3c3a34;
  --bg-input: #1c1a17;
  --bg-card: rgba(33, 32, 28, 0.78);
  --bg-card-hover: rgba(44, 42, 38, 0.92);
  --bg-glass: rgba(33, 32, 28, 0.84);
  --bg-glass-heavy: rgba(14, 13, 12, 0.95);
  --bg-modal-backdrop: rgba(14, 13, 12, 0.85);
  --overlay-chip: rgba(214, 202, 230, 0.08);
  --ring-contrast: rgba(22, 21, 18, 0.35);

  /* Body radial gradients */
  --bg-radial-1: rgba(216, 178, 110, 0.16);
  --bg-radial-2: rgba(22, 21, 19, 0.95);
  --bg-radial-3: rgba(171, 149, 196, 0.12);
  --bg-radial-4: rgba(126, 119, 103, 0.2);

  /* Borders & dividers */
  --border-subtle: rgba(214, 202, 230, 0.12);
  --border-medium: rgba(214, 202, 230, 0.22);
  --border-highlight: rgba(214, 202, 230, 0.45);
  --border-active: #ab95c4;

  /* Primary tonal accents */
  --purple-neutral-light: #d6cae6;
  --purple-neutral: #d8b26e;
  --purple-neutral-muted: #ab95c4;
  --purple-neutral-dark: #58446f;
  --purple-neutral-deep: #231c2b;

  /* Supplementary highlights */
  --accent-plum: #ab95c4;
  --accent-amethyst: #d8b26e;
  --accent-lavender: #d6cae6;
  --accent-gold-warm: #d8b26e;
  --accent-gold-pale: #ebd8b6;
  --accent-sage: #ab95c4;
  --accent-terracotta: #d8b26e;

  /* Typography */
  --text-primary: #d6d1db;
  --text-secondary: #aca2b9;
  --text-muted: #8a7a9f;
  --text-dim: #6e5c84;
  --text-accent: #d6cae6;
  --text-gold: #d8b16e;

  /* Primary action & selected chip */
  --action-from: #d8b26e;
  --action-to: #ab95c4;
  --action-text: #3c2e4c;
  --action-border: #ab95c4;
  --action-from-hover: #e2c592;
  --action-to-hover: #c2b2d4;
  --filled-from: #55426c;
  --filled-to: #2c2a26;
  --text-on-filled: #cbc6d2;

  /* Shadows & glows */
  --shadow-sm: 0 2px 8px rgba(14, 13, 12, 0.4);
  --shadow-md: 0 8px 24px rgba(14, 13, 12, 0.55);
  --shadow-lg: 0 16px 40px rgba(14, 13, 12, 0.7);
  --shadow-glow-purple: 0 0 25px rgba(171, 149, 196, 0.2);
  --shadow-glow-gold: 0 0 25px rgba(216, 178, 110, 0.2);

  /* Botanical SVGs */
  --botanical-stroke-1: #d8b26e;
  --botanical-stroke-2: #d8b26e;
  --botanical-fill-1: rgba(216, 178, 110, 0.05);
  --botanical-fill-2: rgba(216, 178, 110, 0.06);
  --botanical-glow: rgba(171, 149, 196, 0.35);
}

/* Theme 3: Velvet Sand — light variant */
[data-theme="theme3"][data-mode="light"] {
  --theme-id: "theme3";
  --theme-name: "Velvet Sand";

  /* Surfaces */
  --bg-space: #f9f8f6;
  --bg-primary: #f5f3ef;
  --bg-secondary: #eee9e2;
  --bg-tertiary: #e7dfd4;
  --bg-elevated: #fdfcfc;
  --bg-input: #fbfaf9;
  --bg-card: rgba(253, 252, 252, 0.85);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(253, 252, 252, 0.88);
  --bg-glass-heavy: rgba(249, 248, 246, 0.96);
  --bg-modal-backdrop: rgba(56, 53, 46, 0.55);
  --overlay-chip: rgba(214, 202, 230, 0.5);
  --ring-contrast: rgba(70, 66, 57, 0.22);

  /* Body radial gradients */
  --bg-radial-1: rgba(216, 178, 110, 0.14);
  --bg-radial-2: rgba(245, 243, 239, 0.92);
  --bg-radial-3: rgba(171, 149, 196, 0.1);
  --bg-radial-4: rgba(207, 177, 141, 0.3);

  /* Borders & dividers */
  --border-subtle: rgba(88, 68, 111, 0.14);
  --border-medium: rgba(88, 68, 111, 0.24);
  --border-highlight: rgba(88, 68, 111, 0.42);
  --border-active: #9b81b9;

  /* Primary tonal accents */
  --purple-neutral-light: #8161a7;
  --purple-neutral: #b58431;
  --purple-neutral-muted: #ab95c4;
  --purple-neutral-dark: #58446f;
  --purple-neutral-deep: #372b46;

  /* Supplementary highlights */
  --accent-plum: #9b81b9;
  --accent-amethyst: #ab95c4;
  --accent-lavender: #b5a2cd;
  --accent-gold-warm: #b58431;
  --accent-gold-pale: #e1d1b7;
  --accent-sage: #9b81b9;
  --accent-terracotta: #b58431;

  /* Typography */
  --text-primary: #352942;
  --text-secondary: #5d4a73;
  --text-muted: #7b6595;
  --text-dim: #9585a8;
  --text-accent: #8161a7;
  --text-gold: #8c6726;

  /* Primary action & selected chip */
  --action-from: #b58431;
  --action-to: #ab95c4;
  --action-text: #2b2136;
  --action-border: #b58431;
  --action-from-hover: #cd9c47;
  --action-to-hover: #c2b2d4;
  --filled-from: #4b3a5f;
  --filled-to: #695185;
  --text-on-filled: #e0dde4;

  /* Shadows & glows */
  --shadow-sm: 0 2px 8px rgba(70, 66, 57, 0.1);
  --shadow-md: 0 8px 24px rgba(70, 66, 57, 0.14);
  --shadow-lg: 0 16px 40px rgba(70, 66, 57, 0.2);
  --shadow-glow-purple: 0 0 25px rgba(171, 149, 196, 0.22);
  --shadow-glow-gold: 0 0 25px rgba(216, 178, 110, 0.22);

  /* Botanical SVGs */
  --botanical-stroke-1: #9b81b9;
  --botanical-stroke-2: #b58431;
  --botanical-fill-1: rgba(88, 68, 111, 0.09);
  --botanical-fill-2: rgba(216, 178, 110, 0.1);
  --botanical-glow: rgba(155, 129, 185, 0.3);
}