/*
  Media Fera — Design Tokens
  Source of truth: docs/DESIGN.md (Atelier Fera design system)
  Mirrors the Stitch export's Tailwind config as plain CSS custom properties.
*/

:root {
  /* Native form controls / scrollbars follow the resolved theme (including
     a manual override), not just the raw OS preference. */
  color-scheme: light;

  /* ---- Color: surfaces & ink ---- */
  --color-background: #f8f9ff;
  --color-surface: #f8f9ff;
  --color-surface-dim: #cbdbf5;
  --color-surface-bright: #f8f9ff;
  --color-surface-variant: #d3e4fe;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #eff4ff;
  --color-surface-container: #e5eeff;
  --color-surface-container-high: #dce9ff;
  --color-surface-container-highest: #d3e4fe;
  --color-on-surface: #0b1c30;
  --color-on-surface-variant: #46464b;
  --color-on-background: #0b1c30;
  --color-outline: #77767b;
  --color-outline-variant: #c7c6cb;

  /* ---- Color: primary / secondary ---- */
  --color-primary: #000000;
  --color-on-primary: #ffffff;
  --color-primary-container: #1a1b20;
  --color-on-primary-container: #848389;

  --color-secondary: #4b41e1;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #645efb;
  --color-secondary-fixed: #e2dfff;
  --color-secondary-fixed-dim: #c3c0ff;
  --color-on-secondary-fixed: #0f0069;

  --color-tertiary-fixed-dim: #d0bcff;

  --color-error: #ba1a1a;
  --color-on-error: #ffffff;

  /* ---- Color: theme-independent fixed surfaces ---- */
  /* Text/icons sitting on a surface that is *always* dark regardless of
     site theme (photo overlays, the cinematic production section). */
  --color-on-cinematic: #ffffff;
  --color-cinematic-surface: #000000;

  /* ---- Color: chrome & dividers ---- */
  --color-border: rgba(11, 28, 48, 0.06);
  --color-header-surface: rgba(255, 255, 255, 0.85);

  /* ---- Spacing scale ---- */
  --space-xs: 0.375rem;   /* 6px */
  --space-sm: 0.75rem;    /* 12px */
  --space-md: 1.25rem;    /* 20px */
  --space-lg: 2rem;       /* 32px */
  --space-xl: 3rem;       /* 48px */
  --space-2xl: 4.5rem;    /* 72px */

  --gutter: 1.5rem;         /* 24px — desktop grid gutter */
  --gutter-mobile: 1rem;    /* 16px — mobile section side padding */
  --margin: 3.5rem;         /* 56px — desktop section side padding */
  --margin-mobile: 1.25rem; /* 20px — mobile page margin */

  /* ---- Radius scale ---- */
  --radius-full: 9999px;
  --radius-xs: 12px;   /* icon chips, inner controls */
  --radius-sm: 16px;   /* media thumbnails (rounded-2xl) */
  --radius-md: 24px;   /* inner bento canvas */
  --radius-lg: 28px;   /* primary bento cards */
  --radius-xl: 32px;   /* hero deck / dark feature block */
  --radius-2xl: 36px;  /* final CTA panel */

  /* ---- Typography ---- */
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --content-max: 1280px; /* matches Stitch export's max-w-7xl */

  /* ---- Elevation ---- */
  --shadow-hairline: 0 1px 3px rgba(0, 0, 0, 0.02);
  --shadow-card-hover: 0 8px 24px -6px rgba(11, 28, 48, 0.08);
  --shadow-float: 0 12px 32px -8px rgba(0, 0, 0, 0.04);
  --shadow-deck: 0 24px 64px -16px rgba(11, 28, 48, 0.06);
  --shadow-cta: 0 12px 28px -6px rgba(0, 0, 0, 0.22);
  --shadow-glow-secondary: 0 8px 24px -4px rgba(75, 65, 225, 0.28);
}

/*
  Dark theme — Media Fera Professional Dark
  Premium editorial charcoal/navy, not OLED black. Same token names as the
  light theme above; only values change. Spacing, radius, typography and the
  "fixed" MD3-style roles (secondary-fixed*, tertiary-fixed-dim, cinematic
  surfaces) are intentionally left untouched — they read the same in both
  themes by design.
*/
:root[data-theme="dark"] {
  color-scheme: dark;

  /* ---- Color: surfaces & ink ---- */
  --color-background: #0e1014;
  --color-surface: #0e1014;
  --color-surface-dim: #0a0b0e;
  --color-surface-bright: #20252e;
  --color-surface-variant: #1a1e26;
  --color-surface-container-lowest: #20252e;
  --color-surface-container-low: #1c2028;
  --color-surface-container: #1a1e26;
  --color-surface-container-high: #171a20;
  --color-surface-container-highest: #15181e;
  --color-on-surface: #f4f5f7;
  --color-on-surface-variant: #a6acb6;
  --color-on-background: #f4f5f7;
  --color-outline: #767b85;
  /* Lighter than the elevated card surface (#20252e) on purpose — this is
     the token form inputs border on, and needs to read as a visible edge,
     not blend into the card behind it. */
  --color-outline-variant: #3d434e;

  /* ---- Color: primary / secondary ---- */
  /* Primary inverts to a light, high-contrast surface for buttons/icon
     chips on a dark page — never pure neon, never a flat blue fill. */
  --color-primary: #f4f5f7;
  --color-on-primary: #14161b;
  --color-primary-container: #dfe1e6;
  --color-on-primary-container: #babec4;

  /* Cobalt/violet accent kept, lifted slightly so it reads as text against
     a dark page; badges pair it with dark ink instead of white for contrast. */
  --color-secondary: #8b83ff;
  --color-on-secondary: #14121f;

  --color-error: #ff5449;

  /* ---- Color: chrome & dividers ---- */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-header-surface: rgba(21, 24, 30, 0.72);

  /* ---- Elevation ---- */
  /* Shadows alone barely read on a dark page — surfaces + borders above do
     most of the separation work; these stay as a restrained finishing touch. */
  --shadow-hairline: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 8px 24px -6px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  --shadow-deck: 0 24px 64px -16px rgba(0, 0, 0, 0.6);
  --shadow-cta: 0 12px 28px -6px rgba(0, 0, 0, 0.5);
  --shadow-glow-secondary: 0 8px 24px -4px rgba(139, 131, 255, 0.35);
}