/* sinreel — design tokens (single source of truth). See docs/DESIGN.md.
 *
 * Tier 1 primitives (raw scales)  ->  Tier 2 semantic (roles)  ->  components.
 * Components MUST consume Tier 2 (--color-*, --gradient-*) only, never raw
 * primitives or hex. To add a theme, re-map the Tier 2 block under a
 * [data-theme="..."] selector; components never change.
 *
 * Channel primitives are space-separated R G B so any opacity can be derived
 * with  rgb(var(--accent-rgb) / 0.5).
 */

/* The cascade order for the whole app. Declared once, here (loaded first).
 * Later layers win regardless of selector specificity. */
@layer reset, tokens, base, components, utilities;

@layer tokens {
  :root {
    /* ============================ Tier 1: primitives ====================== */

    /* brand channels (R G B) */
    --accent-rgb: 232 85 106;       /* crimson       #e8556a */
    --accent-deep-rgb: 168 30 53;   /* crimson deep  #a11e35 */
    --fg-rgb: 246 231 230;          /* warm off-white ink */
    --overlay-rgb: 255 255 255;     /* light surfaces over dark */
    --shadow-rgb: 0 0 0;
    --success-rgb: 46 168 116;      /* #2ea874 */
    --scrim-rgb: 8 3 5;             /* near-black overlay chip */

    /* dark bordeaux ramp (solids) */
    --bordeaux-950: #100406;
    --bordeaux-900: #16070a;
    --bordeaux-800: #1a0508;
    --bordeaux-700: #22090e;
    --bordeaux-650: #140508;
    --bordeaux-600: #3a1016;
    --logo-ink: #f8eeec;
    --white: #fff;
    --black: #000;

    /* spacing (4px base) */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;

    /* radii */
    --radius-xs: 6px;  --radius-sm: 8px;  --radius-md: 11px;
    --radius-lg: 14px; --radius-xl: 18px;
    --radius-pill: 999px; --radius-circle: 50%;

    /* typography */
    --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
    --text-xs: 12px; --text-sm: 13px; --text-base: 14px;
    --text-md: 15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 26px;
    --weight-light: 300; --weight-regular: 400;
    --weight-medium: 500; --weight-semibold: 600;

    /* elevation */
    --shadow-accent: 0 8px 22px rgb(var(--accent-deep-rgb) / 0.32);
    --shadow-lg: 0 30px 80px rgb(var(--shadow-rgb) / 0.5);
    --shadow-card: 0 40px 100px rgb(var(--shadow-rgb) / 0.5);
    --shadow-xl: 0 40px 100px rgb(var(--shadow-rgb) / 0.6);

    /* motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 0.18s; --dur: 0.2s; --dur-slow: 0.28s;

    /* z-index */
    --z-base: 1; --z-overlay: 5; --z-modal: 1000;

    /* app layout */
    --video-w: min(82vw, 1340px, 122vh);
    --video-h: calc(var(--video-w) * 9 / 16);
  }

  /* ====================== Tier 2: semantic (dark = default) ================
   * This block is the theming seam. A future light theme is just:
   *   [data-theme="light"] { --color-bg: ...; --color-text: ...; ... } */
  :root {
    /* surfaces */
    --color-bg: var(--bordeaux-950);
    --color-bg-raised: var(--bordeaux-900);
    --color-surface: rgb(var(--overlay-rgb) / 0.05);
    --color-surface-raised: rgb(var(--overlay-rgb) / 0.09);

    /* text */
    --color-text: rgb(var(--fg-rgb));
    --color-text-muted: rgb(var(--fg-rgb) / 0.52);
    --color-text-faint: rgb(var(--fg-rgb) / 0.34);

    /* borders */
    --color-border: rgb(var(--fg-rgb) / 0.12);
    --color-border-soft: rgb(var(--fg-rgb) / 0.07);

    /* accent (crimson) */
    --color-accent: rgb(var(--accent-rgb));
    --color-accent-deep: rgb(var(--accent-deep-rgb));
    --color-accent-border: rgb(var(--accent-rgb) / 0.5);
    --color-accent-border-strong: rgb(var(--accent-rgb) / 0.55);
    --color-accent-soft: rgb(var(--accent-rgb) / 0.12);
    --color-on-accent: var(--white);

    /* status — success */
    --color-success: rgb(var(--success-rgb));
    --color-success-soft: rgb(var(--success-rgb) / 0.12);
    --color-success-border: rgb(var(--success-rgb) / 0.4);
    --color-success-text: #b9efd4;

    /* status — danger (shares the crimson hue) */
    --color-danger-soft: rgb(var(--accent-rgb) / 0.12);
    --color-danger-border: rgb(var(--accent-rgb) / 0.4);
    --color-danger-text: #f6c9cf;
    --color-danger-text-strong: #f6a6b1;

    /* misc */
    --color-scrim: rgb(var(--scrim-rgb) / 0.78);

    /* gradients */
    --gradient-accent: linear-gradient(150deg, var(--color-accent), var(--color-accent-deep));
    --gradient-media: linear-gradient(160deg, var(--bordeaux-700), var(--bordeaux-650));
    --gradient-avatar: linear-gradient(150deg, var(--bordeaux-600), var(--bordeaux-800));
  }
}