/* INSINIO Design System V2 — tokens (flattened, single file).
   Source: Claude Design project 'INSINIO Design System V2', tokens/*.css.
   Fonts: Bricolage Grotesque (display), Manrope (body), JetBrains Mono — Google Fonts CDN.
   Never use font weights 300 or 900: neither family ships them. */

:root {
  /* ── colors ── */
  --lime-wave: #aaf866;
  --peach-flow: #ffab7d;
  --navy-deep: #162372;
  --sand: #f1e9d6;
  --lime-100: #f0fde3;
  --lime-200: #ddfbc2;
  --lime-300: #c8f99a;
  --lime-400: #aaf866;
  --lime-500: #93e94a;
  --lime-600: #74c930;
  --lime-700: #549a20;
  --peach-100: #fff3ec;
  --peach-200: #ffe1cf;
  --peach-300: #ffc7a8;
  --peach-400: #ffab7d;
  --peach-500: #fb8d55;
  --peach-600: #e56f36;
  --peach-700: #b95322;
  --navy-100: #e7e9f4;
  --navy-200: #c3c8e5;
  --navy-300: #8f98cb;
  --navy-400: #5b67ab;
  --navy-500: #2f3d88;
  --navy-600: #162372;
  --navy-700: #0e1750;
  --navy-800: #080e33;
  --ink: #111111;
  --white: #ffffff;
  --grey-050: #f8f8f8;
  --grey-100: #f3f3f3;
  --grey-200: #e7e7e7;
  --grey-300: #d2d2d2;
  --grey-400: #a8a8a8;
  --grey-500: #7a7a7a;
  --grey-600: #4f4f4f;
  --grey-700: #2b2b2b;
  --text-strong: var(--navy-deep);
  --text-body: var(--grey-700);
  --text-muted: var(--grey-500);
  --text-inverse: var(--white);
  --text-on-lime: var(--navy-deep);
  --text-on-peach: var(--navy-deep);
  --text-link: var(--navy-deep);
  --text-link-hover: var(--navy-400);
  --surface-page: var(--grey-100);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--grey-050);
  --surface-sand: var(--sand);
  --surface-invert: var(--ink);
  --surface-brand: var(--navy-deep);
  --surface-accent: var(--lime-wave);
  --surface-accent-soft: var(--lime-100);
  --surface-peach-soft: var(--peach-100);
  --border-hairline: var(--grey-200);
  --border-default: var(--grey-300);
  --border-strong: var(--ink);
  --border-brand: var(--navy-deep);
  --focus-ring: var(--navy-400);
  --action-primary-bg: var(--navy-deep);
  --action-primary-bg-hover: var(--navy-500);
  --action-primary-fg: var(--white);
  --action-accent-bg: var(--lime-wave);
  --action-accent-bg-hover: var(--lime-500);
  --action-accent-fg: var(--navy-deep);
  --action-quiet-bg: transparent;
  --action-quiet-bg-hover: var(--grey-200);
  --status-success: var(--lime-700);
  --status-success-soft: var(--lime-100);
  --status-warning: var(--peach-600);
  --status-warning-soft: var(--peach-100);
  --status-danger: #c0392b;
  --status-danger-soft: #fdecea;
  --status-info: var(--navy-500);
  --status-info-soft: var(--navy-100);
  --gradient-flow: linear-gradient(115deg,#aaf866 0%,#d1ce81 38%,#ecba88 62%,#f5a991 100%);
  --gradient-flow-soft: linear-gradient(115deg,#ddfbc2 0%,#f1e9d6 50%,#ffe1cf 100%);
  --gradient-protect: linear-gradient(to top,rgba(8,14,51,.72) 0%,rgba(8,14,51,0) 100%);
  --brand-artwork: url("assets/brand-gradient.png");

  /* ── typography ── */
  --font-display: "Bricolage Grotesque",system-ui,sans-serif;
  --font-body: "Manrope",system-ui,sans-serif;
  --font-mono: "JetBrains Mono",ui-monospace,monospace;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --type-display-1: 700 64px/1.02 var(--font-display);
  --type-display-2: 700 48px/1.06 var(--font-display);
  --type-h1: 700 36px/1.12 var(--font-display);
  --type-h2: 600 28px/1.18 var(--font-display);
  --type-h3: 600 22px/1.24 var(--font-display);
  --type-h4: 600 18px/1.3 var(--font-display);
  --type-overline: 600 12px/1.2 var(--font-display);
  --type-body-lg: 400 18px/1.6 var(--font-body);
  --type-body: 400 15px/1.6 var(--font-body);
  --type-body-sm: 400 13px/1.55 var(--font-body);
  --type-label: 600 13px/1.3 var(--font-body);
  --type-caption: 400 12px/1.4 var(--font-body);
  --type-mono: 400 13px/1.5 var(--font-mono);
  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-overline: 0.14em;

  /* ── spacing ── */
  --space-0: 0;
  --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;
  --space-20: 80px;
  --space-24: 96px;
  --gutter: 24px;
  --page-pad: 32px;
  --page-pad-mobile: 20px;
  --container-max: 1200px;
  --container-narrow: 720px;
  --section-y: 96px;
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;

  /* ── radius ── */
  --radius-0: 0;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-control: 999px;
  --radius-field: 10px;
  --radius-app-icon: 22px;
  --border-width: 1px;
  --border-width-strong: 2px;

  /* ── elevation ── */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(8,14,51,.06);
  --shadow-sm: 0 2px 6px rgba(8,14,51,.07);
  --shadow-md: 0 6px 18px rgba(8,14,51,.08);
  --shadow-lg: 0 16px 40px rgba(8,14,51,.12);
  --shadow-lift: 0 10px 28px rgba(8,14,51,.14);
  --shadow-inset-hairline: inset 0 0 0 1px rgba(8,14,51,.07);
  --shadow-focus: 0 0 0 3px rgba(91,103,171,.35);
  --blur-glass: blur(14px);
  --glass-fill: rgba(255,255,255,.72);
  --glass-fill-dark: rgba(8,14,51,.5);

  /* ── motion ── */
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(0,.55,.45,1);
  --ease-in-out: cubic-bezier(.45,0,.55,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --dur-flow: 14s;
  --press-scale: 0.97;
  --hover-lift: -2px;
}