/*
  Long Loop — design tokens of the web pages.

  ONE file, TWO copies: consent/tokens.css (longloop.app — the consent page,
  /confirmed, the root) and web/tokens.css (app.longloop.app — the web client)
  are two Firebase Hosting sites and each ships its own; they must stay byte for byte
  the same — `python3 factory/check-web-tokens.py` fails when they drift (and
  when the accent leaves the app's asset). Edit one, copy it over the other.

  The source of truth is the APP (ТЗ actions-web-design-plan.md, decision 1 of
  2026-09-22): actionsShared/Theme.swift, the AccentColor asset, spec §2.19.
  Where the app draws a SYSTEM colour, its value is written out as measured on
  iOS 18.3.1 and 27.0 on 2026-09-22 — `factory/system-colours.sh` resolves
  UIColor in both themes and under Increase Contrast. The runtimes agree on
  every colour here but systemRed, which is 18.3.1's: its Increase Contrast
  light value clears AA on the page, 27.0's (#E9152D, 4.08) does not. Every
  value names its source. The proposal that explains them sits next to the repository:
  streams/development/actions-web-design-spec-delta.md.

  Values, not rules: each page keeps its own stylesheet and builds its
  buttons, fields and cards out of these names. A raw colour in a page's
  stylesheet is a review defect, as a raw number or colour in the app's layout
  is (§2.19, «Приёмка») — the pages' scanners hold it
  (consent/tokens_test.js, web/logic/tokens_test.js).
*/

:root {
  color-scheme: light dark;

  /* ---- Colour (light) ---------------------------------------------------- */

  /* The page behind the cards — Theme.Colour.background (systemGroupedBackground). */
  --ll-page: #F2F2F7;
  /* A card, a sheet, the menu, the snackbar — Theme.Colour.surface
     (secondarySystemGroupedBackground). */
  --ll-surface: #FFFFFF;
  /* Text — Theme.Colour.primary (label). */
  --ll-ink: #000000;
  /* Secondary text — Theme.Colour.secondary (secondaryLabel). The Increase
     Contrast value of the same colour, α 0.80 and not the default 0.60: the
     default gives 3.3:1 on the page, and the web keeps text at WCAG AA
     (4.5:1) — ТЗ WP4. Dark keeps the default, which clears AA. */
  --ll-ink-secondary: rgba(60, 60, 67, 0.8);
  /* Disabled controls and decoration, never information — Theme.Colour.
     controlDisabled (tertiaryLabel), 1.7:1: the platform's word for «off». */
  --ll-ink-tertiary: rgba(60, 60, 67, 0.3);
  /* Every line the product draws: a card's border, the week's rules —
     Theme.Colour.hairline (the separator of iOS 18, pinned on 26+). */
  --ll-hairline: rgba(60, 60, 67, 0.29);
  /* A small control's own fill: the secondary button, a disabled filled
     button, the round glyph button — secondarySystemFill (Theme.Colour.chipFill);
     measured as the fill of `.bordered` and of a disabled `.borderedProminent`. */
  --ll-fill-control: rgba(120, 120, 128, 0.16);
  /* The one accent — the AccentColor asset (§2.19 «Цвет и свет», decision
     2026-08-29). Its pair is held by factory/check-web-tokens.py. As it is: the
     focus ring and a checkbox; words take --ll-accent-text, fills --ll-accent-fill. */
  --ll-accent: #2E6BE6;
  /* The accent as WORDS — a text button, the snackbar's verbs, «back». The
     accent's own hue and saturation, a step darker: lightness 53 % where the
     asset has 54 %, the lightest whole step that clears AA on the grey page
     (4.52; 5.04 on a card) — as the grey and the red take their stronger iOS
     values. Vladimir's veto of 2026-09-22 (spec delta, Р2): «links on grey —
     a darker shade of the accent». web/logic/tokens_test.js re-derives it. */
  --ll-accent-text: #2967E5;
  /* The accent as a FILL — a filled button. Light: the accent itself (white on
     it 4.81). Dark: below. */
  --ll-accent-fill: var(--ll-accent);
  /* Ink on the accent and on a tracker's colour — Theme.Colour.onAccent; the
     app letters monograms white too (ListIconView). */
  --ll-on-accent: #FFFFFF;
  /* Red: a destructive control and an error — Theme.Colour.destructive
     (systemRed). The Increase Contrast value #D70015 and not #FF3B30: the
     default is 3.2:1 on the page, under AA. */
  --ll-danger: #D70015;
  /* What dims the page behind a sheet — measured behind the app's own sheet
     (a card #FFFFFF drawn as #E0E0E0: black at 12 %). */
  --ll-scrim: rgba(0, 0, 0, 0.12);

  /* ---- Type ---------------------------------------------------------------
     The system face and nothing downloaded (ТЗ decision Д3). Sizes are
     Theme.Font's; iOS text styles where the app uses one; line heights are
     the iOS Dynamic Type table's (Large) for the same size. Two weights for
     what we write, 400 and 500 (§2.19); 600 and 700 only where the app has
     them — a filled button's label (`.headline`), a section title, the hero. */

  --ll-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  /* The largest name in the product, one per screen — Theme.Font.heroTitle. */
  --ll-text-hero: 700 28px/34px var(--ll-font-family);
  /* The title of a page or a section — Theme.Font.sectionTitle. */
  --ll-text-title: 600 20px/25px var(--ll-font-family);
  /* A filled button's label and a sheet's title — iOS Headline (LoginView's
     CTA is `.font(.headline)`). */
  --ll-text-headline: 600 17px/22px var(--ll-font-family);
  /* Running text and fields — iOS Body, what a list row and a text field
     draw by default. 17 also keeps iOS Safari from zooming into a field. */
  --ll-text-body: 400 17px/22px var(--ll-font-family);
  /* A card's title — Theme.Font.cardTitle. */
  --ll-text-card-title: 500 16px/21px var(--ll-font-family);
  /* A tracker's name — Theme.Font.name. */
  --ll-text-name: 500 15px/20px var(--ll-font-family);
  /* A text button and helper text — iOS Subheadline (LoginView's links). */
  --ll-text-subhead: 400 15px/20px var(--ll-font-family);
  /* What a row carries — Theme.Font.value. */
  --ll-text-value: 400 14px/19px var(--ll-font-family);
  /* A caption: a label over a field, a sub-line — Theme.Font.caption. */
  --ll-text-caption: 400 13px/18px var(--ll-font-family);
  /* The smallest thing drawn: hours and weekdays of the week — Theme.Font.footnote. */
  --ll-text-footnote: 400 11px/13px var(--ll-font-family);

  /* ---- Space — Theme.Space ------------------------------------------------ */

  --ll-space-screen: 16px;        /* the page's margin; a sheet's and a form card's padding (§2.19 Г11) */
  --ll-space-row: 12px;           /* inside a row, left to right; a row card's padding */
  --ll-space-between-cards: 10px; /* between two cards */
  --ll-space-between-groups: 24px;/* what makes a group read as a group */
  --ll-space-beside-rule: 8px;    /* air on each side of a hairline */
  --ll-space-within-row: 3px;     /* between the two lines of a row */
  --ll-space-chip: 6px;           /* inside a chip, above and below */
  --ll-space-row-vertical: 4px;   /* above and below a row that stands on a 44 px target */
  --ll-space-card-edge: 4px;      /* between a card's border and its first and last row */

  /* ---- Shape — Theme.Radius and Theme.Stroke ----------------------------- */

  --ll-radius-card: 12px;         /* a card — Theme.Radius.card */
  --ll-radius-container: 16px;    /* a large panel: the sheet — Theme.Radius.container */
  /* A button: a capsule, as the app's buttons are on iOS 26+ — the family's
     phones (`.borderedProminent`, `.bordered`, and Apple's button clipped to
     the same shape). Vladimir's veto of 2026-09-22 (spec delta, Р3). */
  --ll-radius-button: 999px;
  /* A field: the card's radius, whatever the buttons do — a note field is
     several lines tall and would not survive a capsule. */
  --ll-radius-field: 12px;
  --ll-radius-chip: 8px;          /* a chosen day of the week — WeekGridView's day chip */
  --ll-radius-mark: 2px;          /* a block of the week — WeekGridView, min(2, …) */
  --ll-radius-pill: 999px;        /* a capsule: today's date, a round glyph button */
  /* The app icon's corner: iOS masks icons at ~22.37 % of the side. */
  --ll-radius-icon: 22.37%;
  --ll-stroke-hairline: 0.5px;    /* Theme.Stroke.hairline */
  /* A field's outline: 1 px, because a control's edge has to read where a
     hairline is built to disappear (Theme.Stroke: `hairline` separates,
     `glyph` draws a control). The app draws its fields as rows of a white
     card; a page's field is that white place with its edge drawn. */
  --ll-stroke-control: 1px;
  /* The focus ring: web only — a phone has no keyboard focus to draw. The
     accent clears 3:1 against the page and the card in both themes. */
  --ll-stroke-focus: 2px;

  /* ---- Size — Theme.Size ------------------------------------------------- */

  --ll-tap: 44px;                 /* the floor of every target — Theme.Size.tapTarget */
  /* A filled button: `.controlSize(.large)`, measured 50.3 pt on 18.3.1. */
  --ll-button-height: 50px;
  /* The web client's one big start / stop button (§2.26 «одна большая кнопка»):
     the height it was built with, kept — the one verb of a screen used at night. */
  --ll-button-height-verb: 64px;
  /* A glyph inside its 44 px target: + ⋯ ‹ › — Theme.Size.actionGlyph. */
  --ll-glyph: 22px;
  --ll-avatar: 44px;              /* a tracker in a row — Theme.Size.avatarRow */
  --ll-avatar-small: 32px;        /* a tracker in a title bar — Theme.Size.avatarToday */
  /* A monogram's letters, as a share of the circle — ListIconView (0.42, medium). */
  --ll-monogram-scale: 0.42;
  --ll-chevron: 12px;             /* Theme.Size.chevron */
  /* The app icon where a page shows it — an iPhone home screen icon, 60 pt. */
  --ll-icon: 60px;

  /* ---- Motion — Theme.Timing ---------------------------------------------- */

  /* A block arriving or leaving — the snackbar and the sheet: the calmer of
     the app's two springs (sectionSpringResponse); under Reduce Motion a plain
     fade of reducedFade. */
  --ll-motion: 0.35s;
  --ll-motion-reduced: 0.2s;

  /* ---- The week — Theme.Colour, WeekGridView ------------------------------ */

  --ll-week-night: var(--ll-page);   /* 21:00–07:00, a step darker than the card — Theme.Colour.weekNight */
  --ll-week-block-opacity: 0.85;     /* a block wears its tracker's colour at 0.85 — Theme.Colour.weekBlock */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ll-page: #000000;
    --ll-surface: #1C1C1E;
    --ll-ink: #FFFFFF;
    --ll-ink-secondary: rgba(235, 235, 245, 0.6);
    --ll-ink-tertiary: rgba(235, 235, 245, 0.3);
    --ll-hairline: rgba(84, 84, 88, 0.6);
    --ll-fill-control: rgba(120, 120, 128, 0.32);
    --ll-accent: #3F80F2;
    /* The dark accent reads as words on the page (5.58) and on a card (4.52). */
    --ll-accent-text: var(--ll-accent);
    /* White on the dark accent is 3.76, under AA: the fill takes the app's
       LIGHT accent, a darker blue — white on it 4.81, and it still stands 3:1
       off the page and the card. Vladimir's veto of 2026-09-22 (Р2). */
    --ll-accent-fill: #2E6BE6;
    --ll-on-accent: #FFFFFF;
    /* systemRed's default dark value clears AA on the page and the card. */
    --ll-danger: #FF453A;
    /* Measured behind the app's sheet in dark: #1C1C1E drawn as #141415. */
    --ll-scrim: rgba(0, 0, 0, 0.29);
  }
}

/* Increase Contrast — the iOS values of the same colours under that setting,
   as the app gets them from the system (Theme.Colour.hairline keeps them):
   stronger lines, fills and greys. The page and the card keep their normal
   values — iOS's darker page and lighter dark card would take the accent's
   words under AA, the one thing the setting must not do. */
@media (prefers-contrast: more) {
  :root {
    --ll-ink-tertiary: rgba(60, 60, 67, 0.7);
    --ll-hairline: rgba(60, 60, 67, 0.37);
    --ll-fill-control: rgba(120, 120, 128, 0.24);
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --ll-ink-secondary: rgba(235, 235, 245, 0.7);
    --ll-ink-tertiary: rgba(235, 235, 245, 0.55);
    --ll-hairline: rgba(84, 84, 88, 0.68);
    --ll-fill-control: rgba(120, 120, 128, 0.4);
    --ll-danger: #FF6961;
  }
}