/* GENERATED by scripts/sync-design-system.sh — do not edit.
 *
 * The group's design system (common/gpm-design-system @ 0f09f79), copied in rather than
 * transcribed. Run the script to refresh it.
 *
 * tokens/fonts.css is not here on purpose: it @imports a remote stylesheet, and the page
 * links the font in <head> instead. Everything else is verbatim.
 */

/* ---------- tokens/colors.css ---------- */
/* ============================================================
   COLORS — GPM Personal Design System
   ------------------------------------------------------------
   The spine of the brand is a cool SLATE ink scale built around
   #0F172A — the neutral Synapsi uses (Tailwind slate), for tight
   harmony with the company brand. A single cyan accent (recalls Synapsi)
   carries links and primary actions. Everything else is restrained.
   Both light and dark foundations are defined.
   ============================================================ */

:root {
  /* ---- Slate ink scale (cool neutrals, aligned to Synapsi) ---- */
  --ink-950: #020617;
  --ink-900: #0F172A; /* Synapsi neutral — primary brand ink (slate-900) */
  --ink-800: #1E293B;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748B;
  --ink-400: #94A3B8;
  --ink-300: #CBD5E1;
  --ink-200: #E2E8F0;
  --ink-150: #E9EEF4;
  --ink-100: #F1F5F9;
  --ink-50:  #F8FAFC;

  /* ---- Cyan accent (recalls Synapsi · single tone, not the gradient) ----
     Tailwind cyan scale. The accent is cyan-700 (#0E7490): a clear nod to
     Synapsi's teal→cyan mark, dark enough to stay legible on white. */
  --cyan-900: #164E63;
  --cyan-800: #155E75;
  --cyan-700: #0E7490; /* primary accent */
  --cyan-600: #0891B2;
  --cyan-500: #06B6D4;
  --cyan-400: #22D3EE;
  --cyan-300: #67E8F9;
  --cyan-200: #A5F3FC;
  --cyan-100: #CFFAFE;
  --cyan-50:  #ECFEFF;

  /* ---- Warm signal (rare highlight: awards, "new", funding) ---- */
  --amber-600: #B45309;
  --amber-500: #D97706;
  --amber-100: #FBEAD2;

  /* ---- Partner brand · Synapsi (referenced, not GPM's own) ----
     Synapsi's mark is a teal→cyan gradient on a slate canvas. Use the COLOR
     mark on light surfaces; on slate-900 / near-black the default reads muddy,
     so switch to the on-dark variant (gradient lifted to teal-300 → cyan-300).
     Source of truth: Synapsi Design System v1.0 (2026). */
  --synapsi-teal: #14B8A6;       /* teal-500 */
  --synapsi-cyan: #0891B2;       /* cyan-500 */
  --synapsi-teal-300: #5EEAD4;
  --synapsi-cyan-300: #67E8F9;
  --synapsi-grad-light: linear-gradient(90deg, #14B8A6 0%, #0891B2 100%); /* @kind color */
  --synapsi-grad-dark: linear-gradient(90deg, #5EEAD4 0%, #67E8F9 100%); /* @kind color */

  /* ---- Semantic raw ---- */
  --green-600: #1F8A5B;
  --green-100: #D6F0E3;
  --red-600:   #C0392B;
  --red-100:   #F8DAD6;

  /* ---- Paper / surface (light foundation) ---- */
  --paper: #F8FAFC;

  /* ================= SEMANTIC ALIASES — LIGHT ================= */
  --bg:            var(--paper);
  --bg-inset:      var(--ink-50);
  --surface:       #FFFFFF;
  --surface-2:     var(--ink-50);
  --surface-sunken:#EEF2F7;

  --border:        var(--ink-150);
  --border-strong: var(--ink-200);
  --border-faint:  var(--ink-100);

  --text:          var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-inverse:  #FFFFFF;
  --text-on-accent:#FFFFFF;

  --accent:        var(--cyan-700);
  --accent-hover:  var(--cyan-800);
  --accent-press:  var(--cyan-900);
  --accent-soft:   var(--cyan-50);
  --accent-soft-border: var(--cyan-100);
  --link:          var(--cyan-800);

  --success:       var(--green-600);
  --success-soft:  var(--green-100);
  --danger:        var(--red-600);
  --danger-soft:   var(--red-100);
  --highlight:     var(--amber-500);
  --highlight-soft:var(--amber-100);

  --ring: color-mix(in oklab, var(--cyan-700) 40%, transparent);
  --selection: var(--cyan-100);
  --logo-cursor: var(--cyan-600); /* #0891B2 — brighter than --accent, closer to Synapsi mark */

  /* On-ink (for dark hero blocks placed in light mode) */
  --on-ink-text:   #F1F5F9;
  --on-ink-muted:  #94A3B8;
  --on-ink-border: rgba(255,255,255,0.12);
}

/* ===================== DARK FOUNDATION ===================== */
[data-theme="dark"] {
  --bg:            var(--ink-950);
  --bg-inset:      #010309;
  --surface:       #111B2E;
  --surface-2:     #1A2740;
  --surface-sunken:#0A1120;

  --border:        #283449;
  --border-strong: #3A4862;
  --border-faint:  #1B2740;

  --text:          #F1F5F9;
  --text-muted:    #94A3B8;
  --text-subtle:   #64748B;
  --text-inverse:  var(--ink-900);

  --text-on-accent:#04121A;

  --accent:        var(--cyan-400);
  --accent-hover:  var(--cyan-300);
  --accent-press:  var(--cyan-500);
  --accent-soft:   rgba(34,211,238,0.14);
  --accent-soft-border: rgba(34,211,238,0.30);
  --link:          var(--cyan-300);

  --success:       #34B27B;
  --success-soft:  rgba(52,178,123,0.16);
  --danger:        #E2604F;
  --danger-soft:   rgba(226,96,79,0.16);
  --highlight:     #E89A3C;
  --highlight-soft:rgba(232,154,60,0.16);

  --ring: color-mix(in oklab, var(--cyan-400) 55%, transparent);
  --selection: rgba(34,211,238,0.26);
  --logo-cursor: var(--cyan-300); /* #67E8F9 — bright cursor on dark */

  --on-ink-text:   #F1F5F9;
  --on-ink-muted:  #94A3B8;
  --on-ink-border: rgba(255,255,255,0.12);
}

/* ---------- tokens/typography.css ---------- */
/* ============================================================
   TYPOGRAPHY — GPM Personal Design System
   ------------------------------------------------------------
   Mono-famiglia: Geist does both display and body. Headings get
   weight 700/800 with tight tracking; body stays 400/500. The only
   other voice is Geist Mono for labels, dates, code & the logo.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Roboto Mono', monospace;

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* ---- Display / heading scale (px) ---- */
  --fs-display-2xl: 72px;
  --fs-display-xl: 56px;
  --fs-display-lg: 44px;
  --fs-h1: 36px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;

  /* ---- Body & support ---- */
  --fs-body-lg: 19px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-mono-label: 12px;

  /* ---- Line heights ---- */
  --lh-tight: 1.04; /* @kind font */
  --lh-snug: 1.18; /* @kind font */
  --lh-heading: 1.25; /* @kind font */
  --lh-body: 1.6; /* @kind font */
  --lh-relaxed: 1.72; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tight: -0.022em;
  --ls-snug: -0.012em;
  --ls-normal: 0em;
  --ls-label: 0.08em;   /* mono uppercase labels */
  --ls-caps: 0.04em;
}

/* ============================================================
   Optional utility classes — convenience for specimens & kits.
   Consumers can also just use the variables directly.
   ============================================================ */

.t-display-2xl { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display-2xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.t-display-xl  { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display-xl);  line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.t-display-lg  { font-family: var(--font-display); font-weight: var(--fw-semibold);   font-size: var(--fs-display-lg);  line-height: var(--lh-snug);  letter-spacing: var(--ls-tight); }
.t-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); }
.t-h2 { font-family: var(--font-display); font-weight: var(--fw-semibold);   font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-snug); }
.t-h3 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }
.t-h4 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-snug); }

.t-body-lg { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.t-body    { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body);    line-height: var(--lh-body); }
.t-body-sm { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.t-caption { font-family: var(--font-sans); font-weight: var(--fw-medium);  font-size: var(--fs-caption); line-height: 1.4; }

.t-mono-label {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-mono-label);
  line-height: 1.3;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.t-quote {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
}

/* ---------- tokens/spacing.css ---------- */
/* ============================================================
   SPACING, RADII, SHADOWS, LAYOUT — GPM Personal Design System
   ------------------------------------------------------------
   4px base grid. Editorial layout favors generous whitespace and
   a constrained reading measure. Shadows are quiet and cool-tinted;
   the brand leans on hairline borders more than elevation.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;
  --space-14: 160px;

  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Border widths ---- */
  --border-hairline: 1px;
  --border-thick: 1.5px;

  /* ---- Shadows (cool slate-tinted, restrained) ---- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10), 0 4px 8px rgba(16, 24, 40, 0.05);
  --shadow-xl: 0 24px 56px rgba(16, 24, 40, 0.14), 0 8px 16px rgba(16, 24, 40, 0.06);
  --shadow-focus: 0 0 0 3px var(--ring);

  /* ---- Layout ---- */
  --measure: 68ch;          /* ideal reading width for prose */
  --container: 1120px;      /* main content container */
  --container-wide: 1280px; /* wide / marketing container */
  --container-narrow: 720px;/* article / single-column */
  --gutter: 24px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}

[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.60), 0 8px 16px rgba(0, 0, 0, 0.40);
}

/* ---------- tokens/base.css ---------- */
/* ============================================================
   BASE — element defaults for the GPM Personal Design System.
   Light, non-invasive resets so consumer pages inherit the brand
   typographic + color baseline. Only element selectors here.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

::selection { background: var(--selection); }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
}

p { margin: 0; }

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
a:hover { text-decoration: underline; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

hr {
  border: none;
  border-top: var(--border-hairline) solid var(--border);
  margin: var(--space-8) 0;
}

img, svg, video { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Prose container — comfortable editorial reading column */
.prose {
  max-width: var(--measure);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text);
}
.prose p + p { margin-top: var(--space-5); }
.prose h2 { margin: var(--space-9) 0 var(--space-4); font-size: var(--fs-h2); }
.prose h3 { margin: var(--space-7) 0 var(--space-3); font-size: var(--fs-h3); font-family: var(--font-sans); }
.prose a { color: var(--link); text-decoration: underline; text-decoration-color: var(--cyan-200); }
.prose a:hover { text-decoration-color: currentColor; }

/* ---------- dark, again, for a page that is following the system ---------- */
/* The one transformation in this file, and it is mechanical: the declarations under
 * [data-theme="dark"] repeated under prefers-color-scheme, so a page nobody has told
 * which scheme to be still follows the device. Guarded, so an explicit light choice wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            var(--ink-950);
    --bg-inset:      #010309;
    --surface:       #111B2E;
    --surface-2:     #1A2740;
    --surface-sunken:#0A1120;
  
    --border:        #283449;
    --border-strong: #3A4862;
    --border-faint:  #1B2740;
  
    --text:          #F1F5F9;
    --text-muted:    #94A3B8;
    --text-subtle:   #64748B;
    --text-inverse:  var(--ink-900);
  
    --text-on-accent:#04121A;
  
    --accent:        var(--cyan-400);
    --accent-hover:  var(--cyan-300);
    --accent-press:  var(--cyan-500);
    --accent-soft:   rgba(34,211,238,0.14);
    --accent-soft-border: rgba(34,211,238,0.30);
    --link:          var(--cyan-300);
  
    --success:       #34B27B;
    --success-soft:  rgba(52,178,123,0.16);
    --danger:        #E2604F;
    --danger-soft:   rgba(226,96,79,0.16);
    --highlight:     #E89A3C;
    --highlight-soft:rgba(232,154,60,0.16);
  
    --ring: color-mix(in oklab, var(--cyan-400) 55%, transparent);
    --selection: rgba(34,211,238,0.26);
    --logo-cursor: var(--cyan-300); /* #67E8F9 — bright cursor on dark */
  
    --on-ink-text:   #F1F5F9;
    --on-ink-muted:  #94A3B8;
    --on-ink-border: rgba(255,255,255,0.12);
  }
  :root:not([data-theme="light"]) {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.60), 0 8px 16px rgba(0, 0, 0, 0.40);
  }
}