/* Scalio Spring — design tokens (web)
 * Generated view of tokens.json. Components reference the SEMANTIC vars.
 * Primitives exist so the system can be retuned in one place. */

:root {
  /* ---------- primitive · color ---------- */
  --green-50:#EEFFF4; --green-100:#DCFCE7; --green-500:#34C363; --green-600:#16A34A; --green-700:#1D7539;
  --amber-50:#FEF3C7; --amber-500:#F5B800; --amber-700:#B45309;
  --neutral-0:#FFFFFF; --neutral-50:#F6F8F7; --neutral-100:#EDF0EF; --neutral-200:#E1E6E3; --neutral-300:#CAD2CD;
  --neutral-400:#9CA8A2; --neutral-500:#6B7B71; --neutral-600:#4C5A51; --neutral-700:#39463E; --neutral-800:#222C27; --neutral-900:#0E1A12;
  --sky:#38BDF8; --coral:#DC5F4C; --white:#FFFFFF; --line:rgba(14,26,18,0.10);

  /* ---------- primitive · space (px) ---------- */
  --space-none:0px; --space-3xs:2px; --space-2xs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px;
  --space-lg:20px; --space-xl:24px; --space-2xl:32px; --space-3xl:40px; --space-4xl:48px; --space-5xl:64px;

  /* ---------- primitive · radius (px) ---------- */
  --radius-xs:6px; --radius-sm:8px; --radius-md:10px; --radius-lg:12px; --radius-xl:14px;
  --radius-2xl:16px; --radius-3xl:20px; --radius-4xl:24px; --radius-5xl:28px; --radius-pill:999px;

  /* ---------- primitive · type ---------- */
  --fs-caption:12px; --fs-sm:13px; --fs-base:14px; --fs-label:15px; --fs-body:16px; --fs-lg:18px;
  --fs-h3:21px; --fs-h2:22px; --fs-display-sm:28px; --fs-display:34px; --fs-hero:56px;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800; --fw-display:650;
  --lh-display:1.05; --lh-heading:1.25; --lh-snug:1.35; --lh-body:1.5;

  /* ---------- semantic · responsive layout ---------- */
  --layout-bp-compact-max:767px; --layout-bp-medium-min:768px; --layout-bp-expanded-min:1200px;
  --layout-top-nav-height:68px; --layout-page-gutter-medium:24px; --layout-page-gutter-expanded:40px;
  --layout-content-max:1180px; --layout-compatibility-max:480px; --layout-onboarding-medium-max:560px;
  --layout-onboarding-expanded-max:1120px; --layout-onboarding-flow-max:520px; --layout-billing-max:960px;
  --layout-dialog-max:560px;

  /* ================= SEMANTIC ================= */
  /* color · brand + accent */
  --color-action:var(--green-500);
  --color-action-pressed:var(--green-600);
  --color-action-deep:var(--green-700);
  --color-action-subtle:var(--green-50);
  --color-accent:var(--amber-500);
  --color-accent-subtle:var(--amber-50);
  --color-accent-deep:var(--amber-700);

  /* color · surface + border */
  --surface:var(--neutral-0);
  --surface-alt:var(--neutral-50);
  --surface-selected:var(--green-50);
  --border:var(--line);
  --border-strong:var(--neutral-200);

  /* color · text */
  --text-default:var(--neutral-900);
  --text-soft:var(--neutral-700);
  --text-muted:var(--neutral-500);
  --text-on-action:var(--white);
  --text-action:var(--green-700);
  --text-accent:var(--amber-700);

  /* color · functional status */
  --status-processing:var(--sky);
  --status-success:var(--green-700);
  --status-warn:var(--amber-500);
  --status-error:var(--coral);
  --status-draft:var(--neutral-400);

  /* radius */
  --radius-control:var(--radius-xl);
  --radius-media:var(--radius-2xl);
  --radius-sheet:var(--radius-4xl);
  --radius-float:var(--radius-5xl);
  --radius-chip:var(--radius-pill);

  /* size (px) */
  --size-cta:52px; --size-secondary:48px; --size-tertiary:44px; --size-input:50px;
  --size-segment:36px; --size-dock-tab:48px; --size-touch-min:44px;
  --icon-sm:16px; --icon-md:20px; --icon-lg:24px;
  --progress-track:3px; --max-flow-width:430px;

  /* type · families */
  --font-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;

  /* elevation */
  --shadow-card:0 1px 2px rgba(14,26,18,0.04), 0 14px 40px -24px rgba(14,26,18,0.18);
  --shadow-float:0 -8px 30px rgba(15,23,42,0.14), 0 2px 8px rgba(15,23,42,0.06);
  --shadow-glow-green:0 8px 22px rgba(52,195,99,0.40);
  --shadow-glow-amber:0 8px 22px rgba(245,184,0,0.30);

  /* motion */
  --dur-fast:140ms; --dur-base:200ms; --dur-slow:300ms; --dur-ambient:3500ms;
  --ease-standard:cubic-bezier(0.2,0.8,0.2,1);
  --ease-decelerate:cubic-bezier(0,0,0.2,1);
  --ease-screen:cubic-bezier(0.25,0.1,0.25,1);
  --press-control:0.965; --press-card:0.98;

  /* icon */
  --icon-stroke:1.5;

  /* signature canvas */
  --canvas:linear-gradient(180deg,#EEFFF4 0%,#F7FDF9 28%,#FFFFFF 60%,#FFFFFF 100%);
}