/* ==========================================================================
   ILIAS Downloader - design tokens, "Pocket" (blue)            (DESIGN LANGUAGE)
   --------------------------------------------------------------------------
   One token set for app (public/style.css), site (site/style.css) and admin
   (stats-service/admin/style.css). App copy of docs/tokens.css (keep in sync;
   the only app-local addition is --paper). Migration: docs/DESIGN.md section 5. Dark is the default; light is
   :root[data-theme='light'] (same switch the app already uses). Surfaces that
   follow the OS instead of an attribute can add the @media block at the end.

   Semantic names are stable. Each token keeps its "was:" comment naming the
   existing variable / literal it replaces; "indigo-era value" is what the same
   token held in the previous (indigo) proposal, kept for the mapping.
   Values are the Pocket identity in blue: cerulean accent (hue ~200), ice-tinted
   neutrals (hue ~207), round radii, 13px system type. Source of the identity:
   docs/identity/direction-c-blue.html. Contrast is verified for every text/UI
   pair in both themes (table in docs/DESIGN.md section 2).

   Selected vs focus vs info: selected = --accent-soft fill + accent icon;
   focus = --ring-focus (2px accent ring, --bg gap); info has no hue of its own
   (neutral surface, --text-2 icon). Blue = interactive / chosen / active.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------------------------------------------------------- Surfaces -- */
  --bg: #08151f; /* was app --bg, site --bg; indigo-era #0b0d12 */
  --surface: #0d1d2b; /* was app --bg-1, site --bg-raised. Titlebar, tray, modal, sidebar; indigo-era #10131a */
  --surface-2: #132736; /* was app --bg-2, site --bg-raised-2. Inputs, menus, row hover; indigo-era #161a23 */
  --surface-3: #1b3246; /* was app --bg-3. Resting control fill, chips, track; indigo-era #1d2230 */
  --hover: #254259; /* was app --btn-hover-bg. Hover on --surface-3 controls; indigo-era #242a3a */
  --border: #264057; /* was app --border, site --border; indigo-era #232838 */
  --border-subtle: #173043; /* was app --border-soft, site --border-soft. Dividers; indigo-era #1b202c */
  --scrollbar-thumb-hover: #355670; /* was app --scrollbar-hover-bg; indigo-era #2c3344 */
  --overlay: rgba(3, 11, 19, 0.66); /* was app .modal background literal; indigo-era rgba(6, 8, 12, 0.6) */

  /* -------------------------------------------------------------- Text -- */
  --text: #eaf4fb; /* was app/site --text; indigo-era #e8ecf3 */
  --text-2: #b4c9da; /* was app/site --text-dim, admin --text-2 (names unified); indigo-era #aab2c2 */
  --text-3: #8ea8bd; /* was app/site --muted (passes AA on all surfaces); indigo-era #828ba0 */

  /* ------------------------------------------------------------ Accent -- */
  --accent: #4fb9f2; /* was app/site --accent; indigo-era #6f8bff */
  --accent-hover: #6ac6f7; /* was app/site --accent-strong; indigo-era #5a78ff */
  --accent-soft: rgba(79, 185, 242, 0.15); /* was app --accent-soft; indigo-era rgba(111, 139, 255, 0.14) */
  --accent-text: #4fb9f2; /* NEW (D5): accent as small text / links. Equals --accent in dark */
  --on-accent: #03202f; /* was app literal #0a0d16 (x3) and site #050608 -> one value; indigo-era #0a0d16 */

  /* ------------------------------------------------- Status (semantic) -- */
  --success: #7fd68a; /* was app/site --green; indigo-era #4ade80 */
  --success-soft: rgba(127, 214, 138, 0.14); /* was app --green-soft; indigo-era rgba(74, 222, 128, 0.14) */
  --success-text: #7fd68a; /* NEW (D5): small text on its own tint. Equals --success in dark */
  --warning: #f2c04e; /* was app/site --amber; indigo-era #fbbf24 */
  --warning-soft: rgba(242, 192, 78, 0.14); /* was app --amber-soft; indigo-era rgba(251, 191, 36, 0.14) */
  --warning-text: #f2c04e; /* NEW (D5) */
  --danger: #ff6b78; /* was app/site --rose, admin --critical (#e66767 dark); indigo-era #fb7185 */
  --danger-soft: rgba(255, 107, 120, 0.14); /* was app --rose-soft; indigo-era rgba(251, 113, 133, 0.14) */
  --danger-text: #ff6b78; /* NEW (D5) */
  --danger-hover: #ff5463; /* was app --rose-strong; indigo-era #fa5c74 */
  --on-danger: #2c0a0f; /* was app literal #2a0d12 (.btn-danger); indigo-era #2a0d12 */

  /* ---------------------------------------- File sync states (product) --
     Aliases only: a state never owns a colour, it points at a status.
     Decision D1 in DESIGN.md: "missing" is neutral in the app (.state-badge--
     missing) but rose on the site (.state-dot--missing). RESOLVED (D1): neutral. */
  --state-missing: var(--text-2); /* was app .state-badge--missing fg; site used --rose */
  --state-missing-bg: var(--surface-3); /* was app --bg-3 */
  --state-downloaded: var(--success-text); /* was app/site green (text variant so it passes AA in light) */
  --state-downloaded-bg: var(--success-soft);
  --state-outdated: var(--warning-text); /* was app/site amber (also "partial") */
  --state-outdated-bg: var(--warning-soft);
  --state-ignored: var(--text-3); /* was app .state-badge--ignored (+ opacity .75; drop the opacity) */
  --state-ignored-bg: var(--surface-3);
  --state-pending: var(--text-3); /* was app .state-badge--pending */
  --state-pending-bg: var(--surface-3);
  --state-dot-downloaded: var(--success); /* NEW: 10px dots / site legend are fills, not text */
  --state-dot-outdated: var(--warning);

  /* -------------------------------------------------------- Data / charts */
  --chart-1: var(--accent); /* was admin --series-1 (#2a78d6/#3987e5) */
  --chart-grid: var(--border-subtle); /* was admin --grid */

  /* App-local: a PDF page is paper in both themes. */
  --paper: #ffffff;

  /* ------------------------------------------------------------- Brand -- */
  --brand-1: #1479c2; /* tile. was build/icon.svg gradient stop 0 (#7d93ff). Flat: no gradient (D8) */
  --brand-2: #f2faff; /* glyph (folder + sheet). was gradient stop .55 (#5a78ff) */
  --brand-3: #0a3556; /* detail (text lines on the sheet). was gradient stop 1 (#3a52d6) */

  /* -------------------------------------------------------- Typography -- */
  --font-ui:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, system-ui, sans-serif; /* was app --font; admin used a shorter copy */
  --font-display: var(
    --font-ui
  ); /* was site --font 'Instrument Sans' + Plex Mono. RESOLVED (D2): system stack, no third-party requests */
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* was site --font-mono (Plex Mono) / app+admin literal */

  --fs-xs: 11px; /* was 10.5, 11, 11.5 (14 uses): badges, captions, version */
  --fs-sm: 12px; /* was 12, 12.5 (23 uses): secondary, status bar, small btn */
  --fs-md: 13px; /* was 13, 13.5 (18 uses): base UI text, buttons, inputs. CHANGED: body 13.5 -> 13 */
  --fs-lg: 14px; /* was 14, 14.5, 15: large button, section titles, admin body */
  --fs-xl: 17px; /* was 17, 19: modal title, h1 admin, site card h3 */
  --fs-2xl: 22px; /* was 23: empty/login title */
  --fs-3xl: 28px; /* was admin tile value 28 */
  --fs-display: clamp(34px, 5.4vw, 54px); /* was site h1 clamp. Site only */
  --fs-prose: 17px; /* was site body 17px. Marketing prose only */

  --fw-regular: 400;
  --fw-medium: 500; /* was 500, 530, 550 */
  --fw-semibold: 600; /* was 600, 650 */
  --fw-bold: 700;

  --lh-tight: 1.2; /* headings; site h1 was 1.12 */
  --lh-ui: 1.4; /* UI text; admin was 1.45, app inherits "normal" */
  --lh-prose: 1.6; /* was site 1.6, app help 1.55 */

  --tracking-tight: -0.01em; /* was site/app headings */

  /* ----------------------------------------------------------- Spacing -- */
  /* 4px base. Existing 31 distinct app values snap to this ramp. */
  --space-0: 2px;
  --space-1: 4px;
  --space-2: 6px; /* was 5, 6, 7 */
  --space-3: 8px; /* was 8, 9 */
  --space-4: 10px; /* was 10, 11 */
  --space-5: 12px; /* was 12, 14 */
  --space-6: 16px; /* was 16, 18 */
  --space-7: 20px; /* was 20, 22 */
  --space-8: 24px; /* was 24, 26, 28 */
  --space-9: 32px; /* was 32, 36 */
  --space-10: 40px; /* was 40, 44 */
  --space-11: 48px; /* was 48, 56 */
  --space-12: 64px; /* was 64 and up (site sections only) */

  /* ------------------------------------------------------------ Radius -- */
  --radius-xs: 6px; /* was 3, 4, 5: checkbox, code, tiny bars; indigo-era 4px */
  --radius-sm: 8px; /* was 6, 7: menu items, small buttons, code chips; indigo-era 6px */
  --radius-md: 12px; /* was app --radius-sm (8) + 9 (8 uses) + 10: buttons, inputs, rows, menus; indigo-era 8px */
  --radius-lg: 16px; /* was app/site --radius (12), admin card 10: cards, site window; indigo-era 12px */
  --radius-xl: 24px; /* was 16, 18, 20, 22: modals, large panels; indigo-era 16px */
  --radius-pill: 999px; /* was 999, 20, 9 on 18px-high badges */
  /* 50% stays literal for dots/spinners. */

  /* ------------------------------------------------------------ Shadow -- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); /* new: resting raised element (none today); indigo-era 0 1px 2px rgba(0, 0, 0, 0.3) */
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.4); /* was app --shadow-soft. Menus, popovers; indigo-era 0 4px 16px rgba(0, 0, 0, 0.35) */
  --shadow-3: 0 22px 56px -14px rgba(0, 0, 0, 0.65); /* was app --shadow. Modals; site used 24/60/-20; indigo-era 0 18px 50px -12px rgba(0, 0, 0, 0.6) */
  --ring-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); /* was outline 2px accent + 2px offset */
  --ring-status: 3px; /* was status-dot halo spread (box-shadow 0 0 0 3px <state>-soft) */

  /* ------------------------------------------------------------ Motion -- */
  --dur-fast: 100ms; /* was 0.06, 0.1, 0.12: hover fills, press */
  --dur: 150ms; /* was 0.14, 0.15, 0.16, 0.18: most transitions */
  --dur-slow: 220ms; /* new: panels, tray. Nothing currently longer than 0.18s except spin/pulse */
  --ease: cubic-bezier(0.2, 0, 0, 1); /* was mix of default ease / ease-out / linear */
  --dur-spin: 800ms; /* was spin 0.8s linear */

  /* ----------------------------------------------------------- Density -- */
  --control-h-sm: 26px; /* was .btn-sm computed ~26 */
  --control-h: 32px; /* was .icon-btn 32, .btn ~33 */
  --control-h-lg: 40px; /* was .btn-lg ~40 */
  --row-h: 32px; /* was .row 7px padding + 18px icon */
  --titlebar-h: 52px; /* was .titlebar height */
  --statusbar-h: 38px; /* was .statusbar height */
  --icon: 18px; /* was .ic; sm 15, xl 44 */
  --icon-stroke: 2; /* was .ic stroke-width (empty states use 1.5) */

  /* ----------------------------------------------------------- Z-index -- */
  --z-sticky: 5; /* was 5 */
  --z-modal: 50; /* was 50 */
  --z-menu: 1000; /* was 1000 (context menu, popovers) */
}

/* ==========================================================================
   Light theme. Same selector the app already writes before first paint.
   ========================================================================== */
:root[data-theme='light'] {
  color-scheme: light;

  --bg: #eff7fc; /* was app --bg; indigo-era #f6f7fb */
  --surface: #fbfdff; /* was app --bg-1; indigo-era #ffffff */
  --surface-2: #e5f0f8; /* was app --bg-2; indigo-era #eef0f6 */
  --surface-3: #d6e7f3; /* was app --bg-3 (equals old --border-soft); indigo-era #e3e6ee */
  --hover: #c2daec; /* was app --btn-hover-bg; indigo-era #d5d9e4 */
  --border: #c9dded; /* was app --border; indigo-era #d7dbe6 */
  --border-subtle: #deecf6; /* was app --border-soft; indigo-era #e3e6ee */
  --scrollbar-thumb-hover: #a9c6dc; /* was app --scrollbar-hover-bg; indigo-era #c7ccd9 */
  --overlay: rgba(8, 28, 44, 0.42); /* CHANGED: dark scrim was reused on light; indigo-era rgba(20, 26, 44, 0.4) */

  --text: #0a2133; /* indigo-era #1a1e2b */
  --text-2: #37526a; /* indigo-era #4c5468 */
  --text-3: #4e667b; /* was #6b7385 -> #626a7d; AA on --bg, --surface, --surface-2, --surface-3 */

  --accent: #0b72b5; /* indigo-era #4a5fd6 */
  --accent-hover: #085d94; /* indigo-era #3b4ec2 */
  --accent-soft: rgba(11, 114, 181, 0.12); /* indigo-era rgba(74, 95, 214, 0.12) */
  --accent-text: #075c93; /* NEW (D5): accent as small text / links (fills use --accent) */
  --on-accent: #ffffff; /* was #0a0d16 (3.60:1 on old light accent); 5.14:1 on the cerulean accent */

  --success: #3f9444; /* fill / dot / progress. was #16a34a; indigo-era #166534 was the text colour, now --success-text */
  --success-soft: rgba(63, 148, 68, 0.13); /* indigo-era rgba(22, 163, 74, 0.12) */
  --success-text: #25622b; /* NEW (D5): small text. --success stays the fill / dot hue */
  --warning: #c28200; /* fill / dot. was #b45309; indigo-era #92400e is now --warning-text */
  --warning-soft: rgba(194, 130, 0, 0.13); /* indigo-era rgba(180, 83, 9, 0.12) */
  --warning-text: #7a4f00; /* NEW (D5) */
  --danger: #d1313f; /* fill / dot / border. was #e11d48; indigo-era #be123c is now --danger-text */
  --danger-soft: rgba(209, 49, 63, 0.1); /* indigo-era rgba(225, 29, 72, 0.1) */
  --danger-text: #b01e2d; /* NEW (D5) */
  --danger-hover: #8f1523; /* was --rose-strong #b91c3c; indigo-era #9f1239 */
  --on-danger: #ffffff; /* new in light (dark literal is dark ink) */

  /* States keep the aliases from :root; only the status colours move. */

  --shadow-1: 0 1px 2px rgba(10, 50, 80, 0.08); /* indigo-era 0 1px 2px rgba(30, 41, 71, 0.08) */
  --shadow-2: 0 6px 18px rgba(10, 50, 80, 0.12); /* was app --shadow-soft light; indigo-era 0 4px 14px rgba(30, 41, 71, 0.1) */
  --shadow-3: 0 22px 44px -16px rgba(10, 50, 80, 0.28); /* was app --shadow light; indigo-era 0 18px 40px -14px rgba(30, 41, 71, 0.22) */
  --ring-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* --brand-1..3 are theme-independent (like the app icon): not overridden here. */
}

/* Surfaces without an attribute switch (site, admin) can follow the OS by
   duplicating the light block here under:
   @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { ... } }
   Do not hand-copy values: generate the block from the one above if/when a
   build step exists, or add the attribute in a tiny theme-init script. */