/* ============================================================
   FARID KHELOCO — design tokens
   Pacific & Patina: deep teal, burnt wax orange, driftwood cream
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;700;900&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Caveat:wght@500;700&display=swap');

:root {
  /* ---------- Color: raw palette ---------- */
  --pacific:        #0E3A40;   /* primary dark — wet-suit teal */
  --pacific-deep:   #082529;   /* darker depth, near-black */
  --pacific-tide:   #1B5358;   /* lifted teal for hover on pacific */
  --pacific-mist:   #6E9A92;   /* muted sage teal — secondary in wordmark / fk monogram */
  --burnt-wax:      #DD6629;   /* singular accent — warm clay orange */
  --burnt-wax-dim:  #B5501C;   /* pressed state */
  --driftwood:      #D8D6D0;   /* primary page bg — light cement */
  --foam:           #E4E2DD;   /* elevated surface on cement */
  --sand:           #B0AEA7;   /* muted rules + disabled */
  --salt:           #C8C6C0;   /* card/divider tone */
  --kelp:           #3D7B7A;   /* tidepool — teal-leaning blue-green */
  --ink:            #1B1B17;   /* body text on cement */
  --ink-soft:       #44443E;   /* secondary text on cement */
  --ink-mute:       #76746B;   /* tertiary / captions */
  --cream-on-deep:  #E6E3DA;   /* text on pacific bg */

  /* ---------- Color: semantic ---------- */
  --bg-1: #f2f2f2;             /* page bg */
  --bg-2: var(--foam);         /* elevated surface */
  --bg-3: var(--salt);         /* recessed / card */
  --bg-inverse: var(--pacific);

  --fg-1: var(--ink);          /* primary text */
  --fg-2: var(--ink-soft);     /* secondary text */
  --fg-3: var(--ink-mute);     /* tertiary */
  --fg-inverse: var(--cream-on-deep);

  --accent:        var(--burnt-wax);
  --accent-press:  var(--burnt-wax-dim);
  --secondary:     var(--kelp);

  --rule:          var(--sand);
  --rule-strong:   var(--ink);

  --focus-ring:    var(--burnt-wax);

  /* status (used sparingly — no semantic green/red splash) */
  --positive: #4F7A4A;
  --negative: #A23B2A;
  --warning:  #B6862A;

  /* ---------- Type: families ---------- */
  --font-display:    "Schibsted Grotesk", "Inter Tight", system-ui, sans-serif;
  --font-editorial:  "Caveat", "Bradley Hand", "Segoe Script", cursive;
  --font-body:       "Geist", -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:       "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* ---------- Type: scale ---------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-88: 5.5rem;
  --fs-120: 7.5rem;

  /* line-heights */
  --lh-tight:  1.04;
  --lh-snug:   1.18;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  /* tracking */
  --tr-tight:  -0.02em;
  --tr-normal: 0;
  --tr-label:  0.14em;     /* eyebrow / kicker tracking */
  --tr-cap:    0.06em;

  /* ---------- Spacing (4px base) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- Radii ---------- */
  --radius-0: 4px;     /* cards, sections — quiet soft corner */
  --radius-1: 6px;     /* inputs, badges */
  --radius-2: 10px;    /* modals, large surfaces */
  --radius-full: 9999px;

  /* ---------- Borders ---------- */
  --border-hair: 1px solid var(--rule);
  --border-strong: 1.5px solid var(--ink);
  --border-inverse: 1px solid rgba(232,223,199,0.18);

  /* ---------- Shadows ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 rgba(27,27,23,0.04), 0 12px 32px -16px rgba(14,58,64,0.18);
  --shadow-2: 0 1px 0 0 rgba(27,27,23,0.06), 0 24px 56px -24px rgba(14,58,64,0.28);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:    cubic-bezier(0.6, 0, 0.8, 0.2);
  --dur-fast:   160ms;
  --dur-med:    320ms;
  --dur-slow:   640ms;

  /* ---------- Layout ---------- */
  --page-max: 1240px;
  --reading-max: 64ch;
  --inset-x: max(20px, 7vw);
  --nav-h: 72px;
}

/* ============================================================
   Base & reset-lite
   ============================================================ */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--driftwood); }

/* ============================================================
   Semantic typography classes
   Use these directly or apply on h1/h2/p, etc.
   ============================================================ */

.display, .h-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(var(--fs-64), 9vw, var(--fs-120));
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--fg-1);
  text-transform: lowercase;
}

.h1, h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(var(--fs-48), 6vw, var(--fs-88));
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--fg-1);
  margin: 0;
  text-transform: lowercase;
}

.h2, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(var(--fs-36), 4vw, var(--fs-48));
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--fg-1);
  margin: 0;
  text-transform: lowercase;
}

.h3, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-28);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0;
}

.h4, h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

.eyebrow, .kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-3);
}

.pullquote, .editorial {
  font-family: var(--font-editorial);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(var(--fs-36), 4.4vw, var(--fs-64));
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}

.lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-22);
  line-height: 1.45;
  color: var(--fg-2);
  max-width: var(--reading-max);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  max-width: var(--reading-max);
  margin: 0;
}

.body-sm, small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--fg-3);
  letter-spacing: var(--tr-cap);
}

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

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.7; text-decoration-color: var(--accent); }

hr, .rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* ============================================================
   Section number marker (editorial habit)
   ============================================================ */
.section-num {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tr-label);
  color: var(--fg-3);
  text-transform: uppercase;
}

/* ============================================================
   Inverse surface (Deep Pacific) helpers
   ============================================================ */
.surface-inverse {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
}
.surface-inverse .h1,
.surface-inverse h1,
.surface-inverse .h2,
.surface-inverse h2,
.surface-inverse .h3,
.surface-inverse h3,
.surface-inverse .display { color: var(--driftwood); }
.surface-inverse .eyebrow,
.surface-inverse .caption { color: rgba(232,223,199,0.6); }
.surface-inverse a { text-decoration-color: rgba(232,223,199,0.3); }
.surface-inverse hr { border-top-color: rgba(232,223,199,0.18); }