/* GENERATED from design/tokens/, do not hand-edit. Source: /Users/rodhdanan/Documents/screencrowd/design/tokens (primitives.css, semantic.css, scales.css). Regenerate with design/sync.sh. */

/*
  ScreenCrowd design tokens -- LAYER 1: primitives.

  Raw scales only. Every value here is a literal color that already exists
  somewhere in the app or the landing page today -- nothing invented, nothing
  guessed. Numeric steps run light-to-dark within a family; 100 is the
  canonical/darkest (or most saturated) rung.

  Nothing outside tokens/semantic.css may reference these variables. If you
  find yourself reaching for --sc-ink-70 in a component file, that's the
  "primitive leak" smell described in DS.md -- add or reuse a semantic token
  instead.
*/

:root {
  /* ---- yellow (the one brand accent, both surfaces, both themes) ---- */
  --sc-yellow-100: #FFCE1B;                    /* canonical accent */
  --sc-yellow-dim: #F2C400;                     /* pressed/hover state */
  --sc-yellow-80: rgba(255, 206, 27, 0.8);
  --sc-yellow-60: rgba(255, 206, 27, 0.6);
  --sc-yellow-40: rgba(255, 206, 27, 0.4);
  --sc-yellow-20: rgba(255, 206, 27, 0.2);
  --sc-yellow-10: rgba(255, 206, 27, 0.1);

  /* ---- ink (near-black family: light-mode text, dark-mode surfaces) ---- */
  --sc-ink-100: #101012;                        /* darkest: dark-mode page bg */
  --sc-ink-97:  #131210;                        /* light-mode ink/text; landing's invariant-dark surface */
  --sc-ink-93:  #171204;                        /* text-on-yellow, both themes */
  --sc-ink-90:  #19191B;                        /* dark-mode card/raised surface */
  --sc-ink-85:  #222223;                        /* dark-mode chip/sunken surface */
  --sc-ink-60:  #4A473F;                         /* light-mode muted text */
  --sc-ink-45:  #83806F;                         /* light-mode faint text (poster fallback) */
  --sc-ink-40:  #8C8879;                         /* dark-mode faint text (poster fallback) */
  --sc-ink-30:  #C7C3B4;                         /* dark-mode muted text */
  --sc-ink-15:  #ECEAE4;                         /* light-mode chip/sunken surface */
  --sc-ink-05:  #F5F2E8;                         /* lightest: dark-mode ink/text */

  /* ---- paper (near-white family, light-mode surfaces) ---- */
  --sc-paper-100: #FFFFFF;                      /* light-mode raised surface (card) */
  --sc-paper-98:  #FAF8F1;                       /* light-mode page bg */
  --sc-paper-95:  #F5F2E8;                       /* same literal as --sc-ink-05; kept under both names on purpose */

  /* ---- green (status: good / caught up) ---- */
  --sc-green-100: #2E8F55;                      /* light theme */
  --sc-green-70:  #5FBF7A;                       /* dark theme */
  --sc-green-ink-light: #FFFFFF;
  --sc-green-ink-dark:  #0E1712;

  /* ---- red (status: danger / remove) ---- */
  --sc-red-100: #C0432F;                        /* light theme */
  --sc-red-70:  #E8785F;                         /* dark theme */
}

/*
  ScreenCrowd design tokens -- LAYER 2: semantic.

  Role aliases on top of tokens/primitives.css. Naming is fixed to
  --sc-{group}-{role} across six groups: surface, text, border, ixn
  (interaction), accent, status. Components consume ONLY these (or the
  scale tokens in tokens/scales.css) -- never a primitive directly.

  Theme mechanism lives HERE, and only here:
    1. :root            -- light values (the default)
    2. @media (prefers-color-scheme: dark) -- dark override
    3. [data-theme="dark"] / [data-theme="light"] -- explicit user override,
       wins over both of the above.
  Components never re-declare theme values; they just reference the group
  token and the cascade handles the rest.

  Below the new --sc-* tokens is a DEPRECATED ALIASES block: the exact
  variable names the app's inline styles and the landing's styles.css already
  use. They're kept, pinned to the same tokens, so neither stylesheet had to
  be rewritten to adopt this file. New work should reach for --sc-* names;
  the legacy names are here so nothing regresses. See DS.md for the
  deprecation policy.
*/

:root {
  color-scheme: light dark;

  /* surface */
  --sc-surface-primary: var(--sc-paper-98);     /* page background */
  --sc-surface-raised:  var(--sc-paper-100);    /* cards, rows, sheets */
  --sc-surface-sunken:  var(--sc-ink-15);        /* chips, poster fallback, progress track */
  --sc-surface-inverse: var(--sc-ink-97);        /* always-dark banner surface; NOT re-declared in
                                                    any theme block below on purpose, it never flips */

  /* text */
  --sc-text-primary:    var(--sc-ink-97);
  --sc-text-secondary:  var(--sc-ink-60);
  --sc-text-faint:      var(--sc-ink-45);
  --sc-text-on-accent:  var(--sc-ink-93);
  --sc-text-on-inverse: var(--sc-ink-05);        /* also not re-declared below; pairs with surface-inverse */

  /* border */
  --sc-border-subtle:   rgba(19, 18, 16, 0.14);
  --sc-border-strong:   rgba(19, 18, 16, 0.28);
  --sc-border-chart:    rgba(19, 18, 16, 0.08);  /* profile chart gridlines */

  /* ixn (interaction) */
  --sc-ixn-hover:       var(--sc-yellow-100);
  --sc-ixn-focus-ring:  var(--sc-yellow-100);
  --sc-ixn-pressed:     var(--sc-yellow-dim);

  /* accent */
  --sc-accent-default:  var(--sc-yellow-100);
  --sc-accent-hover:    var(--sc-yellow-dim);
  --sc-accent-ink:      var(--sc-text-on-accent);

  /* status */
  --sc-status-good:      var(--sc-green-100);
  --sc-status-good-ink:  var(--sc-green-ink-light);
  --sc-status-danger:    var(--sc-red-100);
  --sc-status-soon:      var(--sc-accent-default);  /* "returning soon" chip reuses the accent */

  /* ---- effects: not one of the six fixed groups, kept literal on purpose
     (see DS.md deprecated-alias policy) ---- */
  --sc-shadow-raised: 0 1px 2px rgba(40, 36, 20, 0.06), 0 4px 12px rgba(40, 36, 20, 0.06);
  --sc-scrim: rgba(19, 18, 16, 0.42);
  --sc-shadow-rgb: 40, 36, 20;                       /* bare triplet, for rgba(var(--sc-shadow-rgb), a) */
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --sc-surface-primary: var(--sc-ink-100);
    --sc-surface-raised:  var(--sc-ink-90);
    --sc-surface-sunken:  var(--sc-ink-85);

    --sc-text-primary:    var(--sc-ink-05);
    --sc-text-secondary:  var(--sc-ink-30);
    --sc-text-faint:      var(--sc-ink-40);

    --sc-border-subtle:   rgba(245, 242, 232, 0.14);
    --sc-border-strong:   rgba(245, 242, 232, 0.26);
    --sc-border-chart:    rgba(245, 242, 232, 0.08);

    --sc-accent-ink:      var(--sc-yellow-100);       /* accent-tinted chip fg swaps to the yellow itself in dark */

    --sc-status-good:     var(--sc-green-70);
    --sc-status-good-ink: var(--sc-green-ink-dark);
    --sc-status-danger:   var(--sc-red-70);

    --sc-shadow-raised: none;
    --sc-scrim: rgba(0, 0, 0, 0.6);
    --sc-shadow-rgb: 0, 0, 0;
  }
}

[data-theme="dark"] {
  color-scheme: dark;

  --sc-surface-primary: var(--sc-ink-100);
  --sc-surface-raised:  var(--sc-ink-90);
  --sc-surface-sunken:  var(--sc-ink-85);

  --sc-text-primary:    var(--sc-ink-05);
  --sc-text-secondary:  var(--sc-ink-30);
  --sc-text-faint:      var(--sc-ink-40);

  --sc-border-subtle:   rgba(245, 242, 232, 0.14);
  --sc-border-strong:   rgba(245, 242, 232, 0.26);
  --sc-border-chart:    rgba(245, 242, 232, 0.08);

  --sc-accent-ink:      var(--sc-yellow-100);

  --sc-status-good:     var(--sc-green-70);
  --sc-status-good-ink: var(--sc-green-ink-dark);
  --sc-status-danger:   var(--sc-red-70);

  --sc-shadow-raised: none;
  --sc-scrim: rgba(0, 0, 0, 0.6);
  --sc-shadow-rgb: 0, 0, 0;
}

[data-theme="light"] {
  color-scheme: light;

  --sc-surface-primary: var(--sc-paper-98);
  --sc-surface-raised:  var(--sc-paper-100);
  --sc-surface-sunken:  var(--sc-ink-15);

  --sc-text-primary:    var(--sc-ink-97);
  --sc-text-secondary:  var(--sc-ink-60);
  --sc-text-faint:      var(--sc-ink-45);

  --sc-border-subtle:   rgba(19, 18, 16, 0.14);
  --sc-border-strong:   rgba(19, 18, 16, 0.28);
  /* legacy quirk, kept exactly as the app already shipped it: forcing light
     via data-theme uses a bluer gridline than the prefers-color-scheme
     default above. Not "fixed" here -- faithfully preserved. */
  --sc-border-chart:    rgba(28, 34, 48, 0.08);

  --sc-accent-ink:      var(--sc-text-on-accent);

  --sc-status-good:     var(--sc-green-100);
  --sc-status-good-ink: var(--sc-green-ink-light);
  --sc-status-danger:   var(--sc-red-100);

  --sc-shadow-raised: 0 1px 2px rgba(40, 36, 20, 0.06), 0 4px 12px rgba(40, 36, 20, 0.06);
  --sc-scrim: rgba(19, 18, 16, 0.42);
  --sc-shadow-rgb: 40, 36, 20;
}

/* =========================================================================
   DEPRECATED ALIASES -- legacy names, pinned to the tokens above.
   Do not add new consumers of these; reach for the --sc-* names instead.
   ========================================================================= */

:root {
  /* -- app (tv-tracker/public/index.html) -- */
  --bg: var(--sc-surface-primary);
  --card: var(--sc-surface-raised);
  --ink: var(--sc-text-primary);
  --muted: var(--sc-text-secondary);
  --accent: var(--sc-accent-default);
  --on-accent: var(--sc-text-on-accent);
  --green: var(--sc-status-good);
  --on-green: var(--sc-status-good-ink);
  --red: var(--sc-status-danger);
  --hairline: var(--sc-border-subtle);
  --chip-bg: var(--sc-surface-sunken);
  --chip-fg: var(--sc-text-secondary);
  --chip-accent-fg: #8A6A00;                     /* light-only literal, overridden below for dark */
  --chip-accent-bg: rgba(255, 206, 27, 0.14);    /* identical both themes */
  --chip-accent-border: rgba(255, 206, 27, 0.32);
  --shadow: var(--sc-shadow-raised);
  --scrim: var(--sc-scrim);
  --poster-fallback-bg: var(--sc-surface-sunken);
  --poster-fallback-fg: var(--sc-text-faint);
  --grid-line: var(--sc-border-chart);

  /* -- landing (screencrowd/landing/styles.css + index.html) -- */
  --bg-raised: var(--sc-surface-raised);
  --text: var(--sc-text-primary);
  --text-soft: var(--sc-text-secondary);
  --text-faint: var(--sc-text-faint);
  --border: var(--sc-border-subtle);
  --border-strong: var(--sc-border-strong);
  --accent-ink: var(--sc-accent-ink);
  --accent-hover: var(--sc-accent-hover);
  --danger: var(--sc-status-danger);
  --shadow-color: var(--sc-shadow-rgb);
  --yellow: var(--sc-accent-default);            /* used directly in the landing's inline SVG lockup */
  --success-ink: var(--sc-status-good-ink);       /* defined upstream, unused today; kept for parity */
  --success-bg: #DCEFDD;
}

@media (prefers-color-scheme: dark) {
  :root {
    --chip-accent-fg: var(--sc-accent-default);  /* #FFCE1B in dark, matches legacy exactly */
    --success-bg: #14301C;
  }
}

[data-theme="dark"] {
  --chip-accent-fg: var(--sc-accent-default);
  --chip-accent-border: rgba(255, 206, 27, 0.35); /* legacy dark value differs slightly from light */
  --success-bg: #14301C;
}

[data-theme="light"] {
  --chip-accent-fg: #8A6A00;
  --chip-accent-border: rgba(255, 206, 27, 0.32);
  --success-bg: #DCEFDD;
}

@media (prefers-color-scheme: dark) {
  :root { --chip-accent-border: rgba(255, 206, 27, 0.35); }
}

/*
  ScreenCrowd design tokens -- LAYER 3: scales.

  Spacing, control heights, radius, and type. These don't theme (no
  light/dark variation), they just quantize the app and landing's existing
  spacing/size/type decisions into named steps so future work picks a rung
  instead of typing a raw px value.
*/

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/BricolageGrotesque-Variable.woff2') format('woff2-variations'),
       url('fonts/BricolageGrotesque-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('fonts/SchibstedGrotesk-Variable.woff2') format('woff2-variations'),
       url('fonts/SchibstedGrotesk-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- fonts ---- */
  --sc-font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-body: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- spacing: index tokens on a 4px base, --sc-space-{index}, value = index * 4px ---- */
  --sc-space-01: 4px;
  --sc-space-02: 8px;
  --sc-space-03: 12px;
  --sc-space-04: 16px;
  --sc-space-05: 20px;
  --sc-space-06: 24px;
  --sc-space-07: 28px;
  --sc-space-08: 32px;
  --sc-space-09: 36px;
  --sc-space-10: 40px;
  --sc-space-11: 44px;
  --sc-space-12: 48px;
  --sc-space-16: 64px;
  --sc-space-24: 96px;
  --sc-space-32: 128px;

  /* ---- control heights: sm = compact secondary controls, md = the 44px
     touch floor, lg = headroom for a future oversized control ---- */
  --sc-control-sm: 34px;
  --sc-control-md: 44px;
  --sc-control-lg: 52px;

  /* ---- radius ladder + component-named aliases ---- */
  --sc-radius-sm: 8px;
  --sc-radius-md: 14px;
  --sc-radius-lg: 18px;
  --sc-radius-full: 999px;
  --sc-radius-card: var(--sc-radius-md);
  --sc-radius-button: var(--sc-radius-full);

  /* ---- motion ---- */
  --sc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sc-dur-fast: 120ms;
  --sc-dur-mid: 240ms;
  --sc-dur-slow: 420ms;

  /* ---- layout (landing only today) ---- */
  --sc-content-max: 1180px;
  --sc-nav-height: 68px;

  /* ---- type steps: paired size/leading/tracking per family+size ---- */
  --sc-display-lg-size: 2.75rem;   --sc-display-lg-leading: 1.05; --sc-display-lg-tracking: -0.01em;
  --sc-display-md-size: 1.75rem;   --sc-display-md-leading: 1.15; --sc-display-md-tracking: -0.005em;
  --sc-display-sm-size: 1.3rem;    --sc-display-sm-leading: 1.2;  --sc-display-sm-tracking: 0;
  --sc-body-lg-size: 1rem;         --sc-body-lg-leading: 1.5;     --sc-body-lg-tracking: 0;
  --sc-body-md-size: 0.9rem;       --sc-body-md-leading: 1.4;     --sc-body-md-tracking: 0;
  --sc-body-sm-size: 0.8rem;       --sc-body-sm-leading: 1.4;     --sc-body-sm-tracking: 0;
  --sc-label-sm-size: 0.72rem;     --sc-label-sm-leading: 1.3;    --sc-label-sm-tracking: 0.04em;

  /* ---- deprecated aliases: legacy names from the app + landing ---- */
  --font-display: var(--sc-font-display);
  --font-body: var(--sc-font-body);
  --font-mono: var(--sc-font-mono);
  --radius: var(--sc-radius-md);       /* app */
  --radius-sm: var(--sc-radius-sm);    /* app */
  --radius-sharp: 3px;                 /* landing: sharper than the ladder's sm rung, kept literal */
  --radius-card: 6px;                  /* landing: its own card radius, distinct from the app's --sc-radius-card */
  --radius-pill: var(--sc-radius-full); /* landing */
  --space-1: var(--sc-space-01);       /* landing (rem-based originally, same px values) */
  --space-2: var(--sc-space-02);
  --space-3: var(--sc-space-03);
  --space-4: var(--sc-space-04);
  --space-5: var(--sc-space-06);       /* landing's --space-5 was 1.5rem = 24px = step 06 */
  --space-6: var(--sc-space-08);       /* 2rem = 32px = step 08 */
  --space-7: var(--sc-space-12);       /* 3rem = 48px = step 12 */
  --space-8: var(--sc-space-16);       /* 4rem = 64px = step 16 */
  --space-9: var(--sc-space-24);       /* 6rem = 96px = step 24 */
  --space-10: var(--sc-space-32);      /* 8rem = 128px = step 32 */
  --ease-out: var(--sc-ease-out);
  --dur-fast: var(--sc-dur-fast);
  --dur-mid: var(--sc-dur-mid);
  --dur-slow: var(--sc-dur-slow);
  --content-max: var(--sc-content-max);
  --nav-height: var(--sc-nav-height);
}