/* ============================================================
   SCALE COMM — Colors + Type
   Strict monochrome. No accent. Two surfaces: Ink + Paper.
   Emphasis comes from weight, scale, and space — never colour.
   ============================================================ */

/* --- Fonts --------------------------------------------------- */
@font-face {
  font-family: "Funnel Display";
  src: url("fonts/FunnelDisplay-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Funnel Display";
  src: url("fonts/FunnelDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Funnel Display";
  src: url("fonts/FunnelDisplay-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Funnel Display";
  src: url("fonts/FunnelDisplay-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Funnel Display";
  src: url("fonts/FunnelDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Funnel Display";
  src: url("fonts/FunnelDisplay-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono — the typography of the IDE/terminal/dashboard.
   Loaded from Google Fonts when online. */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

/* Noto Kufi Arabic — used wherever Arabic appears on the site.
   Geometric, Kufi-derived, modern — sits comfortably with Funnel Display's
   editorial tone. */
@import url("https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ---- Brand palette (no accent — strict monochrome) ------ */
  --ink:    #0A0A0A; /* primary surface for editorial / decks / social */
  --paper:  #F4F1EA; /* primary surface for web / docs / cards */
  --bone:   #DDD5C4; /* tertiary — subtle dividers, secondary surfaces */
  --steel:  #6B6B6B; /* utility — captions, meta, secondary text */

  /* ---- Semantic tokens (Paper mode = default) ------------- */
  --bg:        var(--paper);
  --bg-elev:   #FFFFFF;        /* cards, popovers — paper-on-paper */
  --bg-tint:   var(--bone);    /* secondary panels */
  --fg-1:      var(--ink);     /* headings, primary copy */
  --fg-2:      #2A2A2A;        /* body copy on paper */
  --fg-3:      var(--steel);   /* captions, eyebrows on paper */
  --fg-mute:   #9A958A;        /* tertiary metadata */
  --rule:      #1F1F1F1A;      /* hairline rules @ 10% ink */
  --rule-strong: #0A0A0A;      /* full-strength keylines */

  /* ---- Type families -------------------------------------- */
  --font-display: "Funnel Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Funnel Display", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-arabic:  "Noto Kufi Arabic", "Funnel Display", system-ui, sans-serif;

  /* ---- Type scale ----------------------------------------- */
  /* Display weights map to a single job each. */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-xbold:    800;

  /* Sizes — generous, editorial, with mono eyebrows */
  --fs-display:  clamp(64px, 9vw, 144px); /* hero / cover */
  --fs-h1:       clamp(40px, 5vw, 72px);
  --fs-h2:       clamp(32px, 3.6vw, 48px);
  --fs-h3:       28px;
  --fs-subhead:  22px;
  --fs-ui:       16px;
  --fs-body:     17px;
  --fs-small:    14px;
  --fs-eyebrow:  12px; /* mono, uppercase, tracked */
  --fs-data:     14px; /* mono — metrics, urls, code */

  /* Line-heights — tight on display, comfortable on body */
  --lh-display:  0.95;
  --lh-heading:  1.05;
  --lh-subhead:  1.2;
  --lh-body:     1.55;
  --lh-mono:     1.5;

  /* Letter-spacing — eyebrows always tracked */
  --ls-display:  -0.02em;
  --ls-heading:  -0.015em;
  --ls-body:      0;
  --ls-eyebrow:   0.18em;
  --ls-mono:      0;

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

  /* ---- Radii — sharp x rounded duality -------------------- */
  --r-0:   0px;        /* sharp — keylines, technical cards */
  --r-1:   2px;        /* near-sharp — inputs, small chips */
  --r-2:   6px;        /* default — buttons, small cards */
  --r-3:   12px;       /* mid — cards, popovers */
  --r-4:   20px;       /* large — feature cards */
  --r-pill: 999px;     /* full pill — tags, status chips */

  /* ---- Borders -------------------------------------------- */
  --bw-hair: 1px;
  --bw-rule: 1.5px;
  --bw-bold: 2px;

  /* ---- Shadows — minimal, never glowing ------------------- */
  --shadow-1: 0 1px 0 0 rgba(10, 10, 10, 0.06);
  --shadow-2: 0 6px 24px -8px rgba(10, 10, 10, 0.18), 0 1px 0 0 rgba(10, 10, 10, 0.04);
  --shadow-3: 0 24px 60px -20px rgba(10, 10, 10, 0.35);

  /* ---- Motion --------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); /* default UI */
  --ease-emph:     cubic-bezier(0.16, 1, 0.3, 1);  /* hero / 3D-feel transitions */
  --dur-fast:      120ms;
  --dur-base:      220ms;
  --dur-slow:      480ms;
  --dur-scene:     800ms; /* section-to-section */
}

/* --- Ink mode (decks, social, premium moments) -------------- */
[data-mode="ink"], .ink-mode {
  --bg:      var(--ink);
  --bg-elev: #141414;
  --bg-tint: #1A1A1A;
  --fg-1:    var(--paper);
  --fg-2:    #D8D4CA;
  --fg-3:    #8C8C8C;
  --fg-mute: #5C5C5C;
  --rule:    #F4F1EA1A;
  --rule-strong: var(--paper);
}

/* --- Base reset -------------------------------------------- */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Semantic typography ----------------------------------- */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--w-xbold);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
/* Editorial split: a "soft half" in Light + accent in ExtraBold */
.display .soft { font-weight: var(--w-light); }
.display .hard { font-weight: var(--w-xbold); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-heading);
}
.subhead {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
}
.ui-text {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-ui);
  line-height: 1.4;
}
p, .body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}
.lede {
  font-weight: var(--w-medium);
  font-size: 20px;
  line-height: 1.45;
  color: var(--fg-1);
}
.caption, small {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-3);
}

/* --- Mono / "Signal" --------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}
.data, code, .mono {
  font-family: var(--font-mono);
  font-weight: var(--w-regular);
  font-size: var(--fs-data);
  line-height: var(--lh-mono);
  letter-spacing: var(--ls-mono);
}
.metric {
  font-family: var(--font-display);
  font-weight: var(--w-xbold);
  font-size: clamp(56px, 7vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

/* --- Caret blink (the "code being written" headline tic) --- */
.caret {
  display: inline-block;
  width: 0.18em;
  height: 0.85em;
  margin-left: 0.08em;
  background: currentColor;
  vertical-align: -0.06em;
  animation: scs-caret 1s steps(1) infinite;
}
@keyframes scs-caret {
  50% { opacity: 0; }
}

/* Trailing flickering dots for headlines (e.g. "Loading…") */
.dots::after {
  content: "";
  display: inline-block;
  width: 1.6ch;
  text-align: left;
  animation: scs-dots 1.2s steps(4, end) infinite;
}
@keyframes scs-dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}

/* --- Selection ------------------------------------------- */
::selection {
  background: var(--ink);
  color: var(--paper);
}
[data-mode="ink"] ::selection,
.ink-mode ::selection {
  background: var(--paper);
  color: var(--ink);
}

/* --- Arabic language: Noto Kufi Arabic everywhere ---------- */
[lang="ar"], [lang="ar"] *,
.ar, .ar * {
  font-family: var(--font-arabic);
  /* Arabic prefers slightly looser line-height and zero letter-spacing */
  letter-spacing: 0;
}
[lang="ar"] .display, [lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3,
[lang="ar"] .scs-h2, [lang="ar"] .scs-h-big, [lang="ar"] .h1, [lang="ar"] .h2, [lang="ar"] .h3,
.ar .display, .ar h1, .ar h2, .ar h3 {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  line-height: 1.25;
}
/* Mono eyebrow blocks should stay in mono (Latin, used as code/signal) — but if
   they contain Arabic text, swap to Kufi. .eyebrow-ar opt-in keeps the Latin
   eyebrows feeling technical. */
[lang="ar"] .eyebrow, [lang="ar"] .scs-eyebrow,
.ar .eyebrow, .ar .scs-eyebrow {
  font-family: var(--font-arabic);
  font-weight: 600;
  letter-spacing: 0.04em; /* tracked but lightly — Arabic doesn't track like Latin */
}
/* RTL adjustments — when html dir="rtl" is set */
html[dir="rtl"] body { direction: rtl; }