/* Design tokens — everything that is not a colour (colour lives in theme.css). Loaded into the `tokens` layer.

   Custom properties only: this file declares no rules, so it can never change how a page looks by itself. A value is
   consumed by a component, never copied into one.  Naming: --<group>-<scale step or role>.

   Breakpoints cannot be custom properties (media queries do not read them). Their single definition is
   js/domain/layout.js (COMPACT_QUERY, SHORT_LANDSCAPE_QUERY); the page-frame breakpoints are:
       phone < 600 · tablet 600–839 · desktop-compact 840–1099 · desktop ≥ 1100 · short landscape: height ≤ 480
   Components do NOT use these; they use container queries on their own width. */
@layer tokens {
  :root {
    /* ---- typography ---- */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* sizes: a calm 8-step scale; nothing in new code goes below caption */
    --font-size-caption: 0.75rem;     /* 12px  helper text, badges */
    --font-size-label: 0.8125rem;     /* 13px  labels, table text */
    --font-size-body-sm: 0.875rem;    /* 14px  dense body */
    --font-size-body: 1rem;           /* 16px  body */
    --font-size-body-lg: 1.125rem;    /* 18px  lead text */
    --font-size-title-sm: 1.25rem;    /* 20px  panel titles */
    --font-size-title: 1.5rem;        /* 24px  page titles */
    --font-size-display: 1.75rem;     /* 28px  the page <h1> */
    --font-size-section: 1.188rem;    /* ≈19px the legacy <h2>; not on the scale — kept so headings stay as they were */
    /* fluid steps: grow gently with the viewport, never below the lower bound */
    --font-size-fluid-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
    --font-size-fluid-title: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-heading: 1.3;
    --line-height-snug: 1.4;
    --line-height-base: 1.55;
    --line-height-relaxed: 1.7;
    --letter-spacing-heading: 0.02em;

    /* ---- spacing: a 4px grid in rem so it follows the user's text size ---- */
    --space-0: 0;
    --space-px: 1px;
    --space-half: 0.125rem;           /* 2px */
    --space-1: 0.25rem;               /* 4px */
    --space-2: 0.5rem;                /* 8px */
    --space-3: 0.75rem;               /* 12px */
    --space-4: 1rem;                  /* 16px */
    --space-5: 1.25rem;               /* 20px */
    --space-6: 1.5rem;                /* 24px */
    --space-8: 2rem;                  /* 32px */
    --space-10: 2.5rem;               /* 40px */
    --space-12: 3rem;                 /* 48px */
    --space-fluid-gutter: clamp(0.75rem, 0.4rem + 1.6vw, 1.5rem);
    --space-fluid-section: clamp(1rem, 0.6rem + 1.8vw, 2rem);

    /* ---- shape ---- */
    --radius-xs: 2px;
    --radius-sm: 4px;                 /* badges, chips inside cells */
    --radius-md: 8px;                 /* controls, cells */
    --radius-lg: 12px;                /* dialogs, sheets, drawers */
    --radius-panel: 14px;             /* the legacy panel radius */
    --radius-pill: 999px;
    --radius-round: 50%;

    /* ---- elevation: three tiers, tinted by --shadow-color (theme.css) ---- */
    --shadow-panel: 0 1px 2px var(--shadow-color);
    --shadow-popover: 0 8px 24px var(--shadow-color-strong);
    --shadow-drawer: 0 12px 40px var(--shadow-color-strong);

    /* ---- motion ---- */
    --duration-instant: 80ms;
    --duration-fast: 120ms;
    --duration-base: 180ms;
    --duration-slow: 250ms;
    --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);

    /* ---- density: comfortable (touch) is the default; compact is for a precise pointer ---- */
    --density-control-h: 2.75rem;     /* 44px */
    --density-control-px: 1rem;
    --density-gap: 0.75rem;
    --density-row-h: 4rem;
    --density-cell-py: 0.25rem;
    --density-cell-px: 0.5rem;

    /* ---- interaction ---- */
    --touch-target-min: 44px;
    --touch-target-dense: 24px;       /* WCAG 2.5.8 floor for dense tables */
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
    --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);

    /* ---- layout and stacking ---- */
    --layout-sidebar-w: 232px;          /* the expanded sidebar, >= 1360px; narrower frames use a 72px rail (css/layout.css) */
    --layer-sticky: 20;
    --layer-nav: 40;
    --layer-toast: 60;

    /* ---- legacy names (the old stylesheets and views still read these; do not use in new code) ---- */
    --radius: var(--radius-panel);
    --side: var(--layout-sidebar-w);
    --tap-min: var(--touch-target-min);
    --focus-offset: var(--focus-ring-offset);
    --ui-layer-sticky: var(--layer-sticky);
    --ui-layer-nav: var(--layer-nav);
    --ui-layer-toast: var(--layer-toast);
  }

  :root[data-density="compact"] {
    --density-control-h: 2.25rem;     /* 36px */
    --density-control-px: 0.75rem;
    --density-gap: 0.5rem;
    --density-row-h: 3rem;
    --density-cell-py: 0.125rem;
    --density-cell-px: 0.375rem;
  }
  /* a precise pointer defaults to compact unless the page asks for comfortable */
  @media (pointer: fine) {
    :root:not([data-density="comfortable"]) {
      --density-control-h: 2.25rem;
      --density-control-px: 0.75rem;
      --density-gap: 0.5rem;
      --density-row-h: 3rem;
      --density-cell-py: 0.125rem;
      --density-cell-px: 0.375rem;
    }
  }
  /* people who ask for less motion get (almost) none from every token-driven transition */
  @media (prefers-reduced-motion: reduce) {
    :root { --duration-instant: 0.01ms; --duration-fast: 0.01ms; --duration-base: 0.01ms; --duration-slow: 0.01ms; }
  }
}