/* ============================================================
   Framer Design System — colors, type, spacing, radius, shadow
   Dark-only. Black canvas + white display + single blue accent.
   ============================================================ */

/* --- Font imports ----------------------------------------- */
/* Inter Variable: open-source body face. Used everywhere body type appears. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap');
/* Mona Sans: open-source display substitute for GT Walsheim Medium. */
@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');

:root {
  /* ---------- COLOR ---------- */
  /* Brand & accent */
  --color-primary: #FFFFFF;           /* {colors.primary} — pure white */
  --color-on-primary: #0A0A0A;        /* text on white pills */
  --color-accent-blue: #0099FF;       /* {colors.accent-blue} — hyperlinks, focus, selection only */

  /* Surface lift (canvas → surface-1 → surface-2) */
  --color-canvas: #0A0A0A;            /* {colors.canvas} — near-black with faint warmth */
  --color-surface-1: #161616;         /* {colors.surface-1} — pricing card, secondary pill */
  --color-surface-2: #232323;         /* {colors.surface-2} — featured card, hero pill backdrop */
  --color-inverse-canvas: #FFFFFF;    /* {colors.inverse-canvas} — white surfaces */

  /* Hairlines */
  --color-hairline: rgba(255, 255, 255, 0.10);       /* 1px input/table borders */
  --color-hairline-soft: rgba(255, 255, 255, 0.06);  /* FAQ/footer dividers */

  /* Text */
  --color-ink: #FFFFFF;               /* {colors.ink} — all headlines + emphasized body */
  --color-ink-muted: #999999;         /* {colors.ink-muted} — meta, footer, deselected */

  /* Semantic */
  --color-success: #29CC6A;           /* {colors.semantic-success} — pricing checkmarks */

  /* Brand gradient anchors (treat as base colors, not exact gradients) */
  --color-gradient-violet: #6B4BFF;
  --color-gradient-magenta: #E040A0;
  --color-gradient-orange: #FF7A2E;
  --color-gradient-coral: #FF6A8A;

  /* Composed gradients (the on-site cards are bespoke linear-gradient strings) */
  --gradient-violet: radial-gradient(120% 100% at 20% 10%, #8B6BFF 0%, #5B3BEF 45%, #2A1A8A 100%);
  --gradient-magenta: radial-gradient(120% 100% at 80% 20%, #FF6BC4 0%, #C0309A 50%, #5B1A6A 100%);
  --gradient-orange: radial-gradient(120% 100% at 30% 20%, #FFB76B 0%, #FF6A2A 50%, #B83A1A 100%);
  --gradient-coral: radial-gradient(120% 100% at 70% 30%, #FF9CB0 0%, #FF5A78 50%, #B02A4A 100%);

  /* ---------- TYPE ---------- */
  --font-display: 'Mona Sans', 'GT Walsheim Medium', 'GT Walsheim Framer Medium', system-ui, sans-serif;
  --font-body: 'Inter', 'Inter Variable', system-ui, -apple-system, sans-serif;

  /* Size · weight · line-height · letter-spacing per tier */
  --type-display-xxl-size: 110px;
  --type-display-xxl-tracking: -5.5px;   /* ~ -5% */
  --type-display-xl-size: 85px;
  --type-display-xl-tracking: -4.25px;
  --type-display-lg-size: 62px;
  --type-display-lg-tracking: -3.1px;
  --type-display-md-size: 32px;
  --type-display-md-tracking: -1.0px;
  --type-headline-size: 22px;
  --type-headline-tracking: -0.8px;
  --type-subhead-size: 24px;
  --type-subhead-tracking: -0.01px;
  --type-body-lg-size: 18px;
  --type-body-lg-tracking: -0.18px;
  --type-body-size: 15px;
  --type-body-tracking: -0.15px;
  --type-body-sm-size: 14px;
  --type-body-sm-tracking: -0.14px;
  --type-caption-size: 13px;
  --type-caption-tracking: -0.13px;
  --type-micro-size: 12px;
  --type-micro-tracking: -0.12px;
  --type-button-size: 14px;
  --type-button-tracking: -0.14px;

  /* Inter character-variant stack — the brand voice depends on these */
  --inter-features: "cv01", "cv05", "cv09", "cv11", "ss03", "ss07", "dlig";

  /* ---------- SPACING (base 5px) ---------- */
  --space-hair: 1px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 15px;
  --space-lg: 20px;
  --space-xl: 30px;
  --space-xxl: 40px;
  --space-section: 96px;

  /* ---------- RADIUS ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-xxl: 30px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  /* ---------- ELEVATION ---------- */
  --shadow-0: none;
  --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.06);                       /* charcoal lift */
  --shadow-2: inset 0 1px 0 rgba(255, 255, 255, 0.10),                  /* light edge */
              0 10px 30px rgba(0, 0, 0, 0.25);                           /* drop */
  --shadow-focus: 0 0 0 1px rgba(0, 153, 255, 0.15);                     /* blue ring */
  --shadow-active-marker: 0 0 0 2px rgba(0, 0, 0, 0.85);                 /* thick near-black outline */
}

/* ============================================================
   Base element styles
   ============================================================ */

html, body {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-feature-settings: var(--inter-features);
  font-size: var(--type-body-size);
  line-height: 1.30;
  letter-spacing: var(--type-body-tracking);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type ramps ---------- */
.t-display-xxl,
h1.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-xxl-size);
  line-height: 0.85;
  letter-spacing: var(--type-display-xxl-tracking);
  color: var(--color-ink);
}

.t-display-xl, h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-xl-size);
  line-height: 0.95;
  letter-spacing: var(--type-display-xl-tracking);
  color: var(--color-ink);
}

.t-display-lg, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-lg-size);
  line-height: 1.00;
  letter-spacing: var(--type-display-lg-tracking);
  color: var(--color-ink);
}

.t-display-md, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-md-size);
  line-height: 1.13;
  letter-spacing: var(--type-display-md-tracking);
  color: var(--color-ink);
}

.t-headline, h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--type-headline-size);
  line-height: 1.20;
  letter-spacing: var(--type-headline-tracking);
  color: var(--color-ink);
}

.t-subhead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-subhead-size);
  line-height: 1.30;
  letter-spacing: var(--type-subhead-tracking);
  color: var(--color-ink);
}

.t-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-body-lg-size);
  line-height: 1.30;
  letter-spacing: var(--type-body-lg-tracking);
  color: var(--color-ink);
}

.t-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-body-size);
  line-height: 1.30;
  letter-spacing: var(--type-body-tracking);
  color: var(--color-ink);
}

.t-body-sm {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--type-body-sm-size);
  line-height: 1.40;
  letter-spacing: var(--type-body-sm-tracking);
  color: var(--color-ink);
}

.t-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--type-caption-size);
  line-height: 1.20;
  letter-spacing: var(--type-caption-tracking);
  color: var(--color-ink-muted);
}

.t-micro {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-micro-size);
  line-height: 1.20;
  letter-spacing: var(--type-micro-tracking);
  color: var(--color-ink-muted);
}

.t-muted { color: var(--color-ink-muted); }

/* ---------- Anchor / focus ---------- */
a {
  color: var(--color-accent-blue);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ---------- Selection ---------- */
::selection {
  background: rgba(0, 153, 255, 0.30);
  color: var(--color-ink);
}