/* ==========================================================================
   OrbBits — design tokens
   Colours, type scale, spacing and radii. Everything downstream reads
   from these variables, so a rebrand is mostly an edit to this file.
   ========================================================================== */

/* --- Typefaces (self-hosted, subset, variable) --------------------------- */

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Only requested when Arabic glyphs are actually rendered on screen. */
@font-face {
  font-family: "Noto Sans Arabic";
  src: url("../assets/fonts/noto-sans-arabic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F,
    U+2010-2011, U+204F, U+FB50-FDFF, U+FE70-FEFC;
}

:root {
  /* --- Font stacks ------------------------------------------------------ */
  --font-latin: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro",
    "Arabic Typesetting", sans-serif;
  --font-body: var(--font-latin);
  --font-display: var(--font-latin);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
    "Roboto Mono", Menlo, Consolas, monospace;

  /* --- Fluid type scale -------------------------------------------------
     clamp(min, preferred, max) keeps text readable from 320px to 4K
     without a stack of breakpoints. */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-h4: clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
  --fs-h3: clamp(1.1875rem, 1.07rem + 0.6vw, 1.5rem);
  --fs-h2: clamp(1.75rem, 1.36rem + 1.85vw, 2.75rem);
  --fs-h1: clamp(2.25rem, 1.45rem + 3.9vw, 4.125rem);
  --fs-num: clamp(1.75rem, 1.3rem + 2.1vw, 2.75rem);

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-body: 1.68;

  --tracking-tight: -0.022em;
  --tracking-wide: 0.08em;

  /* --- Spacing ---------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;

  --section-y: clamp(3.5rem, 8vw, 7rem);
  --gutter: clamp(1.125rem, 4.5vw, 2.5rem);

  /* --- Layout ----------------------------------------------------------- */
  --container: 1240px;
  --container-wide: 1560px;
  --header-h: 68px;

  /* --- Radii ------------------------------------------------------------ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.68, 0.35, 1);
  --dur: 220ms;

  /* --- Brand ------------------------------------------------------------
     Palette from the OrbBits orb icon: a garnet core, an amber bit riding an
     ink orbit ring. `--seam` is decoration only (it ends in amber, so never
     put text on it); `--grad-cta` is the text-bearing gradient and is
     identical in both themes because white text needs both stops dark. */
  --brand-garnet: #c42b2b;
  --brand-garnet-deep: #7a1414;
  --brand-amber: #fbbf24;
  --brand-ink: #0b1220;

  --seam-angle: 135deg;
  --seam: linear-gradient(var(--seam-angle), #c42b2b, #d97706 55%, #fbbf24);
  /* Gradient headline text. Only for display sizes: the last stop is a
     large-text 3:1 colour, not a body-copy colour. */
  --grad-text: linear-gradient(var(--seam-angle), #c42b2b, #b32d0b 45%, #c2410c);
  --grad-cta: linear-gradient(135deg, #c42b2b, #7a1414);
}

/* --- Light palette ------------------------------------------------------ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg: #ffffff;
  --bg-alt: #f6f8fb;
  --bg-sunken: #eef2f8;
  --surface: #ffffff;
  --surface-2: #f4f7fb;
  --surface-3: #e9eff7;

  --border: #e2e8f2;
  --border-strong: #cbd5e6;

  --text: #0b1220;
  --text-muted: #4e5a6e;
  --text-faint: #78849a;

  --seam: linear-gradient(var(--seam-angle), #c42b2b, #b32d0b 55%, #c2410c);
  --grad-text: linear-gradient(var(--seam-angle), #c42b2b, #b32d0b 45%, #d97706);
  --accent: #c42b2b;
  --accent-ink: #a81f1f;
  --bit: #c2410c;
  --accent-wash: rgba(196, 43, 43, 0.08);

  --ring: rgba(196, 43, 43, 0.38);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 8px 24px -12px rgba(16, 24, 40, 0.18);
  --shadow-lg: 0 24px 60px -28px rgba(16, 24, 40, 0.32);

  --code-bg: #0b1220;
  --code-border: #1e2a42;
}

/* --- Dark palette -------------------------------------------------------
   Declared twice on purpose: once behind prefers-color-scheme (so it works
   with JavaScript disabled) and once behind [data-theme="dark"], which the
   inline head script sets before first paint. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0b1220;
    --bg-alt: #0d1526;
    --bg-sunken: #070c16;
    --surface: #121a2b;
    --surface-2: #162034;
    --surface-3: #1c2740;

    --border: #222d44;
    --border-strong: #33415c;

    --text: #e8eef9;
    --text-muted: #9fabbf;
    --text-faint: #71809a;

    --seam: linear-gradient(var(--seam-angle), #f26a6a, #fb923c 55%, #fbbf24);
    --grad-text: linear-gradient(var(--seam-angle), #f26a6a, #fb923c 50%, #fbbf24);
    --accent: #f26a6a;
    --accent-ink: #ffb4b4;
    --bit: #fbbf24;
    --accent-wash: rgba(242, 106, 106, 0.12);

    --ring: rgba(242, 106, 106, 0.42);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 12px 30px -16px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 32px 70px -30px rgba(0, 0, 0, 0.85);

    --code-bg: #0b1220;
    --code-border: #1e2a42;
  }
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b1220;
  --bg-alt: #0d1526;
  --bg-sunken: #070c16;
  --surface: #121a2b;
  --surface-2: #162034;
  --surface-3: #1c2740;

  --border: #222d44;
  --border-strong: #33415c;

  --text: #e8eef9;
  --text-muted: #9fabbf;
  --text-faint: #71809a;

  --seam: linear-gradient(var(--seam-angle), #f26a6a, #fb923c 55%, #fbbf24);
  --grad-text: linear-gradient(var(--seam-angle), #f26a6a, #fb923c 50%, #fbbf24);
  --accent: #f26a6a;
  --accent-ink: #ffb4b4;
  --bit: #fbbf24;
  --accent-wash: rgba(242, 106, 106, 0.12);

  --ring: rgba(242, 106, 106, 0.42);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 30px -16px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 32px 70px -30px rgba(0, 0, 0, 0.85);

  --code-bg: #0b1220;
  --code-border: #1e2a42;
}

/* --- Arabic typography adjustments -------------------------------------- */
html[lang="ar"] {
  --font-body: var(--font-arabic);
  --font-display: var(--font-arabic);
  --tracking-tight: 0;
  --lh-tight: 1.32;
  --lh-snug: 1.5;
  --lh-body: 1.85;
}

/* The seam runs with the text direction, so gradients mirror in Arabic. */
[dir="rtl"] {
  --seam-angle: 225deg;
}

/* Arabic should not be letter-spaced; it breaks joining forms. */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .eyebrow,
html[lang="ar"] .brand__name {
  letter-spacing: 0;
}