/*
 * Design tokens of Watchtower's web pages: the closed palette of the dashboard redesign «A2 · Redonda»
 * (decision 97, research/15-sistema-de-diseno.md), built on decision 95 (research/14-diseno-ui.md).
 * The ONLY place where colours, radii, spacing, type and sizes are defined: application.css, components.css
 * and layout.css consume them through var(--…), and spec/requests/ui_tokens_spec.rb fails if a hex shows up
 * in any other stylesheet. Every colour has a light and a dark value; research/scripts/contraste.py
 * measures every text/background pair against WCAG AA (0 failures in both themes).
 * The landing (web/public/styles.css) mirrors the shared hex (bg, surface, text, text-2, muted, border,
 * verified, denied) under its own names; the dashboard-only tokens (surface-2, seg-active, navigation, placeholder,
 * focus) live only here.
 */

/* Geist and Geist Mono, self-hosted (SIL OFL 1.1, fonts/Geist-LICENSE.txt): /v/ calls no third-party CDN. */
@font-face {
  font-family: "Geist";
  src: url("/assets/Geist-Variable-b11a6485.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/GeistMono-Variable-6dd1dc09.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Colour · neutrals: the landing's navy ink on mist. */
  --bg: #eef2f6;             /* page */
  --surface: #ffffff;        /* cards, sidebar, drawer, inputs */
  --surface-2: #f3f6f9;      /* inset areas: segmented track, KPI icon, org block, neutral badge, kbd */
  --seg-active: #ffffff;     /* the active option of a segmented control: raised above its track (102.4) */
  --row-hover: #f6f9fb;      /* table row under the pointer */
  --code-bg: #eef2f6;        /* <code> */
  --text: #0c1b33;
  --text-2: #3a4a63;         /* secondary text, labels */
  --muted: #5f6d82;          /* captions, meta, placeholders of inputs */
  --border: #d9e0e8;         /* decorative separators (no contrast requirement) */
  --control-border: #b4bfcc; /* input/select/secondary button edge: light, below 1.4.11's 3:1 by the founder's choice (102.7) */

  /* Colour · brand and actions: the ink itself is the brand. */
  --accent: #0c1b33;         /* primary button, brand mark, avatar */
  --accent-hover: #22324d;
  --accent-ink: #ffffff;     /* text on --accent */
  --link: #0c1b33;          /* links: the ink itself, never underlined; weight tells them apart (98.2) */
  --link-hover: #2c5c94;    /* a link under the pointer */
  --focus: #2c5c94;          /* focus ring only (distinct from the ink of the primary button) */

  /* Colour · states (status badges, alerts, progress steps). */
  --verified: #3d7565;
  --verified-bg: #e9f2ee;
  --denied: #b42318;
  --denied-bg: #fdecea;
  --pending: #876620;
  --pending-bg: #f7f0de;

  /* Colour · navigation (sidebar). */
  --nav-ink: #3a4a63;
  --nav-hover: #f1f5f9;
  --nav-active-bg: #e6edf5;
  --nav-active-ink: #0c1b33;

  /* Colour · the app's icon and Inicio's navy panel «E · Icono» (decision 108): the navy of the iOS icon
     (public/icon.svg) behind the login's icon and, below 760 px, behind Inicio's top bar, title and KPI tiles. */
  --hero: #0d1626;           /* the icon, the panel */
  --hero-tile: #182740;      /* a KPI tile and the menu button on the panel */
  --hero-ink: #ffffff;       /* text and the mark on --hero and --hero-tile */
  --hero-muted: #93a2b7;     /* a KPI's label on its tile */
  --hero-focus: #8fb6e8;     /* focus ring on the panel */
  --seal: #3d7565;           /* the mark's seal on the navy: the icon's green, the same in both themes */

  /* Colour · placeholder («Próximamente»). */
  --ph-bg: #f6f9fb;          /* edge: --border, solid (98.3) */

  /* Colour · misc. */
  --qr-bg: #ffffff;          /* the QR stays dark on white in both themes, so any camera reads it */
  --scrim: rgba(12, 27, 51, .28);
  --shadow: 0 1px 2px rgba(12, 27, 51, .04);
  --shadow-raised: 0 1px 2px rgba(12, 27, 51, .08);
  --shadow-drawer: 0 24px 64px rgba(12, 27, 51, .28);
  --shadow-sheet: 0 -12px 40px rgba(12, 27, 51, .18); /* the app's sheets (119), rising from the bottom */
  --shadow-icon: 0 12px 32px rgba(13, 22, 38, .22); /* the app's icon (108) */

  /* Radius (A2, revised 2026-09-28): nearly square corners — the rounding shows, but subtly. */
  --radius-xs: 2px;     /* code, kbd */
  --radius-sm: 4px;     /* buttons, inputs, selects, search, nav items, segmented */
  --radius-md: 4px;     /* alerts, placeholders, steps, video, QR, frames */
  --radius-lg: 6px;     /* cards, KPI cards, tables, drawer */
  --radius-pill: 999px; /* only badges/counters and dots — never containers, inputs or buttons */
  /* 108 («E · Icono»): only the login, the app's screen /app (111) and Inicio's navy panel below 760 px. */
  --radius-tile: 6px;   /* a KPI tile on the panel, the login's inputs and button, /app's list and logout (111), Inicio's bottom «Nuevo enlace» */
  --radius-hero: 8px;   /* the panel's bottom corners, the login's lema panel */
  --radius-icon: 30px;  /* the app's icon (128 px), iOS's proportion */

  /* Spacing: 4px scale. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Type. */
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-xs: 12px;          /* labels, captions, table headers, deltas */
  --font-sm: 13px;          /* tables, buttons, badges */
  --font-ui: 14px;          /* dashboard body */
  --font-card-title: 15px;  /* card header h2 */
  --font-body: 16px;        /* reading pages (/v/, login) and inputs on touch */
  --font-small: 14px;
  --font-h2: 20px;
  --font-page-title: 22px;  /* dashboard page h1 */
  --font-kpi: 26px;
  --font-hero: 30px;        /* the login's «Watchtower» and Inicio's title on the panel (108) */
  --font-lg: 17px;          /* the login's inputs and button, /app's logout (111), Inicio's bottom button (108) */
  --font-h1: clamp(28px, 5vw, 40px); /* public pages' h1 */
  --line-body: 1.55;
  --line-ui: 1.5;

  /* Sizes. */
  --shell-width: 60rem;     /* public pages' column */
  --shell-narrow: 36rem;    /* login, password, denied */
  --sidebar-collapsed-width: 68px; /* the sidebar folded to its icons (.app.is-collapsed) */
  --sidebar-width: 248px;    /* room for «Plantillas de pasos» + «pronto» without an ellipsis (98.4) */
  --content-width: 1200px;  /* dashboard main column */
  --drawer-width: 380px;
  --btn-h: 36px;
  --btn-h-sm: 28px;
  --control-h: 38px;
  --control-h-lg: 52px;     /* the login's inputs (108) */
  --btn-h-lg: 56px;         /* the login's «Entrar», /app's «Cerrar sesión» (111), Inicio's bottom «Nuevo enlace» (108) */
  --tap: 44px;              /* minimum touch target on touch screens (and checkbox labels everywhere) */
  --focus-ring: 2px;
  --focus-offset: 2px;
}

/* Touch screens: every control is at least 44 px tall (decision 95; Apple HIG). */
@media (pointer: coarse) {
  :root {
    --btn-h: 44px;
    --btn-h-sm: 44px;
    --control-h: 44px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1626;
    --surface: #182740;
    --surface-2: #1f3050;
    --seg-active: #2d4268;   /* lighter than the track, as in light: --surface would sink it (102.4) */
    --row-hover: #1d2d4a;
    --code-bg: #131f33;
    --text: #e9eef5;
    --text-2: #c2ccda;
    --muted: #93a2b7;
    --border: #2a3a55;
    --control-border: #3c4b5f;
    --accent: #e9eef5;
    --accent-hover: #c2ccda;
    --accent-ink: #0d1626;
    --link: #e9eef5;
    --link-hover: #8fb6e8;
    --focus: #8fb6e8;
    --verified: #8cc3b1;
    --verified-bg: #1b2f2a;
    --denied: #f59e97;
    --denied-bg: #3b1e22;
    --pending: #d9b56a;
    --pending-bg: #322a17;
    --nav-ink: #c2ccda;
    --nav-hover: #1f3050;
    --nav-active-bg: #2a3f63;
    --nav-active-ink: #e9eef5;
    --ph-bg: #14223a;
    --hero: #131f33;         /* a step above the page (--bg), so the panel's rounded bottom still shows */
    --hero-tile: #1f3050;
    --hero-ink: #e9eef5;
    --hero-muted: #a9b6c8;
    --hero-focus: #8fb6e8;
    --seal: #3d7565;
    --qr-bg: #ffffff;
    --scrim: rgba(0, 0, 0, .5);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-raised: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-drawer: 0 24px 64px rgba(0, 0, 0, .6);
    --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, .5);
    --shadow-icon: 0 12px 32px rgba(0, 0, 0, .5);
  }
}