/* URLflows family design tokens.

   One set of colours, type, spacing and shapes for every URLflows app, extension, dashboard and
   the website. The values come from Next Up Local Kiosk (urlflows-next-up/src/next_up.src.html),
   which is the styling baseline, with #84ffff as the family accent.

   This file is the source of truth. Other repos hold copies written by design-system/sync.mjs:
   edit here, then run the sync. Never edit a copy.

   Dark is the default. A page gets the light companion with data-theme="light" on <html>.
   Load this file before a project's own stylesheet so the project can override what it must. */

/* ── Colour: dark (the default) ───────────────────────────────────── */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #000000;            /* the page */
  --color-surface: #0b0b0c;       /* cards, dialogs, menus */
  --color-surface-2: #1a1a1c;     /* inner tiles, hover fills, badges, tracks */
  --color-footer: #000000;
  --color-text: #ededed;
  --color-muted: #a1a1a6;         /* secondary text: 8.2:1 on the page, 6.8:1 on surface-2 */
  --color-border: #2a2a2e;        /* card edges and dividers */
  --color-accent: #84ffff;        /* icons, active marks, progress: 17.7:1 on the page */
  --color-link: #84ffff;
  --color-primary: #84ffff;       /* the main button, and the border of whatever is selected */
  --color-primary-hover: #74e0e0;
  --color-on-primary: #000000;    /* text on an accent fill is always black: white is 1.2:1 */
  --color-input-border: #8e8e93;  /* field edges need 3:1, so they are lighter than card edges */
  --color-danger-text: #fca5a5;
  --color-backdrop: rgba(0, 0, 0, .75);
  --status-ok: #4ade80;
  --status-warn: #fbbf24;
  --status-error: #f87171;
}

/* ── Colour: light companion ──────────────────────────────────────── */
/* #84ffff is 1.2:1 on white, so light surfaces use the deeper brand cyan instead. */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f3f4f6;
  --color-footer: #fafafa;
  --color-text: #1a1a1a;
  --color-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-accent: #2498b5;        /* 3.4:1 on white: icons and large marks only */
  --color-link: #1c7a94;          /* 4.9:1 on white: text links */
  --color-primary: #1a1a1a;
  --color-primary-hover: #333333;
  --color-on-primary: #ffffff;
  --color-input-border: #6b7280;
  --color-danger-text: #b91c1c;
  --color-backdrop: rgba(15, 20, 26, .55);
  --status-ok: #15803d;
  --status-warn: #b45309;
  --status-error: #b91c1c;
}

:root {
  /* A wash of the accent for selected rows and soft highlights. It follows --color-accent. */
  --color-accent-tint: color-mix(in srgb, var(--color-accent) 14%, transparent);

  /* Alert fills are bright in both themes and always carry dark ink. */
  --alert-green: #8fbf9f;
  --alert-yellow: #d6b566;
  --alert-red: #d98a82;
  --alert-ink: #111827;

  /* ── Type ───────────────────────────────────────────────────────── */
  /* Satoshi ships with each project (fonts/satoshi.css). Never load it from a CDN in an extension. */
  --font-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;         /* drawn with the 700 face: Satoshi is bundled at 400, 500 and 700 */
  --weight-bold: 700;
  --leading: 1.6;
  --leading-tight: 1.15;
  --tracking-tight: -0.02em;      /* headings and big numbers */
  --tracking-caps: .06em;         /* small uppercase labels */
  --text-2xs: .7rem;              /* badges */
  --text-xs: .8rem;               /* small buttons, meta */
  --text-sm: .9rem;               /* buttons, labels, secondary text */
  --text-md: 1rem;                /* body */
  --text-lg: 1.1rem;              /* card titles */
  --text-xl: 1.25rem;             /* dialog titles */
  --text-2xl: clamp(1.6rem, 4vw, 2.25rem); /* page headings */

  /* ── Spacing ────────────────────────────────────────────────────── */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;              /* card padding */
  --space-8: 2rem;

  /* ── Shape ──────────────────────────────────────────────────────── */
  --radius: 999px;                /* anything you press: buttons, toggles, chips, pills */
  --radius-card: 12px;            /* anything that holds content: cards, dialogs, menus */
  --radius-field: 10px;           /* inputs, selects, inner tiles */
  --radius-tag: 4px;              /* badges, code */
  --border-w: 1.5px;              /* cards, buttons, fields. Dividers stay 1px. */
  --control-h: 38px;              /* buttons and icon buttons; 44px on touch screens */
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, .06);
  --shadow-menu: 0 12px 32px rgba(0, 0, 0, .35);
  --focus-ring: 2px solid var(--color-link);
  --ease: .2s;
}