/* ==========================================================================
   shelf - design tokens for both looks
   --------------------------------------------------------------------------
   The same custom property names exist in both looks. Switch looks by
   changing two attributes on <html> (or on any container, e.g. a preview):

     <html data-look="marquee" data-theme="light">   Marquee, light
     <html data-look="soft"    data-theme="dark">    Soft Stack, dark

   The user's accent comes in through four input properties, set by
   shelf-looks.js (applyAccent). Components never read the inputs directly;
   they read --accent, --accent-fill, --on-accent and --accent-plate.

     --accent-input       solid color (hex) - used for thin marks
     --accent-fill-input  solid or gradient - used for fills 24px and up
     --accent-base-input  hue to tint surfaces from (Soft Stack only)
     --on-accent-input    #FFFFFF or near-black, whichever reads better

   Fonts (Google Fonts):
     Marquee     Big Shoulders Display 600/700/800 + Figtree 400/500/600/700
     Soft Stack  Bricolage Grotesque 500/700/800 + Plus Jakarta Sans 400/500/600/700
   ========================================================================== */

:root {
  /* defaults = "Ocean", the app's current default accent */
  --accent-input: #5b8cff;
  --accent-fill-input: #5b8cff;
  --accent-base-input: #5b8cff;
  --on-accent-input: #0E0E10;
  --accent-textured: 0; /* 1 for metallic or texture accents */

  /* spacing scale - shared by both looks */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --gutter: 16px;
  --tap: 44px;              /* minimum hit target */

  /* status - overridden per look and theme below */
  --ok: #1F9A57;
  --danger: #C8323A;
  --on-danger: #FFFFFF;
}

/* ==========================================================================
   MARQUEE  - "Big art, bold type, nothing in the way."
   Square art, round controls, condensed uppercase titles, flat and hairlined.
   ========================================================================== */

[data-look="marquee"] {
  /* type */
  --font-display: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-weight: 800;
  --display-transform: uppercase;
  --display-tracking: 0.01em;
  --display-leading: 0.88;
  --fs-hero: 56px;          /* detail title */
  --fs-title: 44px;         /* up next hero card title */
  --fs-number: 40px;        /* stat numbers */
  --fs-section: 22px;       /* section headers (display font) */
  --fs-wordmark: 26px;
  --fs-body: 15px;
  --fs-row-title: 16px;
  --fs-meta: 13px;
  --fs-micro: 11px;
  --section-transform: uppercase;
  --section-weight: 800;

  /* shape */
  --radius-art: 3px;        /* posters, art, hero card */
  --radius-tile: 3px;       /* poster tiles in grids */
  --radius-card: 3px;       /* panels and cards */
  --radius-row: 0px;        /* list rows and episode rows */
  --radius-control: 999px;  /* buttons, check buttons, pills */
  --radius-chip: 999px;
  --radius-sheet: 3px;      /* top corners of bottom sheets */
  --radius-dialog: 3px;

  /* elevation - Marquee is flat: hairlines and scrims, one sheet shadow */
  --shadow-card: none;
  --shadow-float: none;
  --shadow-sheet: 0 -12px 40px -12px rgba(0, 0, 0, .35);
  --border-row: 0;          /* rows are separated by space, not borders */

  /* progress: one segment per episode */
  --seg-gap: 2px;
  --progress-h: 4px;
  --progress-radius: 0px;

  /* icons */
  --icon-stroke: 1.8;
  --icon-size: 22px;

  /* chrome sizes */
  --appbar-h: 52px;
  --tabbar-h: 64px;
  --subtab-h: 40px;

  /* motion */
  --dur-press: 120ms;
  --dur-pill: 220ms;
  --dur-sheet: 280ms;
  --dur-check: 260ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-pill: cubic-bezier(.3, 0, 0, 1);
  --ease-sheet: cubic-bezier(.2, 0, 0, 1);
  --press-scale: .97;

  /* accent resolution (same in light and dark) */
  --accent: var(--accent-input);
  --accent-fill: var(--accent-fill-input);
  --on-accent: var(--on-accent-input);
}

[data-look="marquee"],
[data-look="marquee"][data-theme="light"] {
  --bg: #EEEDEA;
  --surface: #FFFFFF;
  --surface-2: #E3E1DC;
  --tone: #E3E1DC;          /* Marquee has no tint; tone = surface-2 */
  --text: #0E0E10;
  --muted: #5C5C64;
  --line: #D6D3CD;
  --chrome: #F7F6F3;        /* bars, and the phone status + nav bar color */
  --nav-pill: #0E0E10;      /* sliding pill behind the active tab */
  --nav-pill-text: #F7F6F3;
  --accent-plate: #0E0E10;  /* ink plate icons sit on over any accent */
  --on-plate: #FFFFFF;
  --hero-scrim: linear-gradient(to top, rgba(5,5,8,.92) 0%, rgba(5,5,8,.55) 38%, rgba(5,5,8,0) 66%);
  --scrim: rgba(8, 8, 10, .55);
  --ok: #1F9A57;
  --danger: #C8323A;
  --on-danger: #FFFFFF;
  color-scheme: light;
}

[data-look="marquee"][data-theme="dark"] {
  --bg: #1E1E21;           /* charcoal, softer than near-black */
  --surface: #28282C;
  --surface-2: #333338;
  --tone: #333338;
  --text: #F4F3EF;
  --muted: #A6A6AE;
  --line: #3A3A41;
  --chrome: #232327;
  --nav-pill: #F4F3EF;
  --nav-pill-text: #1E1E21;
  --accent-plate: #0E0E10;
  --on-plate: #FFFFFF;
  --hero-scrim: linear-gradient(to top, rgba(5,5,8,.92) 0%, rgba(5,5,8,.55) 38%, rgba(5,5,8,0) 66%);
  --scrim: rgba(0, 0, 0, .62);
  --ok: #3CC77A;
  --danger: #FF6B6B;
  --on-danger: #1E1E21;
  color-scheme: dark;
}

/* ==========================================================================
   SOFT STACK - "Rounded, friendly, tinted by your color."
   Stadium shapes, accent-tinted surfaces, soft colored shadows.
   ========================================================================== */

[data-look="soft"] {
  /* type */
  --font-display: 'Bricolage Grotesque', 'Avenir Next', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-weight: 800;
  --display-transform: none;
  --display-tracking: -0.03em;
  --display-leading: 1;
  --fs-hero: 42px;
  --fs-title: 22px;
  --fs-number: 34px;
  --fs-section: 20px;
  --fs-wordmark: 25px;
  --fs-body: 15px;
  --fs-row-title: 15px;
  --fs-meta: 13px;
  --fs-micro: 12px;
  --section-transform: none;
  --section-weight: 700;

  /* shape */
  --radius-art: 18px;
  --radius-tile: 22px;
  --radius-card: 24px;
  --radius-row: 999px;      /* rows are stadium bars */
  --radius-control: 999px;
  --radius-chip: 999px;
  --radius-sheet: 32px;
  --radius-dialog: 28px;

  /* elevation - soft, accent-tinted */
  --shadow-card: 0 1px 2px rgba(20, 10, 40, .06);
  --shadow-float: 0 14px 30px -12px rgba(30, 15, 60, .45);
  --shadow-sheet: 0 -10px 40px -10px rgba(20, 10, 40, .35);
  --border-row: 0;

  /* progress: one continuous rounded bar */
  --seg-gap: 0px;
  --progress-h: 6px;
  --progress-radius: 999px;

  /* icons */
  --icon-stroke: 1.9;
  --icon-size: 22px;

  /* chrome sizes */
  --appbar-h: 56px;
  --tabbar-h: 64px;         /* the floating dock */
  --subtab-h: 38px;

  /* motion - short but bouncy */
  --dur-press: 120ms;
  --dur-pill: 260ms;
  --dur-sheet: 300ms;
  --dur-check: 320ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-pill: cubic-bezier(.34, 1.4, .64, 1);   /* slight overshoot */
  --ease-sheet: cubic-bezier(.2, .9, .3, 1.05);
  --press-scale: .96;

  --accent-fill: var(--accent-fill-input);
}

[data-look="soft"],
[data-look="soft"][data-theme="light"] {
  --accent: var(--accent-input);
  --on-accent: var(--on-accent-input);
  --bg: color-mix(in oklab, var(--accent-base-input) 7%, #FAF9F7);
  --surface: #FFFFFF;
  --surface-2: color-mix(in oklab, var(--accent-base-input) 9%, #F2F1EE);
  --tone: color-mix(in oklab, var(--accent-base-input) 20%, #FFFFFF);
  --text: color-mix(in oklab, var(--accent-base-input) 16%, #121016);
  --muted: color-mix(in oklab, var(--accent-base-input) 20%, #57555F);
  --line: color-mix(in oklab, var(--accent-base-input) 14%, #E4E2DE);
  --chrome: var(--bg);
  --nav-pill: var(--accent-fill);
  --nav-pill-text: var(--on-accent);
  --accent-plate: #121016;
  --on-plate: #FFFFFF;
  --hero-scrim: linear-gradient(to top, rgba(10,8,16,.75), rgba(10,8,16,0) 60%);
  --scrim: rgba(18, 12, 30, .5);
  --ok: #1F9A57;
  --danger: #C42B2B;
  --on-danger: #FFFFFF;
  color-scheme: light;
}

[data-look="soft"][data-theme="dark"] {
  --accent: color-mix(in oklab, var(--accent-input) 70%, #FFFFFF);
  --on-accent: #121016;
  --bg: color-mix(in oklab, var(--accent-base-input) 9%, #0F0E12);
  --surface: color-mix(in oklab, var(--accent-base-input) 13%, #18171C);
  --surface-2: color-mix(in oklab, var(--accent-base-input) 19%, #1F1E24);
  --tone: color-mix(in oklab, var(--accent-base-input) 34%, #18171C);
  --text: #F3F1F8;
  --muted: color-mix(in oklab, var(--accent-base-input) 16%, #A5A3AD);
  --line: color-mix(in oklab, var(--accent-base-input) 18%, #29282E);
  --chrome: var(--bg);
  --nav-pill: var(--accent-fill);
  --nav-pill-text: var(--on-accent);
  --accent-plate: #121016;
  --on-plate: #FFFFFF;
  --hero-scrim: linear-gradient(to top, rgba(10,8,16,.75), rgba(10,8,16,0) 60%);
  --scrim: rgba(0, 0, 0, .6);
  --ok: #4CC985;
  --danger: #FF8F88;
  --on-danger: #121016;
  color-scheme: dark;
}

/* In Soft dark the accent is lightened, so a solid accent's fill follows it.
   Gradient accents keep their own fill. */
[data-look="soft"][data-theme="dark"][data-accent-kind="solid"] { --accent-fill: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  [data-look] { --dur-press: 0ms; --dur-pill: 0ms; --dur-sheet: 0ms; --dur-check: 0ms; }
}