/* ============================================================
   Sporara Design Tokens
   Drop-in CSS. Import once at the top of your stylesheet:
     @import url('./colors_and_type.css');
   Then use the variables. Defaults to light theme.
   ============================================================ */

/* Google Fonts head'de ayrı (render-blocking olmayan) <link> ile yükleniyor —
   @import zincirini kırıp LCP (hero h1) gecikmesini azaltmak için. */

:root {
  /* ---------- Brand palette (locked) ---------- */
  --sp-blue:        #0066ff;          /* primary, immutable */
  --sp-blue-700:    #0052CC;
  --sp-blue-900:    #003A99;
  --sp-blue-100:    #DBE8FF;
  --sp-blue-50:     #EEF4FF;

  --sp-lime:        #d7ff66;          /* accent, neon — tone may flex slightly */
  --sp-lime-600:    #B8E83A;
  --sp-lime-200:    #ECFFAA;

  --sp-ink:         #0A0F1C;          /* near-black, blue undertone */
  --sp-ink-soft:    #1B2333;

  --sp-white:       #FFFFFF;
  --sp-surface:     #F4F6FA;          /* cool off-white — default page bg */
  --sp-surface-2:   #EAEEF6;
  --sp-line:        #E2E7F0;          /* default 1px borders */
  --sp-line-strong: #C9D2E0;

  --sp-mute:        #6B7488;          /* secondary text */
  --sp-mute-2:      #98A0B3;          /* tertiary text / placeholder */

  --sp-success:     #14C27A;
  --sp-warn:        #F4B400;
  --sp-error:       #E5484D;

  /* ---------- Semantic ---------- */
  --bg:             var(--sp-surface);
  --bg-elevated:    var(--sp-white);
  --fg:             var(--sp-ink);
  --fg-soft:        var(--sp-ink-soft);
  --fg-mute:        var(--sp-mute);
  --fg-faint:       var(--sp-mute-2);
  --link:           var(--sp-blue);
  --link-hover:     var(--sp-blue-700);
  --border:         var(--sp-line);
  --border-strong:  var(--sp-line-strong);
  --accent:         var(--sp-lime);
  --accent-on:      var(--sp-ink);

  /* ---------- Typography stacks ---------- */
  --font-display:   'Bricolage Grotesque', 'Hanken Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-text:      'Hanken Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale (rem-based, 16px root) ----------
     Display sizes use Bricolage with tight tracking;
     text sizes use Hanken with comfortable tracking.
  ------------------------------------------------------- */
  --fs-display-xl: 5.5rem;   /* 88px — hero */
  --fs-display-l:  4rem;     /* 64px */
  --fs-display-m:  3rem;     /* 48px */
  --fs-h1:         2.25rem;  /* 36px */
  --fs-h2:         1.75rem;  /* 28px */
  --fs-h3:         1.375rem; /* 22px */
  --fs-h4:         1.125rem; /* 18px */
  --fs-body:       1rem;     /* 16px */
  --fs-body-sm:    0.9375rem;/* 15px */
  --fs-small:      0.8125rem;/* 13px */
  --fs-micro:      0.6875rem;/* 11px — uppercase eyebrow */

  --lh-tight:      1.0;
  --lh-snug:       1.1;
  --lh-display:    1.05;
  --lh-heading:    1.2;
  --lh-body:       1.55;

  --tk-display:    -0.03em;
  --tk-heading:    -0.015em;
  --tk-body:       -0.005em;
  --tk-eyebrow:    0.08em;

  /* ---------- Spacing (8pt + 4pt micro) ---------- */
  --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;
  --space-32: 128px;

  /* ---------- Radii ---------- */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   28px;
  --radius-xl:   40px;
  --radius-pill: 999px;

  /* ---------- Shadows (blue-tinted, never black) ---------- */
  --shadow-xs: 0 1px 2px rgba(10, 30, 80, 0.06);
  --shadow-sm: 0 2px 6px -2px rgba(10, 30, 80, 0.08), 0 1px 2px rgba(10, 30, 80, 0.04);
  --shadow-md: 0 12px 32px -8px rgba(10, 30, 80, 0.12), 0 2px 6px -2px rgba(10, 30, 80, 0.06);
  --shadow-lg: 0 24px 60px -12px rgba(10, 30, 80, 0.18), 0 4px 12px -4px rgba(10, 30, 80, 0.08);
  --shadow-focus: 0 0 0 3px rgba(0, 102, 255, 0.28);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:  cubic-bezier(0.6, 0, 1, 0.4);
  --ease-inout: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-1: 150ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
  --dur-4: 600ms;

  /* ---------- Layout ---------- */
  --container-max: 1240px;
  --gutter:        24px;
  --outer:         32px;
  --nav-h:         72px;
}

/* ============================================================
   Base typography
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: var(--lh-body);
  letter-spacing: var(--tk-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg);
  letter-spacing: var(--tk-display);
  line-height: var(--lh-heading);
  font-weight: 600;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--tk-display); font-weight: 600; }
h2 { font-size: var(--fs-h2); letter-spacing: var(--tk-display); font-weight: 600; }
h3 { font-size: var(--fs-h3); letter-spacing: var(--tk-heading); font-weight: 600; }
h4 { font-size: var(--fs-h4); letter-spacing: var(--tk-heading); font-weight: 600; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

small, .small { font-size: var(--fs-small); color: var(--fg-mute); }

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

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
a:hover { color: var(--link-hover); }

/* ---------- Display utilities ---------- */
.display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: -0.04em; font-weight: 600; }
.display-l  { font-family: var(--font-display); font-size: var(--fs-display-l);  line-height: var(--lh-display); letter-spacing: -0.035em; font-weight: 600; }
.display-m  { font-family: var(--font-display); font-size: var(--fs-display-m);  line-height: var(--lh-display); letter-spacing: -0.03em;  font-weight: 600; }

.eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-micro);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-mute);
}

.lead { font-size: 1.125rem; line-height: 1.5; color: var(--fg-soft); }

.mono { font-family: var(--font-mono); }

/* ============================================================
   Color helpers
   ============================================================ */

.bg-blue   { background: var(--sp-blue);    color: var(--sp-white); }
.bg-lime   { background: var(--sp-lime);    color: var(--sp-ink); }
.bg-ink    { background: var(--sp-ink);     color: var(--sp-white); }
.bg-surface{ background: var(--sp-surface); color: var(--sp-ink); }
.bg-white  { background: var(--sp-white);   color: var(--sp-ink); }

.text-blue { color: var(--sp-blue); }
.text-lime { color: var(--sp-lime-600); }
.text-mute { color: var(--fg-mute); }
.text-ink  { color: var(--sp-ink); }