/* SiteRadar design tokens — docs/handoff/IMPLEMENTATION.md §1.
 *
 * THE ONLY FILE IN internal/api/static THAT MAY CARRY A LITERAL COLOR, RADIUS,
 * SHADOW OR TYPE ROLE. ui.css, cabinet.css, auth.css and the templates use
 * var(--token) exclusively; a value that is not here does not exist.
 *
 * Loaded first (layout.html), so every later sheet may override a token per
 * component but never invent one. No web fonts: the system stack only. */

:root {
  /* ---- colour ------------------------------------------------------------ */
  --bg: #ffffff;              /* cabinet background */
  --bg-subtle: #fbfbfd;       /* login page, footer, table row hover */
  --surface-2: #f5f5f7;       /* metric cards, input fill */
  --text: #1d1d1f;            /* body text, headings */
  --text-2: #6e6e73;          /* subheadings, descriptions */
  --text-3: #86868b;          /* captions */
  --text-4: #a1a1a8;          /* placeholders only: 2.6:1 on --bg, so no text that
                                 carries meaning may use it (§6, задача D5) */
  --on-accent: #ffffff;       /* text on a solid accent surface */

  --accent: #0a6cf1;
  --accent-hover: #0a58c2;
  --accent-soft: rgba(10, 108, 241, .10);
  --accent-soft-hover: rgba(10, 108, 241, .18);

  --hairline: rgba(0, 0, 0, .08);         /* cards, header, footer borders */
  --hairline-strong: rgba(0, 0, 0, .12);  /* ghost button, search pill (решение №9) */
  --divider: rgba(0, 0, 0, .06);          /* table row separators */
  --fill-2: rgba(0, 0, 0, .045);          /* header credits pill (решение №9) */
  --glass: rgba(255, 255, 255, .72);      /* sticky header behind blur (решение №9) */
  --glass-strong: rgba(255, 255, 255, .82); /* cookie panel behind blur (решение №9) */
  --overlay: rgba(0, 0, 0, .28);          /* modal backdrop (LOADER_AND_MODAL.md B) */

  --ok-text: #177a45;
  --ok-bg: rgba(48, 181, 106, .14);
  --warn-text: #8a5300;
  --warn-bg: rgba(255, 159, 10, .16);
  --dot-live: #30b56a;

  /* Monogram (docs/handoff/03-logo.html, variant 03) and the hero glow. */
  --logo-gradient: linear-gradient(160deg, #3a8bff, #0a58c2);
  --glow: radial-gradient(closest-side, rgba(10, 108, 241, .13), rgba(10, 108, 241, 0));

  /* ---- type -------------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;

  /* 590 is deliberate (SF variable); browsers without it fall back to 600. */
  --fw-med: 590;
  --fw-bold: 600;

  --fs-h1: clamp(40px, 6.4vw, 72px);  /* hero H1 */
  --lh-h1: 1.05;
  --ls-h1: -.035em;
  --fs-h1-auth: 40px;                 /* login H1 */
  --lh-h1-auth: 1.1;
  --fs-h2: 26px;
  --ls-h2: -.028em;
  --fs-lead: 19px;                    /* hero lead */
  --lh-lead: 29px;
  --ls-lead: -.005em;
  --fs-body: 16.5px;
  --lh-body: 25px;            /* paragraph role: prose only */
  --lh-tight: 1.2;            /* compact UI text: pills, buttons, labels, captions,
                                 nav links, table cells — the mock-up's `normal` */
  --lh-heading: 1.15;         /* section heading (h1/h2 of a page without a hero) */
  --ls-base: -.01em;                  /* global letter-spacing */
  --ls-row: -.015em;                  /* audit row site name */
  --ls-tight: -.02em;                 /* brand wordmark */
  --ls-logo: -.03em;                  /* monogram letters */
  --fs-num: 44px;                     /* metric figure */
  --lh-num: 1;
  --ls-num: -.035em;
  --fs-input: 16px;                   /* form input (16px = no iOS zoom) */
  --fs-search: 17px;                  /* search pill input */
  --fs-btn: 16px;                     /* full-width form button */
  --fs-md: 15px;                      /* search pill button */
  --fs-brand: 15.5px;                 /* header wordmark */
  --fs-brand-lg: 19px;                /* auth wordmark */
  --fs-sm: 14px;                      /* stat label, checkbox label */
  --fs-cap: 13px;                     /* field label, footer link, meta */
  --fs-cap-2: 13.5px;                 /* header link, footer description, row date */
  --lh-cap: 20px;
  --lh-cap-2: 21px;
  --fs-pill: 12.5px;                  /* status pill, header meta, copyright */
  --fs-fine: 12px;                    /* auth footer license line */

  /* Modal type roles (LOADER_AND_MODAL.md B). The note reuses --fs-pill (12.5px)
     and the pill inside the dialog reuses --fs-cap (13px). */
  --fs-modal-title: 25px;
  --ls-modal-title: -.03em;
  --fs-modal-text: 15.5px;
  --lh-modal-text: 23px;
  --fs-modal-later: 14.5px;           /* the "Позже" text button */
  --fs-logo-16: 7px;                  /* monogram letters per size */
  --fs-logo-22: 9.5px;
  --fs-logo-30: 13px;
  --fs-logo-52: 20px;

  /* ---- shape ------------------------------------------------------------- */
  --r-card: 20px;       /* metric card, table card, cookie panel */
  --r-auth: 22px;       /* login card */
  --r-input: 14px;      /* text field */
  --r-modal: 26px;      /* modal dialog */
  --r-pill: 100px;      /* every interactive pill */
  --r-logo-16: 4.6px;   /* keeps the 15/52 corner ratio of variant 03 */
  --r-logo-22: 6.5px;
  --r-logo-30: 9px;
  --r-logo-52: 15px;

  /* ---- depth ------------------------------------------------------------- */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-search: 0 10px 34px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-auth: 0 14px 40px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-cookie: 0 18px 44px rgba(0, 0, 0, .14);
  --shadow-modal: 0 30px 70px rgba(0, 0, 0, .24);
  --shadow-logo-16: 0 1px 4px rgba(10, 108, 241, .28);
  --shadow-logo-22: 0 2px 6px rgba(10, 108, 241, .3);
  --shadow-logo-30: 0 4px 12px rgba(10, 108, 241, .28);
  --shadow-logo-52: 0 6px 16px rgba(10, 108, 241, .28);

  /* ---- layout ------------------------------------------------------------ */
  /* border-box: the band is 1040 of content plus the two 24 gutters, so the
     content column is exactly the 1040 of the mock-up (200…1240 at 1440). */
  --container: 1088px;
  --container-pad: 24px;
  --hdr-h: 52px;
  --page-top: 32px;     /* air between the header and the first block of a page
                           without a hero: billing, audit, /docs/{slug}, error, /_ui */
  --tap: 44px;          /* minimum touch target (§6) */
  --glow-w: 900px;
  --glow-h: 520px;
  --glow-top: -260px;
  --blur: saturate(180%) blur(20px);
  --blur-modal: 4px;    /* radius of the modal backdrop blur */

  /* ---- motion ------------------------------------------------------------ */
  /* The only two transitions in the system; every other movement is one of the
     sr-* keyframes of ui.css, and all of them die under prefers-reduced-motion. */
  --t-bg: background .18s;
  --t-progress: width .4s;  /* determinate progress bar catching up to the percent */
}