/* ============================================================================
   Foundation — the structural tokens
   ----------------------------------------------------------------------------
   Type scale, spacing, radius, borders, layout, motion, z-index. These do not
   change between themes, which is why they live apart from colors.css: a new
   theme is a colour block, never a re-measure of the whole application.

   Nothing in this file is a colour. StyleContractTests enforces that.
   ========================================================================== */

:root {
    /* === Typography =========================================================
       Twelve steps, monotonic. Every font-size in the application is one of
       these; the previous 24 ad-hoc values collapsed onto this ladder. */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Fira Code', Menlo, Consolas, monospace;

    --text-2xs: 0.68rem;
    --text-xs: 0.72rem;
    --text-sm: 0.78rem;
    --text-base: 0.82rem;
    --text-md: 0.88rem;
    --text-lg: 0.95rem;
    --text-xl: 1.1rem;
    --text-2xl: 1.25rem;
    --text-3xl: 1.4rem;
    --text-4xl: 1.6rem;
    --text-5xl: 2rem;
    --text-6xl: 2.4rem;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --leading-none: 1;
    --leading-tight: 1.3;
    --leading-snug: 1.4;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --leading-loose: 1.7;

    --tracking-tighter: -0.3px;
    --tracking-tight: -0.2px;
    --tracking-wide: 0.3px;
    --tracking-wider: 0.5px;

    /* === Spacing ============================================================
       A 2px grid. Named by step, not by pixel, so a density change is one edit
       here rather than 53 edits across the component rules. */
    --space-0: 0;
    --space-px: 1px;
    --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: 20px;
    --space-12: 24px;
    --space-14: 28px;
    --space-16: 32px;
    --space-18: 36px;
    --space-24: 48px;

    /* === Radius ============================================================= */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* === Borders ============================================================ */
    --border-width: 1px;
    --border-width-thick: 2px;
    --border-accent: 3px;
    --border-accent-thick: 4px;

    /* === Layout ============================================================= */
    --sidebar-width: 220px;
    --sidebar-width-collapsed: 56px;
    --content-max: 1280px;
    --statusbar-height: 48px;

    /* The workbench frame. Three columns, and only the middle one is elastic.
       The two rails are fixed because their content is a list of file names and
       a list of facts, both of which read at one width and neither of which
       gets better with more; the writing surface takes everything left over and
       then caps itself at --measure-prose. */
    --workbench-spine: 280px;
    --workbench-inspector: 340px;
    /* About 78 characters at the body size. Prose set wider is a line the eye
       loses on the way back to the left margin, which is the measure problem
       every full-width editor has and the reason people write in fullscreen
       mode to escape their own tool. */
    --measure-prose: 44rem;

    /* Breakpoints are documented here but cannot be used in @media — CSS has no
       custom-property support in media queries. The three values live in
       responsive.css: 1024px tablet, 768px compact, 640px phone. */

    /* === Motion ============================================================= */
    --transition-fast: 0.1s;
    --transition: 0.15s;
    --transition-slow: 0.3s;
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* === Z-index ============================================================
       Four layers, and no bare integer anywhere else in the stylesheets. */
    --z-sticky: 1;
    --z-statusbar: 90;
    --z-toast: 95;
    --z-sidebar: 100;
}