/* ============================================================
   Leap Design System — Global tokens & type ("Nimbus direction")
   AI-powered social publishing · Post less. Reach further.
   Applied over the cockpit's semantic variable contract, so every
   component re-skins from these tokens.
   ============================================================ */

/* Sora (display/numerals), Inter (UI/body), IBM Plex Mono (labels) */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* Shared page content width — every top-level view uses this so pages align
     and fill consistently regardless of tab. Tune here in one place. */
  --page-w: 1240px;
  /* ---- Leap brand palette (brand guide 02 · Colour) ---- */
  --leap-sky:   #38BDF8;   /* Support tint only — light accents, never a lead surface (DS) */
  --leap-coral: #FCA5A5;   /* Accent — engagement only: likes, comments, mentions (DS) */
  --leap-teal:  #0EA5B7;   /* PRIMARY — brand, buttons, icons (DS) */
  --leap-deep:  #0B3B42;   /* Ink — text, dark surfaces, gradient anchor */
  --leap-air:   #F1FBFD;   /* Tinted surface — tiles, backgrounds */
  --white:      #FFFFFF;
  --black:      #0B3B42;

  /* ---- Sky ramp (derived from #38BDF8) ---- */
  --blue-50:   #F1FBFD;
  --blue-100:  #E1F4FC;
  --blue-200:  #BFE8FA;
  --blue-300:  #8FD6F5;
  --blue-400:  #56C4F1;
  --blue-500:  #38BDF8;
  --blue-600:  #0F97D4;
  --blue-700:  #0EA5B7;   /* teal */
  --blue-800:  #1F7FB8;
  --blue-900:  #0B3B42;

  /* ---- Neutral ramp (cool, guide neutrals) ---- */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #FBFDFE;   /* canvas */
  --neutral-100:  #F1FBFD;   /* air */
  --neutral-150:  #EEF1F3;   /* shell */
  --neutral-200:  #E7E9EE;   /* hairline */
  --neutral-300:  #D5DBE0;
  --neutral-400:  #9AA6AD;
  --neutral-500:  #6B7280;   /* muted text */
  --neutral-600:  #516067;
  --neutral-700:  #33474D;   /* body ink */
  --neutral-800:  #123037;
  --neutral-900:  #0B3B42;   /* deep ink */

  /* ---- Semantic status (ink-on-tint pairs) ---- */
  --success:    #16A34A;
  --success-bg: #E9F9EC;
  --danger:     #DC2626;
  --danger-bg:  #FDEEF0;
  --warning:    #E8850C;
  --warning-bg: #FDF1E3;
  --info:       #0EA5B7;

  /* ---- Foreground / background semantic tokens (light) ---- */
  --bg:          #FFFFFF;   /* app canvas — white */
  --bg-subtle:   #FFFFFF;   /* was #F1FBFD air tint → white */
  --bg-muted:    #EEF1F3;   /* shell */
  --surface:     #FFFFFF;   /* cards */
  --surface-2:   #F1FBFD;
  --fg1:         #0B3B42;   /* primary text (deep teal ink) */
  --fg2:         #33474D;   /* body */
  --fg3:         #6B7280;   /* muted / meta */
  --fg4:         #9AA6AD;   /* disabled / placeholder */
  --on-brand:    #FFFFFF;
  --border:      #E7E9EE;   /* hairline — the border does the work */
  --border-strong: #D5DBE0;
  --accent:      #0EA5B7;   /* interactive / links / active — DS primary teal */
  --accent-hover:#0D7F8D;   /* DS link / darker teal on hover */
  --accent-press:#0B3B42;   /* press darkens to deep ink */
  --accent-weak: #E6F4F6;   /* light teal wash behind active/weak accent */

  /* ---- Gradients (always warm-cool teal→pink; no purple) ---- */
  --gradient-core: linear-gradient(120deg, #0B3B42 0%, #0EA5B7 100%);           /* @kind color */  /* DS signature: buttons, media, avatars */
  --gradient-soft: linear-gradient(135deg, #0EA5B7 0%, #38BDF8 100%);           /* @kind color */  /* teal → sky support tint */
  --gradient-hero: linear-gradient(140deg, #0B3B42 0%, #0E6B78 52%, #0EA5B7 100%); /* @kind color */ /* DS cover ramp */
  --gradient-mark: linear-gradient(135deg, #0B3B42 0%, #0EA5B7 100%);           /* @kind color */  /* logo tile */

  /* ---- Typography ---- */
  --font-display: 'Sora', ui-sans-serif, system-ui, -apple-system, sans-serif;  /* headings, numerals, wordmark */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* type scale (Leap: Sora display / Inter text) */
  --text-display:  52px;
  --text-h1:       34px;
  --text-h2:       26px;
  --text-h3:       18px;
  --text-h4:       16px;
  --text-lg:       16px;
  --text-base:     15px;
  --text-sm:       13px;
  --text-xs:       12px;
  --text-2xs:      11px;

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.55;
  --leading-relaxed:1.65;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.14em;   /* mono eyebrow/caption tracking */

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:700;
  --weight-black:    700;

  /* ---- Spacing (4px base — cockpit rhythm) ---- */
  --space-0:  0px;
  --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;

  /* ---- Radii (Leap: nothing square, nothing past 22px but pills) ---- */
  --radius-xs:  9px;
  --radius-sm:  10px;
  --radius-md:  12px;
  --radius-lg:  14px;
  --radius-xl:  18px;
  --radius-2xl: 22px;   /* canonical Leap card */
  --radius-pill: 100px;

  /* ---- Elevation: shadow is rare; a coloured teal glow on hover only ---- */
  --shadow-xs:  none;
  --shadow-sm:  0 1px 2px rgba(11,59,66,0.04);
  --shadow-md:  0 10px 24px -18px rgba(14,165,183,0.45);
  --shadow-lg:  0 14px 30px -20px rgba(14,165,183,0.50);
  --shadow-xl:  0 24px 50px -24px rgba(11,59,66,0.30);
  --shadow-brand: 0 14px 30px -20px rgba(14,165,183,0.60);  /* the signature lift glow */
  --ring-focus: 0 0 0 3px rgba(56,189,248,0.32);

  /* ---- Motion (restrained; −2px lift is the one signature move) ---- */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);   /* @kind other */
  --ease-emphasized: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --dur-fast: 160ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 260ms; /* @kind other */

  --maxw-content: 1080px;
}

/* ---- Dark surface tokens (opt-in via .cropr-dark) — Leap deep-teal ---- */
.cropr-dark {
  --bg:          #082930;
  --bg-subtle:   #0B3B42;
  --bg-muted:    #0E454E;
  --surface:     #0B3B42;
  --surface-2:   #0E454E;
  --fg1:         #F1FBFD;
  --fg2:         #C7D6DA;
  --fg3:         #9AB0B5;
  --fg4:         #6E8990;
  --border:      #1C5058;
  --border-strong: #0EA5B7;
  --accent-weak: #0E454E;
}

/* ============================================================
   Semantic element styles — apply the brand without utility soup
   ============================================================ */
.cropr {
  font-family: var(--font-sans);
  color: var(--fg2);
  background: var(--bg);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Sora carries display + all product headings */
.cropr h1, .cropr h2, .cropr h3, .cropr h4 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--fg1); }
.cropr .display { font-family: var(--font-display); font-size: var(--text-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: var(--weight-bold); }
.cropr h1 { font-size: var(--text-h1); line-height: var(--leading-tight);  letter-spacing: var(--tracking-tight); }
.cropr h2 { font-size: var(--text-h2); line-height: var(--leading-snug);   letter-spacing: var(--tracking-snug); }
.cropr h3 { font-size: var(--text-h3); line-height: var(--leading-snug);   letter-spacing: var(--tracking-snug); font-weight: var(--weight-semibold); }
.cropr h4 { font-size: var(--text-h4); line-height: var(--leading-snug);   font-weight: var(--weight-semibold); }
.cropr p  { margin: 0; color: var(--fg2); }

/* Mono label layer — eyebrows, captions, badges (always uppercase) */
.cropr .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}
.cropr .meta { font-size: var(--text-sm); color: var(--fg3); }
.cropr .num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--tracking-snug);
}
.cropr code, .cropr .mono { font-family: var(--font-mono); font-size: 0.92em; }

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