/* ============================================================
   TOGLO · BRAND TOKENS for the marketing website
   ------------------------------------------------------------
   SYNCED FROM the Design System v2.0 canonical tokens at:
     11 — Marketing/Brand Assets/Design System v2.0/TOGLO Design System/tokens/
     (colors.css · typography.css · spacing.css · fonts.css)
   This is the SINGLE SOURCE OF TRUTH bridge for the site.

   1:1 with the system (do not drift): all COLOURS, TINTS, SEMANTIC
   COLOUR ALIASES, TYPOGRAPHY (families, weights, scale, roles), RADII,
   and the canonical 8-pt SPACING scale (--space-*).

   Intentionally SITE-TUNED (marketing feel, kept on purpose):
     --shadow-foil (richer hero-CTA glow), --container (1120),
     --ease-emphasized, and the --icon-* animation channel.

   Re-sync after the design system changes by copying values from the
   token files above. Use var(--*) everywhere — never hardcode hex/spacing.
   Last synced: 29 June 2026 · DS v2.0.
   ============================================================ */
:root {
  /* ---- Premium · indigos ---- */
  --indigo: #211B4E;
  --indigo-2: #2E2566;
  --indigo-deep: #15103A;
  --plum: #4B2E83;

  /* ---- Premium · golds ---- */
  --gold: #D9A441;
  --gold-lite: #F2D08A;
  --gold-deep: #A97C22;

  /* ---- Neutrals · warm ---- */
  --ink: #1A1712;
  --slate: #5A5346;
  --muted: #8C8270;
  --line: #E7DCC6;
  --cream-2: #F3EADB;
  --cream: #FBF6EC;
  --white: #FFFFFF;

  /* ---- Playful · Crew (kids only); held back on the site, Coral bridges ---- */
  --sun: #FFB22E;
  --coral: #FF6B5E;
  --rose: #E0357B;
  --pop-teal: #16B8A6;

  /* ---- Semantic ---- */
  --success: #0C7A6E;        /* success TEXT */
  --success-fill: #16B8A6;   /* pop-teal is FILL-only, never text */
  --warning: #A97C22;
  --danger: #D7263D;

  /* ---- Soft tint surfaces — canonical solid warm tints ---- */
  --tint-gold: #F6ECD6;
  --tint-coral: #FFE9E6;
  --tint-indigo: #E9E6F4;
  --tint-teal: #E4F7F4;
  --tint-warn: #FCF6E8;
  --tint-danger: #FCE9EC;

  /* ---- Signature gradients ---- */
  --grad-foil: linear-gradient(120deg, #F2D08A 0%, #D9A441 45%, #A97C22 100%);
  --grad-night: linear-gradient(160deg, #211B4E 0%, #4B2E83 100%);
  --grad-crew: linear-gradient(140deg, #FFB22E 0%, #FF6B5E 55%, #E0357B 100%);

  /* ---- On-colour labels ---- */
  --on-gold: var(--indigo);
  --on-indigo: var(--gold-lite);
  --text-on-gold: var(--indigo);
  --text-on-indigo: #FBF6EC;

  /* ---- Semantic colour aliases (prefer these) ---- */
  --bg-app: var(--cream);
  --bg-ritual: var(--indigo);
  --surface-card: var(--white);
  --surface-sunk: var(--cream-2);
  --surface-lux: #FCF6E8;
  --text-strong: var(--ink);
  --text-body: var(--slate);
  --text-muted: var(--muted);
  --text-link: var(--gold-deep);
  --border-hairline: var(--line);
  --border-lux: #EAD9AE;
  --accent-brand: var(--gold);
  --accent-crew: var(--coral);
  --eyebrow: var(--gold-deep);

  /* ============================================================
     TYPOGRAPHY (1:1 with the system)
     ============================================================ */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-num: 'Nunito', system-ui, sans-serif;
  --font-heading: var(--font-display);
  --font-body: var(--font-ui);
  --font-score: var(--font-num);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --fs-display: 62px;
  --fs-h1: 38px;
  --fs-h2: 32px;
  --fs-h3: 23px;
  --fs-title: 18px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-eyebrow: 11px;

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.55;
  --ls-tight: -0.01em;
  --ls-eyebrow: 0.18em;
  --ls-caps: 0.04em;

  /* ============================================================
     SPACING — canonical 8-pt scale (1:1 with the system)
     ============================================================ */
  --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;

  /* legacy site spacing aliases (back-compat; prefer --space-*) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s8: 48px; --s10: 64px; --s12: 96px;

  /* ---- Corner radii (1:1) ---- */
  --radius-control: 16px;
  --radius-card: 22px;
  --radius-feature: 30px;
  --radius-pill: 999px;
  --radius-sm: 12px;

  /* ---- Elevation (shadow-1..3 are 1:1; shadow-foil is site-tuned) ---- */
  --shadow-1: 0 1px 3px rgba(33, 27, 18, .07);
  --shadow-2: 0 10px 30px rgba(33, 27, 18, .10);
  --shadow-3: 0 24px 60px rgba(33, 27, 78, .20);
  --shadow-foil: 0 12px 34px rgba(217, 164, 65, .34);

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --dur-celebrate: 640ms;
  --ease-standard: cubic-bezier(.22, .61, .36, 1);
  --ease-emphasized: cubic-bezier(.2, .9, .1, 1);
  --ease-overshoot: cubic-bezier(.34, 1.32, .64, 1);
  --spring: cubic-bezier(.34, 1.56, .5, 1);
  --press-scale: .97;

  /* ---- Hit targets ---- */
  --target-min: 44px;
  --target-crew: 60px;

  /* ---- Layout ---- */
  --container: 1120px;
  --maxw-page: 1080px;
  --maxw-prose: 64ch;
  --nav-h: 68px;

  /* ---- Icon animation channel (calm on Captain/brand) ---- */
  --icon-amp: 8deg;
  --icon-spd: 6s;
  --icon-pop: 1.15;
}