/* SKINAURA design tokens. Names are binding (see docs/ARCHITECTURE.md). */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #F5F5F3;
  --surface: #FFFFFF;
  --surface-2: #FAFAF8;
  --surface-sunken: #EFEFEC;

  /* Ink */
  --ink: #191B20;
  --ink-2: #3F444E;
  --ink-3: #636874;
  --line: #E3E4E7;
  --line-strong: #D2D5DA;     /* decorative dividers / card outlines */
  --line-control: #858A93;    /* boundary that identifies a form control or its off state:
                                 3.5:1 on white, 3.2:1 on --bg, 3.0:1 on --surface-sunken (WCAG 1.4.11) */

  /* Brand blue */
  --accent: #3781FC;          /* fills without small text, icons, outlines, rings */
  --accent-strong: #2B6EEA;   /* fill behind white text (4.6:1) */
  --accent-hover: #2461D4;
  --accent-press: #1F56BD;
  --accent-ink: #1F5BD1;      /* blue text/links on light backgrounds */
  --accent-tint: #EAF2FF;
  --accent-soft: rgba(55, 129, 252, .14);

  /* Rail */
  --rail-bg: #191B20;
  --rail-ink: #F5F5F3;
  --rail-ink-2: #A9AEB8;
  --rail-fast: #FFC46B;       /* the fast balance on the dark rail (9:1 on --rail-bg); --warning is its light twin */

  /* Status */
  --danger: #C22F2F;
  --danger-tint: #FDECEC;
  --success: #177245;
  --success-tint: #E7F5EE;
  --warning: #8A5A00;
  --warning-tint: #FFF4DB;

  /* Radii */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Type */
  --font-ui: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Alumni Sans', 'Arial Narrow', sans-serif;   /* upright only; slant via .oblique */
  --font-logo: 'Zen Dots', 'Golos Text', system-ui, sans-serif; /* logo.js only */

  --fs-xs: .75rem;     /* 12 */
  --fs-sm: .8125rem;   /* 13 */
  --fs-base: .9375rem; /* 15 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: 1.375rem;   /* 22 */
  --fs-2xl: 1.75rem;   /* 28 */
  --fs-3xl: 2.5rem;    /* 40 */
  --fs-display: clamp(2.75rem, 1.6rem + 4.2vw, 5.5rem);

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Controls */
  --control-h: 44px;
  --control-h-sm: 44px;  /* visual may be smaller, hit target never is */
  --control-h-lg: 52px;

  /* Rail geometry */
  --rail-w: 76px;
  --rail-w-open: 208px;
  --rail-inset: 16px;
  --rail-radius: 32px;
  --topbar-h: 60px;
  --main-pad-left: calc(var(--rail-inset) + var(--rail-w) + 24px);
  --main-pad-right: 24px;
  --content-max: 1440px;

  /* Motion */
  --ease-out: cubic-bezier(.22, .8, .26, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 180ms;
  --dur-med: 220ms;
  --dur-rail: 280ms;
  --dur-slow: 500ms;

  /* Depth */
  --shadow-1: 0 1px 2px rgba(25, 27, 32, .06);
  --shadow-2: 0 2px 4px rgba(25, 27, 32, .04), 0 10px 24px -8px rgba(25, 27, 32, .12);
  --shadow-3: 0 4px 8px rgba(25, 27, 32, .06), 0 24px 48px -12px rgba(25, 27, 32, .22);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  /* Layers (dialogs use the native top layer) */
  --z-rail: 50;
  --z-topbar: 60;
  --z-drawer: 80;
  --z-toast: 100;
}

@media (max-width: 767.98px) {
  :root {
    --main-pad-left: 16px;
    --main-pad-right: 16px;
  }
}