/* ==========================================================================
   PREVZ — DESIGN TOKENS
   Source of truth extracted from the iOS app (read-only):
     Sources/Appearance.swift        -> UI palettes, 5 themes, light/dark/high contrast
     Sources/RecapExport.swift       -> editorial card palettes (ink / accent / glow)
     Sources/PaletteStories.swift    -> Color Story surfaces (paper, ink, chrome, black)
     Sources/StudioView.swift        -> type scale, radii, spacing, motion
     Sources/AppearancePickerView.swift
   Every value below is traceable to a file in the app. Do not invent new hues.
   ========================================================================== */

:root {
  /* ---------- 1. BRAND (app icon + wordmark) -------------------------------- */
  /* Sampled from BrandAssets/Prevz-AppIcon-2026-10-30.png */
  --brand-violet: #471cca;
  --brand-violet-deep: #2a1160;
  --brand-indigo: #6030ee;
  --brand-lilac: #c3a6ff;
  --brand-blue: #2857e8;
  --brand-mist: #b5c5fb;
  --brand-rose: #ed237f;
  --brand-pink: #ff9bcf;
  --brand-blush: #f6d0f8;
  --brand-white: #fefefe;

  /* The three brand families used on every recap card */
  --brand-gradient: linear-gradient(135deg, var(--brand-indigo) 0%, var(--brand-blue) 48%, var(--brand-rose) 100%);

  /* ---------- 2. INK (editorial card backgrounds) --------------------------- */
  /* RecapExport.swift — kicker: each recap card owns one ink, one accent, one glow */
  --ink: #100c2c;          /* numbers / "Your year"      */
  --ink-plum: #230c30;     /* colors  / "Year in color"  */
  --ink-rose: #290b22;     /* loved   / "Most loved"     */
  --ink-cobalt: #0b153b;   /* saved   / "Worth keeping"  */
  --ink-ember: #2a1020;    /* conversations              */
  --ink-navy: #151a3d;     /* mine    / "Yours & theirs"  */
  --ink-teal: #061f2c;     /* rhythm  / "Your rhythm"    */
  --ink-clay: #2a1420;     /* perspective                */
  --ink-night: #101333;    /* activity / "Beyond the grid" */

  /* Accent + glow pairs (exact hex from RecapExport.swift) */
  --acc-year: #c3a6ff;        --glow-year: #6030ee;
  --acc-loved: #ff9bcf;       --glow-loved: #ed237f;
  --acc-saved: #a6bdff;       --glow-saved: #2857e8;
  --acc-talk: #ffb093;        --glow-talk: #e65f58;
  --acc-mine: #a7ceff;        --glow-mine: #3976ef;
  --acc-colors: #ffa6f8;      --glow-colors: #b22bcc;
  --acc-rhythm: #91e3f5;      --glow-rhythm: #008caf;
  --acc-angle: #ffd2ad;       --glow-angle: #ce6a78;
  --acc-activity: #cac2ff;    --glow-activity: #6661e9;

  /* ---------- 3. COLOR STORY SURFACES (PaletteStories.swift) ---------------- */
  --cs-paper: #f5f1e8;   /* Color(red: 0.96, green: 0.945, blue: 0.91) */
  --cs-ink: #242424;     /* Color(white: 0.14) */
  --cs-black: #0e0e0e;   /* Color(white: 0.055) */
  --cs-chrome: #dbdbdb;  /* Color(white: 0.86) */
  --cs-film-bg: #0c0c0c;

  /* ---------- 4. UI THEMES (Appearance.swift) ------------------------------- */
  /* Neutral is the default install. Five themes x light/dark/high contrast.    */
  --ui-bg: #f7f7f8;
  --ui-surface: #ffffff;
  --ui-text: #17181c;
  --ui-text-secondary: #60636d;
  --ui-outline: #d2d5de;
  --ui-accent: #4054e8;        /* Indigo light accent */
  --ui-on-accent: #ffffff;
  --ui-accent-soft: rgba(64, 84, 232, 0.10);

  /* Dark counterparts (used by the site footer bar and any dark surface) */
  --ui-bg-dark: #111216;
  --ui-surface-dark: #1c1e25;
  --ui-text-dark: #f4f5f7;
  --ui-text-secondary-dark: #a7adb9;
  --ui-outline-dark: #424856;
  --ui-accent-dark: #a5b4ff;

  /* Site default accent = brand indigo (bridges icon + cards) */
  --accent: var(--brand-indigo);
  --accent-ink: #150a3a;
  --accent-soft: rgba(96, 48, 238, 0.10);
  --accent-line: rgba(96, 48, 238, 0.24);

  /* ---------- 5. TYPOGRAPHY ------------------------------------------------- */
  /* The app ships no custom font: SF Pro (UI), New York (editorial),
     SF Rounded (brand + numerals), SF Mono (eyebrows, codes).                 */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-rounded: "SF Pro Rounded", ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-xs: 0.75rem;      /* 12 — captions                */
  --text-sm: 0.875rem;     /* 14 — metadata                */
  --text-base: 1rem;       /* 16 — body                    */
  --text-lg: 1.125rem;     /* 18 — lead                    */
  --text-xl: 1.375rem;     /* 22 — card titles             */
  --display-3: clamp(1.625rem, 3.2vw, 2.125rem);   /* 26-34 */
  --display-2: clamp(2rem, 4.4vw, 3rem);           /* 32-48 */
  --display-1: clamp(2.5rem, 6.2vw, 4.5rem);       /* 40-72 */

  --tracking-tight: -0.031em;   /* app: .tracking(-1) at 32pt */
  --tracking-tighter: -0.045em; /* app: .tracking(-1.5) / (-3) on display */
  --tracking-eyebrow: 0.18em;   /* app: .tracking(2) on 10pt mono */
  --tracking-brand: -0.04em;    /* wordmark .tracking(-1) at 25pt */

  --leading-tight: 1.04;
  --leading-snug: 1.22;
  --leading-body: 1.62;

  /* ---------- 6. SPACE ------------------------------------------------------ */
  --s-1: 0.25rem;  /*  4 */
  --s-2: 0.5rem;   /*  8 */
  --s-3: 0.75rem;  /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.25rem;  /* 20 — app's global `gap` */
  --s-6: 1.5rem;   /* 24 */
  --s-7: 2rem;     /* 32 */
  --s-8: 2.5rem;   /* 40 */
  --s-9: 3rem;     /* 48 */
  --s-10: 4rem;    /* 64 */
  --s-11: 5rem;    /* 80 */
  --s-12: 6rem;    /* 96 */

  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --maxw: 78rem;      /* 1248 */
  --maxw-text: 42rem; /* 672 */

  /* ---------- 7. RADIUS (app census: 6/12/16/17/18/19/20/22/24/30/32) ------- */
  --r-xs: 0.375rem;  /*  6 */
  --r-sm: 0.75rem;   /* 12 */
  --r-md: 1rem;      /* 16 */
  --r-lg: 1.25rem;   /* 20 — the app's default card */
  --r-xl: 1.5rem;    /* 24 */
  --r-2xl: 2rem;     /* 32 — sheets */
  --r-pill: 999px;

  /* ---------- 8. ELEVATION (app is very restrained: one soft shadow) -------- */
  --shadow-1: 0 1px 2px rgba(16, 12, 44, 0.04), 0 10px 28px -16px rgba(16, 12, 44, 0.16);
  --shadow-2: 0 2px 6px rgba(16, 12, 44, 0.05), 0 28px 60px -28px rgba(16, 12, 44, 0.28);
  --shadow-device: 0 50px 90px -40px rgba(16, 12, 44, 0.45), 0 0 0 1px rgba(16, 12, 44, 0.07);
  --shadow-glow: 0 30px 80px -30px rgba(96, 48, 238, 0.45);

  /* ---------- 9. MOTION (StudioView.swift workspaceAnimation + recap) ------- */
  --ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.28s;   /* .smooth(duration: 0.28) */
  --dur-slow: 0.6s;

  /* ---------- 10. HAIRLINES ------------------------------------------------- */
  --hairline: 1px solid rgba(16, 12, 44, 0.08);
  --hairline-strong: 1px solid rgba(16, 12, 44, 0.14);
  --hairline-on-ink: 1px solid rgba(255, 255, 255, 0.14);
}

/* Theme previews (used by the "Five colour themes" section) ------------------ */
[data-theme="neutral"] {
  --ui-accent: #292929; --ui-on-accent: #ffffff; --ui-bg: #f6f6f6;
  --ui-surface: #ffffff; --ui-text: #171717; --ui-text-secondary: #626262; --ui-outline: #d2d2d2;
  --ui-accent-dark: #e7e7e7; --ui-bg-dark: #121212; --ui-surface-dark: #1f1f1f;
  --ui-text-dark: #f5f5f5; --ui-text-secondary-dark: #b0b0b0; --ui-outline-dark: #444444;
}
[data-theme="indigo"] {
  --ui-accent: #4054e8; --ui-on-accent: #ffffff; --ui-bg: #f7f7f8;
  --ui-surface: #ffffff; --ui-text: #17181c; --ui-text-secondary: #60636d; --ui-outline: #d2d5de;
  --ui-accent-dark: #a5b4ff; --ui-bg-dark: #111216; --ui-surface-dark: #1c1e25;
  --ui-text-dark: #f4f5f7; --ui-text-secondary-dark: #a7adb9; --ui-outline-dark: #424856;
}
[data-theme="iris"] {
  --ui-accent: #7054d8; --ui-on-accent: #ffffff; --ui-bg: #f7f7f8;
  --ui-surface: #ffffff; --ui-text: #17181c; --ui-text-secondary: #60636d; --ui-outline: #d2d5de;
  --ui-accent-dark: #c4b5fd; --ui-bg-dark: #111216; --ui-surface-dark: #1c1e25;
  --ui-text-dark: #f4f5f7; --ui-text-secondary-dark: #a7adb9; --ui-outline-dark: #424856;
}
[data-theme="vermilion"] {
  --ui-accent: #c94727; --ui-on-accent: #ffffff; --ui-bg: #f7f7f8;
  --ui-surface: #ffffff; --ui-text: #17181c; --ui-text-secondary: #60636d; --ui-outline: #d2d5de;
  --ui-accent-dark: #ffb59d; --ui-bg-dark: #111216; --ui-surface-dark: #1c1e25;
  --ui-text-dark: #f4f5f7; --ui-text-secondary-dark: #a7adb9; --ui-outline-dark: #424856;
}
[data-theme="olive"] {
  --ui-accent: #38521f; --ui-on-accent: #ffffff; --ui-bg: #f6f5f1;
  --ui-surface: #ffffff; --ui-text: #17181c; --ui-text-secondary: #60636d; --ui-outline: #d2d5de;
  --ui-accent-dark: #b9da94; --ui-bg-dark: #131510; --ui-surface-dark: #1f211c;
  --ui-text-dark: #f4f5f7; --ui-text-secondary-dark: #a7adb9; --ui-outline-dark: #424856;
}

/* ==========================================================================
   11. SEMANTIC LAYER — contrat UI/UX Pro Max
   Rôles nommés (background / foreground / card / muted / border / ring …)
   mappés sur les tokens Prevz. Les composants n'utilisent que ces rôles.
   ========================================================================== */
:root {
  color-scheme: light dark;

  --color-background: var(--ui-bg);
  --color-foreground: var(--ui-text);
  --color-card: var(--ui-surface);
  --color-card-foreground: var(--ui-text);
  --color-muted: color-mix(in srgb, var(--ui-text) 5%, var(--ui-bg));
  --color-muted-foreground: var(--ui-text-secondary);
  --color-border: var(--ui-outline);
  --color-primary: var(--accent);
  --color-on-primary: var(--ui-on-accent);
  --color-accent: var(--accent);
  --color-on-accent: var(--ui-on-accent);
  --color-ring: var(--accent);

  /* espacement — échelle 4/8/16/24/32/48 */
  --space-xs: var(--s-1);
  --space-sm: var(--s-2);
  --space-md: var(--s-4);
  --space-lg: var(--s-6);
  --space-xl: var(--s-7);
  --space-2xl: var(--s-9);

  /* mouvement — 150/220/300 ms (les tokens de l'app restent en dessous) */
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* interaction */
  --target-min: 44px;                        /* WCAG 2.5.8 + iOS 44pt */
  --focus-width: 2px;
  --focus-offset: 3px;
  --focus-color: var(--color-ring);
}

/* ---------- 12. DARK SCHEME (prefers-color-scheme) -----------------------
   La DA de l'app est déjà ink-first : le site s'inverse proprement, les
   sections ink restent ink, les accents passent en version claire de l'app. */
@media (prefers-color-scheme: dark) {
  :root {
    --ui-bg: #0c0d11;
    --ui-surface: #15171d;
    --ui-text: #f2f3f7;
    --ui-text-secondary: #a6abb8;
    --ui-outline: #333844;

    --accent: #a5b4ff;              /* ui-accent-dark de l'app (Indigo) */
    --accent-ink: #0c0d11;
    --accent-soft: rgba(165, 180, 255, 0.14);
    --accent-line: rgba(165, 180, 255, 0.30);

    --hairline: 1px solid rgba(255, 255, 255, 0.10);
    --hairline-strong: 1px solid rgba(255, 255, 255, 0.16);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.55), 0 10px 28px -16px rgba(0, 0, 0, 0.75);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.55), 0 28px 60px -28px rgba(0, 0, 0, 0.85);
    --shadow-device: 0 50px 90px -40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow-glow: 0 30px 80px -30px rgba(122, 92, 255, 0.55);
  }
}