/* tokens.css — the one source of size, rhythm, and color. Every vertical
   interval is --text-base math; the 16.8px floor is law, the 21px@1152
   outside target is the default seam. --theme-* is the one override seam. */

/* Type: self-hosted variable font, per fonts.md —
   local() first, woff2 from /fonts/, swap. */
@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: local('Work Sans'),
         url('/fonts/work-sans-var.woff2') format('woff2');
}

:root {
    --font-ui: var(--theme-font-ui, 'Work Sans', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif);

    /* 16.8px at a 360px viewport → 21px at 1152px, linear between:
       slope 4.2px over 792px of viewport = 0.5303vw, intercept 14.89px */
    --text-base: var(--theme-text-base, clamp(16.8px, 14.89px + 0.5303vw, 21px));

    /* rhythm cascade — seven stages, closed-ended by construction */
    --rhythm-min:     var(--theme-rhythm-min,     calc(var(--text-base) * 0.25));
    --rhythm-tight:   var(--theme-rhythm-tight,   calc(var(--text-base) * 0.5));
    --rhythm-small:   var(--theme-rhythm-small,   calc(var(--text-base) * 0.75));
    --rhythm-regular: var(--theme-rhythm-regular, calc(var(--text-base) * 1.0));
    --rhythm-large:   var(--theme-rhythm-large,   calc(var(--text-base) * 1.5));
    --rhythm-loose:   var(--theme-rhythm-loose,   calc(var(--text-base) * 2.0));
    --rhythm-max:     var(--theme-rhythm-max,     calc(var(--text-base) * 3.0));

    /* color — white and light; all pairs hold WCAG AA (salmon is deepened
       just enough to hold the 3:1 UI-component floor on white) */
    --color-page:       var(--theme-color-page,       #ffffff);
    --color-raise:      var(--theme-color-raise,      #ffffff);
    --color-ink:        var(--theme-color-ink,        #2b2926);
    --color-charcoal:   var(--theme-color-charcoal,   #666666);
    --color-muted:      var(--theme-color-muted,      #6b6862);
    --color-line:       var(--theme-color-line,       #e8e5e0);
    --color-salmon:      var(--theme-color-salmon,      #e4573d);
    --color-salmon-deep: var(--theme-color-salmon-deep, #c4482c);  /* text-bearing ground: white passes AA at any size */
    --color-accent:     var(--theme-color-accent,     #9a3b1e);
    --color-accent-ink: var(--theme-color-accent-ink, #ffffff);
    --color-danger:     var(--theme-color-danger,     #b42318);  /* destructive acts; holds AA on white */
    --color-row-rule:   var(--theme-color-row-rule,   #cccccc);  /* the hr between list rows */

    /* one glyph size for every UI affordance icon — boxes vary (hit areas),
       glyphs do not; mask-size takes the absolute length, not a fraction */
    --icon-glyph: var(--theme-icon-glyph, calc(var(--text-base) * 1.6));

    /* strokes and elevation */
    --border-width: var(--theme-border-width, 2px);
    --shadow-soft:  var(--theme-shadow-soft,  0 2px 10px rgba(30, 28, 24, 0.18));

    /* component footprints — one row height for list items, fields, pills */
    --header-height: var(--theme-header-height, calc(var(--text-base) * 3));
    --row-height:    var(--theme-row-height,    calc(var(--text-base) * 3.2));

    /* the one measure: page column, modals, and toasts share it */
    /* percentage, not vw: vw counts the scrollbar, so 94vw renders wider
       than 94% of the page you can see */
    --page-width: var(--theme-page-width, min(92%, 1152px));
    --modal-width: var(--theme-modal-width, min(92%, 960px));
}