/* ============================================================
   meander — Design System
   Tokens · base theme = the design bundle's default
   ("Slate & sky", Subtle surface, Border cards, Regular density,
    Soft geometry, Soft line contrast, Bricolage Grotesque).

   This file is the NO-JS baseline: its resolved values equal the
   default theme the theming layer (static/theme.js) produces, so
   a first paint with JS disabled already looks correct. The theming
   layer overrides these --ds-* custom properties on the root wrapper
   at runtime (palette switcher + tweak controls). Never style per
   component — everything themes from these tokens.

   Warm/cool near-black, one accent, green/red for decision polarity
   only, hairline borders, no shadows (Border card default), single
   type family, no monospace, no icons.
   ============================================================ */

:root {
  /* ---- Surfaces (page < card < nested) ---- */
  --ds-bg:      #191b1e;  /* page background                       */
  --ds-surface: #1d1f22;  /* cards, tables (Subtle: mix bg→surface) */
  --ds-inset:   #121417;  /* nested tables, inputs, code blocks    */

  /* ---- Ink — one off-white, tiered by opacity (dark ramp) ---- */
  --ds-ink:    rgb(225,228,232);
  --ds-ink-1:  rgba(225,228,232,0.78);  /* strong body            */
  --ds-ink-2:  rgba(225,228,232,0.70);  /* body                   */
  --ds-ink-3:  rgba(225,228,232,0.60);  /* secondary              */
  --ds-ink-4:  rgba(225,228,232,0.52);  /* muted                  */
  --ds-ink-5:  rgba(225,228,232,0.46);  /* faint / metadata       */
  --ds-ink-6:  rgba(225,228,232,0.44);  /* labels, table headers  */
  --ds-ink-7:  rgba(225,228,232,0.38);  /* placeholder            */
  --ds-ink-8:  rgba(225,228,232,0.30);  /* quietest (tags)        */

  /* ---- Lines & wash (Soft contrast, dark) ---- */
  --ds-line:        rgba(225,228,232,0.07);  /* hairline dividers, card edges */
  --ds-line-strong: rgba(225,228,232,0.13);  /* input borders                 */
  --ds-hover:       rgba(225,228,232,0.05);  /* row / secondary-button wash   */
  --ds-selection:   rgba(225,228,232,0.13);

  /* ---- Accent — the one brand colour (terracotta base / sky default) ---- */
  --ds-accent:      #6f9bd1;
  --ds-accent-tint: rgba(111,155,209,0.14);  /* active nav pill, "needs you" frame */
  --ds-on-accent:   #1a1916;                 /* text/digits on an accent fill      */

  /* ---- Semantic (decision polarity ONLY, never decorative) ---- */
  --ds-positive:    #6aa874;  /* linked / positive     */
  --ds-negative:    #cc7a6f;  /* not-linked / negative */
  /* Deprecated aliases — resolve to the theme colour, never a hard hex. */
  --ds-danger:      var(--ds-negative);
  --ds-success:     var(--ds-positive);

  /* ============================================================
     Typography — single family, four weights, no monospace.
     ============================================================ */
  --ds-font:         'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --ds-font-heading: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;

  --ds-weight-light:    300;
  --ds-weight-regular:  400;
  --ds-weight-medium:   500;
  --ds-weight-semibold: 600;

  /* Type scale (px) */
  --ds-text-xs:    11px;   /* uppercase labels, table headers */
  --ds-text-sm:    12px;   /* dense table cells, metadata     */
  --ds-text-base:  12.5px; /* default UI text                 */
  --ds-text-md:    13px;   /* card titles                     */
  --ds-text-body:  13.5px; /* paragraph / lede                */
  --ds-text-lg:    15px;   /* section sub-headers             */
  --ds-text-xl:    20px;   /* detail-page title               */
  --ds-text-2xl:   21px;   /* page title                      */

  --ds-leading-tight: 1.4;
  --ds-leading-base:  1.55;
  --ds-leading-loose: 1.7;

  --ds-tracking-tight: -0.02em; /* large headings   */
  --ds-tracking-label:  0.05em; /* uppercase labels */

  /* ============================================================
     Spacing — 2px base step
     ============================================================ */
  --ds-space-1:  2px;
  --ds-space-2:  4px;
  --ds-space-3:  6px;
  --ds-space-4:  8px;
  --ds-space-5:  10px;
  --ds-space-6:  12px;
  --ds-space-7:  14px;
  --ds-space-8:  16px;
  --ds-space-10: 20px;
  --ds-space-11: 22px;
  --ds-space-12: 24px;
  --ds-space-14: 30px;
  --ds-space-16: 40px;
  --ds-space-20: 48px;

  /* ============================================================
     Radii (base scale)
     ============================================================ */
  --ds-radius-xs: 4px;  /* keycaps, tags          */
  --ds-radius-sm: 5px;  /* segmented control item */
  --ds-radius:    6px;  /* buttons, inputs        */
  --ds-radius-md: 7px;  /* small panels           */
  --ds-radius-lg: 8px;  /* cards                  */
  --ds-radius-xl: 9px;  /* large enclosing panels */

  /* ============================================================
     Layout
     ============================================================ */
  --ds-sidebar-width: 236px;
  --ds-content-max:   1040px;
  --ds-auth-card-max: 24rem;
  --ds-prose-max:     640px;
  --ds-prose-wide:    720px;
  --ds-input-min:      120px;
  --ds-input-field-md: 160px;
  --ds-textarea-min-h: 90px;

  /* ============================================================
     Theme-generated composite tokens.
     Defaults below = the bundle default (Border card · Regular
     density · Soft geometry · sentence-case label voice). The
     theming layer regenerates these from the palette + tweaks.
     ============================================================ */

  /* Card edge treatment (Border default; Shadow tweak swaps these) */
  --ds-card-bd: 1px solid var(--ds-line);
  --ds-card-sh: none;

  /* Density (padding + gaps) — Regular */
  --ds-pad-page:     48px 52px 110px;
  --ds-pad-card:     18px 20px;
  --ds-pad-card-sm:  15px 17px;
  --ds-pad-card-lg:  22px 24px;
  --ds-pad-row:      12px 16px;
  --ds-pad-rowhead:  10px 16px;
  --ds-gap:          12px;
  --ds-gap-card:     16px;

  /* Geometry (radius scale) — Soft */
  --ds-r-card:    9px;
  --ds-r-card-lg: 10px;
  --ds-r-inner:   8px;
  --ds-r-seg:     7px;
  --ds-r-ctl:     6px;
  --ds-r-chip:    5px;

  /* Label voice — sentence case (final) */
  --ds-label-fs: 12px;
  --ds-label-tt: none;
  --ds-label-ls: 0em;
  --ds-label-fw: 500;
}