/* Rowtrail SQL — design tokens (spec §15.2).
   Only source file where a colour or a px may be written; build/check-css.js fails the build on any colour elsewhere
   and on any px outside build/px-allowlist.json. Components reference tokens only, never a value.

   Two layers, two moments (§11):
   - C.3a (this file, 2026-09-27): structure — names and roles, type and space scales, measure, borders, radii, shadows,
     layout widths, fixed heights in lines × leading, focus, opacity; neutral values (grey scale, system fonts).
   - C.3b (2026-10-01, anticipated after D.2): values — Source families in local files, paper/ink/petrol palette, radii,
     shadows only for what floats, motion, light theme as default. The values are those of design-system.md (a Project
     file, copied into design/ at session start); test/design.js fails if this file and its tables differ.

   Names say the role, never the value (§15.2): --color-accent, not --grey-6. Sizes are rem/em (they follow the user's
   font size); px appear only where the browser has no scalable alternative (hairlines) and in the shadow offsets.
   Themes: the light and dark blocks below have the same set of variables; a component never knows which theme is on.
   Default theme: light (C.3b). With no choice in Profile the dark block follows the system; a choice in Profile wins. */

:root {
  /* ---- Font families. --font-reading is separate so that C.3b may give lessons a different face from the UI. ---- */
  --font-ui: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-reading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Type scale: five bodies, one leading each (§15.2). Base = the user's browser size (1rem). ----
     xs  labels in caps, marks on theory blocks, keycaps, table captions
     sm  UI text: top bar, buttons, tags, notes, hints, data tables, theory blocks, schema browser, module subtitles
     md  body: lesson paragraphs, exercise prompt, choice options, verdict sentence
     lg  paragraph titles in the lesson, resume title, end-of-concept title, theory card block title when opened
     xl  page and lesson title, verify start title */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem; /* D.3: the frontespizio sentence only (design-system.md §5, §10.1) */
  --leading-xs: 1.4;
  --leading-sm: 1.45;
  --leading-md: 1.5;
  --leading-lg: 1.3;
  --leading-xl: 1.2;
  --leading-2xl: 1.2;
  /* Lesson body (reading state of Learn, theory card blocks when opened): the same md body with a wider leading. */
  --leading-reading: 1.65;
  /* Monospace inside prose and tables sits visually larger than text at the same size: scale it down. */
  --text-mono-ratio: 0.94em;
  --tracking-label: 0.06em;

  --weight-regular: 400;
  --weight-semibold: 600;

  /* ---- Measure: 60–75 characters for reading (§15.2). ----
     reading  the lesson column and every summary
     narrow   centred screens: verify start, verify end, end of concept */
  --measure-reading: 68ch;
  --measure-narrow: 56ch;

  /* ---- Space scale 4/8/12/16/24/32/48 (§15.2), in rem. Density per view: reading uses 5–7, exercises 2–4. ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* ---- Borders. Hairlines have no scalable alternative: px here, referenced everywhere as tokens. ----
     1  hairline: boxes, table cells, separators, editor, options
     2  emphasis: active nav underline, focus ring, selected option
     3  marks: example left bar in the lesson, verdict left bar, theory block of `teaches` */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;

  /* ---- Radii. sm tags and keycaps; md buttons, boxes, blocks, options, editor; lg resume box, frames, panels. ---- */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;

  /* ---- Shadows only for what floats (C.3b): sm is none (boxes in the page are flat); md floating panels, menus, the
     autocomplete list. ---- */
  --shadow-sm: none;
  --shadow-md: 0 4px 12px var(--color-shadow);

  /* ---- Layout (§16, wireframes C.4). The three-column exercise layout: theory | exercise | schema. ----
     Side columns are fixed in rem so the centre column, and with it the exercise box, scales with the font.
     Breakpoint at which the columns stack: 900px, written in build/px-allowlist.json (a media query cannot read a var). */
  --layout-max: 78rem;
  --layout-col-theory: 17rem;
  --layout-col-schema: 17rem;   /* v1.18: was 14.5rem; column names and types must fit without wrapping */
  --layout-gap: var(--space-5);
  --layout-bar-height: 2.75rem;

  /* ---- Fixed-height containers (principle 9, §15.3.1): heights in lines × leading, never in px. ----
     exbox-body  prompt + open hints, between the fixed head and the anchored command row of the exercise box.
                 Calibrated on the longest prompt of the pack with two hints open: 193 + 167 characters (IT) at ~65ch
                 per line → 6 lines of text + labels and gaps → 8 lines. Recheck when a pack grows (E.5).
     editor      lines visible in the editor before it scrolls; a reference query is 1–4 lines.
     schema      rows visible in an open schema table (columns list) before it scrolls.
     theory      lines of one theory block when collapsed to its rule; the card scrolls as a whole. */
  --exbox-body-lines: 8;
  --exbox-body-height: calc(var(--exbox-body-lines) * var(--leading-md) * var(--text-md));
  --editor-lines: 6;
  --editor-height: calc(var(--editor-lines) * var(--leading-md) * var(--text-md));
  /* Autocomplete list of the editor (D.2 second part): width, and rows visible before it scrolls. */
  --editor-ac-width: 16rem;
  --editor-ac-rows: 8;
  --schema-table-lines: 8;
  --schema-table-height: calc(var(--schema-table-lines) * var(--leading-sm) * var(--text-sm));
  /* D.3 Home (design-system.md §10): module ticks in the course box and the hub icons (Tabler, 20 px at 16 px root). */
  --tick-height: 0.4rem;
  --icon-size: 1.25rem;
  --mark-size: 1.125rem;
  --mark-size-large: 3rem;   /* session 56 (design-system.md §9 v1.11): the large mark, on the public pages */
  /* D.3 Learn: the course path (design-system.md §10.3) and the lesson dots. */
  --node-size: 0.95rem;
  --node-size-current: 1.25rem;
  --path-max: 44rem;
  --dot-size: 0.6rem;
  --dot-ring-in: 0.1rem;
  --dot-ring-out: 0.16rem;
  --theory-block-lines: 2;
  /* Session 30 (design-system.md §10.9, §13): the closed row with its state visible. strip-col-min is the narrowest column
     of a grid inside an open row (theory blocks of Learn, the three groups of the Sandbox data); rows-col-min is the
     narrowest a table opened from the schema gets inside a pair (a wide one scrolls in its box). */
  --strip-col-min: 16rem;
  --rows-col-min: 22rem;
  /* Session 31 (design-system.md §10.10, §13): the index of the paragraphs in the left margin of the reading. */
  --reading-index-width: 14rem;

  /* ---- Controls. Buttons and keycaps share one height; the tap target is the accessibility minimum. ---- */
  --control-height: 2.25rem;
  --tap-min: 2.75rem;
  --dot-size: 0.75em;
  --keycap-min-width: 1.4em;

  /* ---- Focus ring, same for every focusable element. ---- */
  --focus-ring: var(--border-2) solid var(--color-focus);
  --focus-offset: var(--border-2);

  /* ---- Opacity for reduced states (disabled command, attenuated choice option). ---- */
  --opacity-disabled: 0.4;
  --opacity-dim: 0.55;

  /* ---- Motion (C.3b): only in answer to a gesture (verdict, opening, autocomplete); off with prefers-reduced-motion. ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  /* ---- Stacking. ---- */
  --z-bar: 10;
  --z-panel: 20;
  --z-overlay: 30;
}

/* ============================================================================================================
   Colour roles. Same variables in both themes. C.3a set every value to a grey (the shell had to be usable without
   colour, §15.2); C.3b (2026-10-01) gave the values of design-system.md §3: paper, ink, petrol as the one accent,
   muted semantic colours. test/design.js checks these blocks against that table.
   Roles:
     bg              page background
     surface         raised containers: boxes, exercise box, editor, options, table body
     surface-alt     subdued areas inside a surface: top bar, box heads, command row, table header, selected option
     surface-mark    marked rows in a result table (rows in excess)
     surface-side    the side columns (theory card, schema): the margin of the book (C.3b)
     accent-soft     the one accent tint: course box, paragraph tag, dot in progress (C.3b)
     text            primary text
     text-2          secondary text: theory blocks, tags, example notes, links
     text-muted      tertiary: labels, counts, captions, module subtitles, disabled-looking hints
     text-faint      non-text signs only: chevrons, underline of links, rules (below 4.5:1 on purpose; C.3b)
     text-on-accent  text on an accent background (primary button)
     border          default hairline of boxes and the exercise box
     border-soft     inner separators, table cells, module rows, theory blocks
     border-strong   the resume box, buttons, the verdict box
     accent          the one accent: primary button, active nav, filled dot, `teaches` block, selected option, ok verdict
     accent-hover    primary button on hover/active
     focus           focus ring
     success/error/warning + -bg   semantic states of the verdict, the choice option, the dot with errors (C.3b colours)
     neutral/neutral-bg            blocked state: dot with missing prerequisites
     link, link-underline          text links (read-link in verify end, "vedi" to another lesson)
     syntax-*        the editor highlighting (D.2 second part): keyword, function, string, number, name (tables and
                     columns), unknown (a name the schema does not have), comment. Grey here like every role; each is
                     also told apart without colour in layout.css (weight, style, underline), C.3b colours them.
     shadow          shadow colour with alpha
   ============================================================================================================ */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #F6F3EC;
  --color-surface: #FDFBF7;
  --color-surface-alt: #F1EDE4;
  --color-surface-side: #EFEBE2;
  --color-surface-mark: #E9E3D6;
  --color-surface-current: #FDFBF7;
  --color-accent-soft: #E5EEEE;
  --color-text: #22201C;
  --color-text-2: #55504A;
  --color-text-muted: #6E695F;
  --color-text-faint: #9A948A;
  --color-text-on-accent: #FFFFFF;
  --color-border: #DED8CB;
  --color-border-soft: #E9E4DA;
  --color-border-strong: #C9C1B2;
  --color-accent: #1F5F6B;
  --color-accent-hover: #174B55;
  --color-focus: #1F5F6B;
  --color-success: #3A7346;
  --color-success-bg: #E7F0E5;
  --color-error: #A3412D;
  --color-error-bg: #F5E4DE;
  --color-warning: #86600F;
  --color-warning-bg: #F4EBD6;
  --color-neutral: #C9C1B2;
  --color-neutral-bg: #EFEBE2;
  --color-link: #1F5F6B;
  --color-link-underline: #A8C3C7;
  --color-syntax-keyword: #1F5F6B;
  --color-syntax-function: #5B4A86;
  --color-syntax-string: #86581C;
  --color-syntax-number: #86581C;
  --color-syntax-name: #22201C;
  --color-syntax-unknown: #A3412D;
  --color-syntax-comment: #6E695F;
  --color-shadow: rgba(60, 45, 20, 0.10);
  --color-brand-google-blue: #4285F4;
  --color-brand-google-green: #34A853;
  --color-brand-google-yellow: #FBBC05;
  --color-brand-google-red: #EA4335;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #15191A;
    --color-surface: #1D2224;
    --color-surface-alt: #191D1F;
    --color-surface-side: #171B1C;
    --color-surface-mark: #283033;
    --color-surface-current: #283033;
    --color-accent-soft: #1B2E31;
    --color-text: #E9E5DD;
    --color-text-2: #B8B2A7;
    --color-text-muted: #9C968C;
    --color-text-faint: #6E6A63;
    --color-text-on-accent: #0F1C1E;
    --color-border: #2E3538;
    --color-border-soft: #262C2E;
    --color-border-strong: #3C4447;
    --color-accent: #62B2BE;
    --color-accent-hover: #7CC3CE;
    --color-focus: #62B2BE;
    --color-success: #7FBC88;
    --color-success-bg: #1E2E22;
    --color-error: #E38B74;
    --color-error-bg: #3A2520;
    --color-warning: #D9AE5C;
    --color-warning-bg: #33291A;
    --color-neutral: #3C4447;
    --color-neutral-bg: #191D1F;
    --color-link: #62B2BE;
    --color-link-underline: #2F5A60;
    --color-syntax-keyword: #62B2BE;
    --color-syntax-function: #B3A3E0;
    --color-syntax-string: #D9AE6C;
    --color-syntax-number: #D9AE6C;
    --color-syntax-name: #E9E5DD;
    --color-syntax-unknown: #E38B74;
    --color-syntax-comment: #9C968C;
    --color-shadow: rgba(0, 0, 0, 0.40);
    --color-brand-google-blue: #4285F4;
    --color-brand-google-green: #34A853;
    --color-brand-google-yellow: #FBBC05;
    --color-brand-google-red: #EA4335;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #15191A;
  --color-surface: #1D2224;
  --color-surface-alt: #191D1F;
  --color-surface-side: #171B1C;
  --color-surface-mark: #283033;
  --color-surface-current: #283033;
  --color-accent-soft: #1B2E31;
  --color-text: #E9E5DD;
  --color-text-2: #B8B2A7;
  --color-text-muted: #9C968C;
  --color-text-faint: #6E6A63;
  --color-text-on-accent: #0F1C1E;
  --color-border: #2E3538;
  --color-border-soft: #262C2E;
  --color-border-strong: #3C4447;
  --color-accent: #62B2BE;
  --color-accent-hover: #7CC3CE;
  --color-focus: #62B2BE;
  --color-success: #7FBC88;
  --color-success-bg: #1E2E22;
  --color-error: #E38B74;
  --color-error-bg: #3A2520;
  --color-warning: #D9AE5C;
  --color-warning-bg: #33291A;
  --color-neutral: #3C4447;
  --color-neutral-bg: #191D1F;
  --color-link: #62B2BE;
  --color-link-underline: #2F5A60;
  --color-syntax-keyword: #62B2BE;
  --color-syntax-function: #B3A3E0;
  --color-syntax-string: #D9AE6C;
  --color-syntax-number: #D9AE6C;
  --color-syntax-name: #E9E5DD;
  --color-syntax-unknown: #E38B74;
  --color-syntax-comment: #9C968C;
  --color-shadow: rgba(0, 0, 0, 0.40);
  --color-brand-google-blue: #4285F4;
  --color-brand-google-green: #34A853;
  --color-brand-google-yellow: #FBBC05;
  --color-brand-google-red: #EA4335;
}