/* theme.css - every color, type size, spacing, radius and shadow the
   screens use, as tokens. Nothing outside this file names a raw value
   (tests/repo_rules.py checks it). Shades are derived from a base token
   with color-mix; a second theme is one more block of token values.

   The palette is the Altio brand sheet as the canvas boards draw it:
   navy accent, brand blue for the mark, cool paper, navy-tinted ink. */

@layer reset, theme, defaults, layouts, components, utils;

@layer theme {
  :root {
    /* base colors */
    --accent: #1f3a5f;
    --accent-deep: #0e1c2d;
    --blue: #3b6fa5;
    --ink: #243140;
    --ink-soft: #5d6b7b;
    --ink-faint: #8a96a4;
    --page: #f6f8fb;
    --panel: #ffffff;
    --line: #e4e9f0;
    --warn: #8a4b2a;
    /* the quiet note on a reference document to check (8.5) */
    --caution: #d4911d;
    --danger: #b22222;
    /* an overdue line's fill, as board 2.31 paints it */
    --danger-ground: #fef2f2;
    --ok: #2f7a4f;
    /* the ground of typed words found in a result (F24, 3.3b) */
    --mark-bg: #fbf0bf;
    --view-switch-track: #eef2f7;

    /* shades, each from its base */
    --accent-soft: color-mix(in srgb, var(--blue) 10%, var(--panel));
    --accent-line: color-mix(in srgb, var(--blue) 20%, var(--panel));
    /* the dashed outline of the place a dragged tab will land (F26) */
    --slot-line: color-mix(in srgb, var(--ink-faint) 40%, var(--panel));
    --accent-hover: color-mix(in srgb, var(--accent) 80%, var(--accent-deep));
    --on-accent: var(--panel);
    --mist: color-mix(in srgb, var(--ink-faint) 14%, var(--panel));
    --frame-ground: color-mix(in srgb, var(--page) 60%, var(--panel));
    --warn-soft: color-mix(in srgb, var(--warn) 9%, var(--panel));
    --warn-line: color-mix(in srgb, var(--warn) 30%, var(--panel));
    --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--panel));
    --ok-soft: color-mix(in srgb, var(--ok) 12%, var(--panel));
    /* a Board column's ground, and a column a dragged card may land in (4.23) */
    --column-ground: color-mix(in srgb, var(--page) 70%, var(--panel));
    --column-drop: color-mix(in srgb, var(--blue) 8%, var(--panel));
    /* an urgent or overdue card's ground and edge (4.12a, 4.12f) */
    --urgent-ground: color-mix(in srgb, var(--danger) 6%, var(--panel));
    --urgent-edge: var(--danger);
    --scrim: color-mix(in srgb, var(--accent-deep) 22%, transparent);
    --shadow-ink-faint: color-mix(in srgb, var(--accent-deep) 5%, transparent);
    --shadow-ink-soft: color-mix(in srgb, var(--accent-deep) 7%, transparent);
    --shadow-ink-deep: color-mix(in srgb, var(--accent-deep) 18%, transparent);
    --skeleton: color-mix(in srgb, var(--ink-faint) 16%, var(--panel));
    /* the place Find is at now, among the places it marks (F13) */
    --found-current: color-mix(in srgb, var(--caution) 45%, var(--panel));
    --skeleton-shine: color-mix(in srgb, var(--ink-faint) 6%, var(--panel));

    /* type */
    --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: Newsreader, Georgia, "Times New Roman", serif;
    --text-tag: 11px;
    --text-xs: 11.5px;
    --text-sm: 12px;
    --text-note: 12.5px;
    --text-md: 13px;
    --text-menu: 13.5px;
    --text-row: 14px;
    --text-base: 15px;
    --text-brand: 24px;
    --text-display: 32px;
    --text-title: 26px;
    /* a product page's name, its whole header (F35) */
    --text-page-title: 24px;
    /* a state's pill in a table row (4.52) */
    --text-pill: 10.5px;
    --leading: 1.55;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-strong: 600;
    --tracking-caps: 0.07em;
    --tracking-brand: 0.01em;
    --tracking-display: -0.012em;

    /* spacing */
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 6px;
    --space-4: 8px;
    --space-5: 10px;
    --space-6: 12px;
    --space-7: 14px;
    --space-8: 16px;
    --space-9: 18px;
    --space-10: 24px;
    --space-11: 32px;
    --space-12: 36px;
    --row-pad-y: 7px;
    --row-pad-x: 9px;
    --row-indent: 14px;
    --menu-gap: 4px;
    --input-pad-y: 5px;
    --message-gap: 26px;
    --tab-pad-y: 3px;
    /* how far a dragged tab rises, and how it tilts, as F26 draws it */
    --tab-lift: -5px;
    --tab-tilt: -2deg;
    --result-pad-y: 9px;
    --search-bar-gap: 12px;
    --results-gap: 14px;

    /* sizes */
    --hairline: 1px;
    --icon-size: 18px;
    --icon-sm: 13px;
    --icon-dots: 16px;
    --icon-result: 16px;
    --icon-chevron: 14px;
    --send-size: 40px;
    --chat-box-min: 52px;
    --file-name-max: 220px;
    --bubble-max: 82%;
    --skeleton-bubble: 44px;
    --hit-target: 40px;
    --mark-width: 12px;
    --mark-height: 24px;
    --avatar-size: 34px;
    --collab-initials-size: 26px;
    --collab-people-width: 340px;
    --menu-min-width: 150px;
    --confirm-width: 260px;
    --filter-options-width: 190px;
    --side-panel-width: 284px;
    /* wide enough for its five tabs at full size (ruling 130) */
    --right-panel-width: 380px;
    --home-width: 720px;
    --greeting-top: 72px;
    --chat-top: 72px;
    --side-rail-lane: 84px;
    --dialog-width: 560px;
    --door-card-width: 400px;
    --admin-top: 20px;
    --admin-list-width: 220px;
    --role-name-width: 260px;
    --role-start-width: 220px;
    --role-section-gap: 24px;
    --role-section-width: 180px;
    --role-type-width: 104px;
    --tick-size: 15px;
    --audit-person-width: 170px;
    --audit-product-width: 150px;
    --audit-search-width: 290px;
    --audit-period-width: 150px;
    --audit-export-width: 320px;
    --audit-line-label: 128px;
    --trail-dot: 12px;
    --trail-line: 2px;
    --email-hour-width: 176px;
    --settings-label-width: 194px; /* Settings' label and hint column: board 2.20 */
    --switch-width: 30px;
    --switch-height: 17px;
    --switch-knob: 13px;
    --person-window-width: 600px;
    --person-fact-width: 140px;
    --level-menu-width: 260px;
    --deactivate-window-width: 660px;
    --owner-picker-width: 170px;
    --owner-cell-width: 170px;
    --matches-max-height: 220px;
    --justification-min: 52px;
    --stale-dot: 8px;
    --product-type-width: 170px;
    --product-window-width: 520px;
    --name-matches-width: 380px;
    --product-names-width: 510px;
    --rules-review-width: 250px;
    --rules-stakeholders-width: 690px;
    /* Rules' lifecycle, stage by stage (F71): its width and a line's label column */
    --rules-stage-width: 900px;
    --rules-line-label-width: 180px;
    --integration-result-width: 328px;
    --integration-window-width: 520px;
    --review-avatar-size: 26px;
    --review-picker-width: 360px;
    --references-window-width: 760px;
    --rules-number-width: 56px;
    --rules-measure-width: 110px;
    --rules-always-width: 300px;
    --rules-address-width: 260px;
    --rules-record-width: 200px;
    --sign-wide-width: 560px;
    /* the Templates tab (8.6, 8.7 to 8.7e, 8.21): the types list, the Word
       template row's label, the preview column, the sample page's padding,
       gap and one point's size, the Filled column and the upload window */
    --templates-list-width: 244px;
    --templates-word-label-width: 140px;
    --templates-preview-width: 320px;
    --sample-page-pad: 24px;
    --sample-gap: 6px;
    --sample-pt: 0.62px;
    --templates-way-width: 210px;
    --templates-mark-width: 170px;
    --templates-mark-picker-width: 140px;
    --template-upload-width: 560px;
    /* a health authority response's fields (6.14): authority, a day, the request */
    --response-authority-width: 220px;
    --response-day-width: 140px;
    --response-request-width: 330px;
    /* the sliding switch every two-way view toggle is (decisions 123, 131):
       its pale track, each half's width and the track's inset */
    --view-switch-half: 86px;
    --view-switch-pad: 3px;
    /* the Dashboard (F40): a typed cutoff's box, the Signal column's least width */
    --dashboard-cutoff-width: 56px;
    --dashboard-signal-min: 240px;
    /* the Board (4.60): a column's least width, the height its columns
       stand at, a card's priority chip's words, and the panel's date
       field kept out of sight (its calendar opens from its button) */
    --board-column-min: 150px;
    --board-height: 600px;
    --text-chip: 10px;
    --signal-date-size: 1px;
    --skeleton-line: 14px;
    /* the gallery: a scrolling list's height, a row's least height */
    --gallery-scroll-height: 202px;
    --gallery-row-min: 40px;
    --skeleton-display: 32px;
    /* the Word-like editor (F13, F33): a toolbar button, the page's left
       margin, how far a list item nests per level */
    --editor-tool-size: 30px;
    --editor-gutter: 24px;
    --editor-indent: 18px;
    --editor-cell-min: 48px;
    --editor-line-min: 1.55em;
    --editor-style-menu-width: 198px;
    --editor-style-h1: 20px;
    --editor-style-h2: 17px;
    /* comments on words (F70): the commented words' warm wash and its thin
       underline, a thread's width and the most it grows (ruling 170) */
    --comment-wash: color-mix(in srgb, var(--caution) 18%, var(--panel));
    --comment-line: color-mix(in srgb, var(--warn) 55%, var(--panel));
    --comment-width: 330px;
    --comment-cap: 420px;
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    /* the shared controls (controls.css): the signing window, 520 wide and
       120 px from the top (191, 5.4); underline tabs (130, F62); the urgent
       and overdue marks (120, F61); a scroll area's fade (200); a proposal's
       outline while its removal is asked (223) */
    --sign-window-width: 520px;
    --sign-window-top: 120px;
    /* a day picked in a signing window: as wide as its day where the
       board draws it so (5.19) */
    --date-field-width: 170px;
    --radius-window: 12px;
    --tab-underline: 2px;
    --tab-pad-top: 7px;
    --tab-pad-bottom: 6px;
    --urgent-ring: 1.5px;
    --mark-stroke: 2px;
    --scroll-fade: 48px;
    --scroll-bar: 6px;

    /* radius */
    --radius: 10px;
    --radius-btn: 8px;
    --radius-sm: 6px;
    --radius-tail: 4px;
    --radius-mark: 3px;
    --radius-pill: 999px;
    --radius-round: 50%;

    /* shadows */
    --shadow: 0 1px 2px var(--shadow-ink-faint), 0 8px 24px var(--shadow-ink-soft);
    --shadow-dialog: 0 18px 48px var(--shadow-ink-deep);
    /* a tab lifted to be dragged (F26) */
    --shadow-lifted: 0 6px 16px var(--shadow-ink-deep);

    /* focus and motion */
    --focus-ring: var(--focus-ring-width) solid var(--blue);
    --motion-fast: 120ms;
    --motion-slide: 160ms;
    --motion-shimmer: 1.4s;

    /* the shared controls' own tokens (Evren to confirm: each is the
       board's value; screens adopt them in their own tickets) */
    --alarm: #b91c1c; /* an urgent or overdue item's edge and marks: board F61 */
    --ink-pale: #bec7d2; /* a tab not open yet: boards F57, F62 */
    --scroll-thumb: color-mix(in srgb, var(--ink-faint) 45%, transparent); /* thin scroll bar: 200, F70 */
    --audit-who-width: 200px;
    --justifications-width: 900px;
    --home-switch-width: calc(3 * var(--view-switch-half) + 2 * var(--view-switch-pad)); /* All, Yours, Your move at the search row's end, held on every tab; All | Yours keeps its 86 px parts at its right end, Evren to confirm: F78, 259 */
    --editor-slash-width: 250px;
    --status-bar-height: 52px;
    --bar-button-height: 30px;
    --shadow-bar: 0 1px 2px var(--shadow-ink-faint);
    --comment-list-width: 430px;
    --cases-band-width: 10px; /* a collapsed column's or row's thin band: Data tab C2 */
    --cases-list-height: 60vh; /* the cases list before it scrolls inside: Data tab 7.1 */
    --case-window-width: 640px; /* the case window: Data tab 7.4 */
    --chart-threshold: #c58a1a; /* a chart's dashed threshold line: Data tab 8.1, 9.2 */
    --chart-bar-min: 28px; /* a bar's least width before the chart scrolls sideways: Data tab 14.2 */
    --chart-number-width: 3.2em; /* a chart sentence's number box (the period's count): Data tab 9.1 */
    --chart-threshold-weight: 2px; /* the threshold line's dash in a chart's key: Data tab 9.2 */
    --stakeholders-says-width: 170px; /* What it says (6): its picker, board 8.9 */
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --motion-fast: 0ms;
      --motion-slide: 0ms;
      --motion-shimmer: 0s;
    }
  }
}