/* ==========================================================================
   Spherical Design System — colors_and_type.css
   Source of truth for design tokens. Import this once per page.
   ========================================================================== */

/* ---------- Fonts (self-hosted via Web license, www.spherical-systems.com) --- */

/* Unica77LL — primary grotesque */
@font-face {
  font-family: "Unica77LL";
  src: url("./fonts/Unica77LLWeb-Regular.woff2") format("woff2"),
       url("./fonts/Unica77LLWeb-Regular.woff")  format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Unica77LL";
  src: url("./fonts/Unica77LLWeb-Medium.woff2") format("woff2"),
       url("./fonts/Unica77LLWeb-Medium.woff")  format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Unica77LL";
  src: url("./fonts/Unica77LLWeb-Bold.woff2") format("woff2"),
       url("./fonts/Unica77LLWeb-Bold.woff")  format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* EK Modena — editorial / serif */
@font-face {
  font-family: "EK Modena";
  src: url("./fonts/EKModena-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EK Modena";
  src: url("./fonts/EKModena-Regular.woff2") format("woff2"),
       url("./fonts/EKModena-Regular.woff")  format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EK Modena";
  src: url("./fonts/EKModena-RegularItalic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "EK Modena";
  src: url("./fonts/EKModena-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EK Modena";
  src: url("./fonts/EKModena-Bold.woff2") format("woff2"),
       url("./fonts/EKModena-Bold.woff")  format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ========================================================================== */
/* TOKENS                                                                     */
/* ========================================================================== */

:root {
  /* ---------- Brand colors (core, neutral-dominant) ---------- */
  --sph-black:        #000000;   /* primary ink — wordmark, rules, body */
  --sph-white:        #FFFFFF;   /* primary paper */
  --sph-yellow:       #FBFFE3;   /* pale lunar-yellow — accent backgrounds */
  --sph-yellow-ink:   #E8F27A;   /* saturated variant, for highlights / chips */
  --sph-grey:         #BFBFBF;   /* logo grey — disabled, muted marks */

  /* ---------- Neutrals (warm-cool neutral scale around pure black/white) ---- */
  --sph-n-0:          #FFFFFF;
  --sph-n-50:         #FAFAF7;   /* paper-warm */
  --sph-n-100:        #F2F2ED;   /* card ground / panel */
  --sph-n-200:        #E5E5DE;   /* hairline ground */
  --sph-n-300:        #CFCFC7;   /* disabled stroke */
  --sph-n-400:        #A8A8A0;   /* muted ink */
  --sph-n-500:        #7A7A74;   /* secondary ink */
  --sph-n-600:        #4D4D49;   /* strong secondary */
  --sph-n-700:        #2A2A28;   /* near-black */
  --sph-n-800:        #141413;
  --sph-n-900:        #000000;

  /* ---------- Semantic status (used sparingly) -------------- */
  --sph-ok:           #1F6B3A;   /* confirm / pass — muted green */
  --sph-warn:         #C88A1A;   /* caution — amber */
  --sph-err:          #B0261E;   /* fail / alert — technical red */
  --sph-info:         #1E4FB0;   /* informational — cobalt */

  /* ---------- Foreground / background semantic mapping ------ */
  --fg-1: var(--sph-black);         /* primary text */
  --fg-2: var(--sph-n-600);         /* secondary text */
  --fg-3: var(--sph-n-500);         /* tertiary / captions */
  --fg-muted: var(--sph-n-400);     /* disabled */
  --fg-inverse: var(--sph-white);

  --bg-1: var(--sph-white);         /* primary canvas */
  --bg-2: var(--sph-n-50);          /* recessed */
  --bg-3: var(--sph-n-100);         /* card */
  --bg-invert: var(--sph-black);    /* dark mode ground */
  --bg-accent: var(--sph-yellow);   /* accent ground */

  --stroke-1: var(--sph-black);     /* hairline, primary */
  --stroke-2: var(--sph-n-200);     /* hairline, subtle */
  --stroke-3: var(--sph-n-300);

  /* ---------- Typography families -------------------------- */
  --font-sans:    "Unica77LL", "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "EK Modena", "Times New Roman", Georgia, serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", ui-monospace, Menlo, monospace;

  /* ---------- Type scale ----------------------------------- */
  /* Display / editorial — serif (EK Modena) */
  --fs-display-xl: 96px;  --lh-display-xl: 1.02;  --ls-display-xl: -0.02em;
  --fs-display-l:  72px;  --lh-display-l:  1.04;  --ls-display-l:  -0.02em;
  --fs-display-m:  56px;  --lh-display-m:  1.06;  --ls-display-m:  -0.015em;
  --fs-display-s:  40px;  --lh-display-s:  1.1;   --ls-display-s:  -0.01em;

  /* UI / headlines — sans (Unica77LL) */
  --fs-h1: 48px; --lh-h1: 1.08; --ls-h1: -0.015em;
  --fs-h2: 36px; --lh-h2: 1.1;  --ls-h2: -0.01em;
  --fs-h3: 28px; --lh-h3: 1.15; --ls-h3: -0.005em;
  --fs-h4: 22px; --lh-h4: 1.2;  --ls-h4: 0;
  --fs-h5: 18px; --lh-h5: 1.25; --ls-h5: 0;

  /* Body */
  --fs-body-l: 18px; --lh-body-l: 1.5;
  --fs-body-m: 16px; --lh-body-m: 1.5;
  --fs-body-s: 14px; --lh-body-s: 1.45;

  /* Utility */
  --fs-label:   13px; --lh-label:   1.3;  --ls-label:   0.02em;
  --fs-caption: 12px; --lh-caption: 1.35;
  --fs-micro:   11px; --lh-micro:   1.3;  --ls-micro:   0.08em; /* ALL CAPS eyebrow */
  --fs-mono:    13px; --lh-mono:    1.4;

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

  /* ---------- Radii (sharp-first) -------------------------- */
  --r-0: 0px;      /* default — the system favours hard corners */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 9999px;

  /* ---------- Borders -------------------------------------- */
  --bw-hair: 1px;
  --bw-rule: 1.5px;   /* section rules */
  --bw-heavy: 2px;

  /* ---------- Elevation (flat-first; shadows used sparingly) */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(0,0,0,0.06);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.06), 0 1px 0 rgba(0,0,0,0.04);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);

  /* ---------- Motion --------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
  --dur-xs: 80ms;
  --dur-s: 160ms;
  --dur-m: 240ms;
  --dur-l: 400ms;
  --dur-xl: 700ms;

  /* ---------- Layout --------------------------------------- */
  --container-max: 1440px;
  --grid-gutter: 24px;
  --section-y:   96px;
}

/* ========================================================================== */
/* BASE                                                                       */
/* ========================================================================== */

html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-1); }
body { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body-m); font-feature-settings: "ss01","ss02","kern"; -webkit-font-smoothing: antialiased; }

/* ========================================================================== */
/* SEMANTIC ELEMENTS                                                          */
/* ========================================================================== */

.sph-display-xl, h1.display { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--ls-display-xl); }
.sph-display-l               { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-display-l);  line-height: var(--lh-display-l);  letter-spacing: var(--ls-display-l); }
.sph-display-m               { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-display-m);  line-height: var(--lh-display-m);  letter-spacing: var(--ls-display-m); }
.sph-display-s               { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-display-s);  line-height: var(--lh-display-s);  letter-spacing: var(--ls-display-s); }

h1, .sph-h1 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); margin: 0; }
h2, .sph-h2 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); margin: 0; }
h3, .sph-h3 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); margin: 0; }
h4, .sph-h4 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h4); line-height: var(--lh-h4); margin: 0; }
h5, .sph-h5 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h5); line-height: var(--lh-h5); margin: 0; }

p, .sph-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body-m); line-height: var(--lh-body-m); margin: 0; }
.sph-body-l  { font-size: var(--fs-body-l); line-height: var(--lh-body-l); }
.sph-body-s  { font-size: var(--fs-body-s); line-height: var(--lh-body-s); }

.sph-lede { font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.4; color: var(--fg-2); }

.sph-label   { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); }
.sph-caption { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-2); }
.sph-micro   { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); text-transform: uppercase; }

code, kbd, samp, pre, .sph-mono { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); }
code { background: var(--bg-3); padding: 1px 6px; border-radius: var(--r-1); }
pre  { background: var(--bg-invert); color: var(--fg-inverse); padding: var(--sp-4); border-radius: var(--r-2); overflow: auto; }

hr, .sph-rule { border: 0; border-top: var(--bw-rule) solid var(--stroke-1); margin: var(--sp-6) 0; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

::selection { background: var(--sph-yellow-ink); color: var(--sph-black); }

/* --- Utility: brand bar pattern (reuse the 9-bar rhythm) ----------------- */
.sph-bars {
  display: inline-flex; align-items: center; gap: 6px; height: 20px;
}
.sph-bars i {
  display: block; background: currentColor; height: 100%;
}
.sph-bars i:nth-child(1){ width: 2px; }
.sph-bars i:nth-child(2){ width: 2px; }
.sph-bars i:nth-child(3){ width: 3px; }
.sph-bars i:nth-child(4){ width: 4px; }
.sph-bars i:nth-child(5){ width: 7px; }
.sph-bars i:nth-child(6){ width: 9px; }
.sph-bars i:nth-child(7){ width: 12px; }
.sph-bars i:nth-child(8){ width: 18px; }
.sph-bars i:nth-child(9){ width: 22px; }