/* Design tokens.
 *
 * This file holds the theme-independent tokens (spacing, page rhythm, layout,
 * motion). Everything visual - colours, gradients, type, radii, shadows,
 * textures - is set by the active theme in css/themes/<code>.css for
 * :root[data-theme="<code>"]. Components use tokens only.
 *
 * Every theme must define these tokens:
 *   surfaces   --color-bg --color-bg-auth --color-surface --color-surface-subtle
 *              --color-surface-sidebar --color-surface-glass
 *              --color-line --color-line-soft --color-line-input --color-line-input-hover
 *   text       --color-text --color-text-strong --color-text-secondary
 *              --color-text-muted --color-text-faint --color-text-nav --color-icon
 *   brand      --color-primary --color-primary-strong --color-primary-soft
 *              --color-primary-faint --color-primary-line --color-on-primary --color-track
 *              --color-brand-ink --color-brand-bit
 *   status     --color-success --color-success-soft --color-warning --color-warning-soft
 *              --color-warning-strong --color-accent --color-accent-soft --color-danger
 *              --color-danger-strong --color-danger-soft --color-danger-field --color-overlay
 *   results    --color-perfect --color-error-1 --color-error-2 --color-error-3 --color-error-4
 *              --color-error-5
 *   actions    --button-primary-bg --button-primary-bg-hover --button-primary-text
 *              --button-primary-shadow
 *   gradients  --gradient-workspace --gradient-aside --gradient-primary --gradient-page --gradient-hero
 *   shape      --radius-control --radius-panel --radius-card --radius-small --radius-pill
 *   elevation  --shadow-panel --shadow-raised --shadow-inset --shadow-auth-panel
 *              --shadow-floating --shadow-primary --shadow-focus --shadow-focus-danger
 *              --outline-focus
 *   type       --font-sans --font-mono --weight-regular --weight-heading --weight-display
 *              --font-label --label-size --label-tracking --label-transform
 *   effects    --page-texture --page-texture-size --effect-glow --chart-stroke
 *              --section-index-display: inline-block numbers section headings, none hides them
 */
:root {
  /* Chinese text is never smaller than 12px: every small size is max(size, var(--cjk-min)). */
  --cjk-min: 0px;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;

  /* type scale */
  --font-caption: 12px;
  --font-control: 13px;
  --font-body: 14px;
  --font-lead: 15px;
  --font-heading-3: 14px;
  --font-heading-2: 16px;
  --font-heading-1: 26px;
  --font-heading-auth: 28px;
  --font-heading-panel: 20px;

  /* page rhythm: every app page uses the full content width with these */
  --page-gutter: clamp(16px, 2.6vw, 48px);
  --page-gap: 20px;
  --panel-pad: 24px;
  --aside-width: clamp(320px, 25vw, 400px); /* right-hand column of two-column pages */

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --duration: 180ms;

  /* layout */
  --shell-top: 56px;
  --shell-sidebar: 248px;
  --auth-header: 72px;
  --control-height: 34px;
  --input-height: 40px;
}

@media (max-width: 1360px) {
  :root { --shell-sidebar: 72px; }
}

@media (max-width: 860px) {
  :root { --shell-top: 56px; --shell-sidebar: 0px; --page-gap: 14px; --panel-pad: 16px; }
}

:lang(zh) { --cjk-min: 12px; }