/* ============================================================================
   STYLE — classic. The evolution of what ships today.

   Shape, size, type and component behaviour. NO COLOUR: every value here must
   survive having any palette dropped under it, so the only colours referenced
   are tokens the palette owns. Shadows are split — the geometry is a style
   decision, the colour comes from --shadow-color.
   ========================================================================= */

[data-style="classic"] {
  /* geometry */
  --border-w: 1px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-door: 14px;
  --radius-thumb: 10px;
  --radius-pill: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;

  --gutter: 18px;
  --card-pad: 18px;
  /* secondary controls (grip, star) sit at the a11y floor, not at
     --control-h — see .drag-handle in base.css */
  --side-ctl-w: 44px;
  --control-h: 44px;
  --topbar-h: 56px;
  --door-h: 72px;
  --thumb-size: 52px;
  --thumb-inset: 8px;
  --focus-ring-w: 3px;

  --rec-pad: 14px 16px;
  --rec-gap: 8px;
  --rec-lead-w: 3px;

  --shadow-1: 0 1px 2px var(--shadow-color);
  --shadow-thumb: 0 2px 8px var(--accent-glow);

  /* type */
  --font-display: "Exo 2", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --weight-display: 700;
  --tracking-display: -0.015em;

  --text-base: 15px;
  --text-xs: 0.76rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.1rem;
  --text-h1: 1.45rem;
  --text-eyebrow: 0.7rem;
}

/* Records sit flush inside their card, separated by a rule rather than a gap.
   Nesting a bordered card inside a bordered card is what made the admin lists
   look boxed-in. */
[data-style="classic"] .card-flush .records {
  gap: 0;
}

[data-style="classic"] .card-flush .rec {
  border-width: 0 0 var(--border-w) 0;
  border-radius: 0;
  padding: 14px 16px;
}

[data-style="classic"] .card-flush .rec:last-child {
  border-bottom: none;
}

[data-style="classic"] .rec-lead {
  padding-left: 13px;
}

[data-style="classic"] .badge {
  text-transform: lowercase;
}