/* =========================================================================
   FiberWise — Core tokens: colors & type
   Import this file first. Variables are defined for light context on :root
   and flipped under [data-theme="dark"] (or .theme-dark).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Cormorant Garamond — brand variable fonts (wght axis 300..700). */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype-variations"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("../fonts/CormorantGaramond-Italic-VariableFont_wght.ttf") format("truetype-variations"); }

/* ---------- Brand palette (absolute, do not theme) ----------------------- */
:root {
  /* Core brand */
  --brand-pink:        #c1005f;  /* primary */
  --brand-pink-deep:   #8a0044;  /* hover/pressed */
  --brand-pink-soft:   #f5d6e4;  /* tints, backgrounds */

  --brand-blue:        #89daf5;  /* accent — signal, data */
  --brand-blue-deep:   #2a9cc4;
  --brand-blue-soft:   #e4f6fd;

  --brand-yellow:      #f9de3a;  /* accent — emphasis, highlights */
  --brand-yellow-deep: #c7a800;
  --brand-yellow-soft: #fdf4bf;

  --brand-black:       #0a0a0a;
  --brand-white:       #ffffff;

  /* Neutrals — warm-cool neutral, slight cool cast to feel like glass / fiber */
  --neutral-50:  #f7f8fa;
  --neutral-100: #eceef2;
  --neutral-200: #d9dde4;
  --neutral-300: #bcc2cc;
  --neutral-400: #8a909c;
  --neutral-500: #5c6270;
  --neutral-600: #3e4450;
  --neutral-700: #272b34;
  --neutral-800: #181b22;
  --neutral-900: #0e1015;

  /* Semantic signal */
  --signal-ok:    #3ab77a;
  --signal-warn:  #f9de3a;
  --signal-error: #c1005f;
  --signal-info:  #89daf5;
}

/* ---------- Light theme (default) ---------------------------------------- */
:root, [data-theme="light"], .theme-light {
  --bg-page:       var(--brand-white);
  --bg-raised:     var(--neutral-50);
  --bg-sunken:     var(--neutral-100);
  --bg-inverse:    var(--brand-black);

  --fg-1:          var(--brand-black);      /* primary text */
  --fg-2:          var(--neutral-700);      /* secondary */
  --fg-3:          var(--neutral-500);      /* tertiary / meta */
  --fg-muted:      var(--neutral-400);
  --fg-on-brand:   var(--brand-white);
  --fg-on-inverse: var(--brand-white);

  --accent:        var(--brand-pink);
  --accent-hover:  var(--brand-pink-deep);
  --accent-soft:   var(--brand-pink-soft);
  --accent-on:     var(--brand-white);

  --rule:          var(--neutral-200);
  --rule-strong:   var(--neutral-300);
  --rule-inverse:  rgba(255,255,255,0.14);

  --focus-ring:    color-mix(in oklab, var(--brand-pink) 55%, transparent);

  --shadow-color:  220 15% 12%;
  --shadow-xs:  0 1px 2px hsl(var(--shadow-color) / 0.06);
  --shadow-sm:  0 1px 2px hsl(var(--shadow-color) / 0.05), 0 2px 6px hsl(var(--shadow-color) / 0.06);
  --shadow-md:  0 2px 4px hsl(var(--shadow-color) / 0.06), 0 10px 24px hsl(var(--shadow-color) / 0.08);
  --shadow-lg:  0 8px 16px hsl(var(--shadow-color) / 0.08), 0 24px 48px hsl(var(--shadow-color) / 0.12);
  --shadow-inset: inset 0 1px 0 hsl(0 0% 100% / 0.04);
}

/* ---------- Dark theme --------------------------------------------------- */
[data-theme="dark"], .theme-dark {
  --bg-page:       var(--brand-black);
  --bg-raised:     var(--neutral-900);
  --bg-sunken:     #050507;
  --bg-inverse:    var(--brand-white);

  --fg-1:          var(--brand-white);
  --fg-2:          var(--neutral-200);
  --fg-3:          var(--neutral-400);
  --fg-muted:      var(--neutral-500);
  --fg-on-brand:   var(--brand-white);
  --fg-on-inverse: var(--brand-black);

  --accent:        var(--brand-pink);
  --accent-hover:  #e22d85;
  --accent-soft:   rgba(193, 0, 95, 0.18);
  --accent-on:     var(--brand-white);

  --rule:          rgba(255,255,255,0.10);
  --rule-strong:   rgba(255,255,255,0.20);
  --rule-inverse:  var(--neutral-200);

  --focus-ring:    color-mix(in oklab, var(--brand-blue) 70%, transparent);

  --shadow-color:  0 0% 0%;
  --shadow-xs:  0 1px 2px hsl(var(--shadow-color) / 0.4);
  --shadow-sm:  0 2px 6px hsl(var(--shadow-color) / 0.5);
  --shadow-md:  0 10px 24px hsl(var(--shadow-color) / 0.55);
  --shadow-lg:  0 24px 48px hsl(var(--shadow-color) / 0.6);
  --shadow-inset: inset 0 1px 0 hsl(0 0% 100% / 0.06);
}

/* ---------- Typography — families --------------------------------------- */
:root {
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans:    "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Display weight: Cormorant Bold for logo + big headings per brand note */
  --weight-display: 700;
  --weight-display-reg: 500;
  --weight-sans-reg: 400;
  --weight-sans-med: 500;
  --weight-sans-bold: 600;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-xwide: 0.16em; /* for uppercase eyebrow labels */
}

/* ---------- Type scale (clamp-based, 1920 design width friendly) -------- */
:root {
  --fs-display-xl: clamp(3.5rem, 6.2vw, 6.75rem);  /* hero */
  --fs-display-l:  clamp(2.75rem, 4.2vw, 4.5rem);  /* section openers */
  --fs-display-m:  clamp(2rem, 2.8vw, 3rem);       /* h1 */
  --fs-display-s:  clamp(1.5rem, 2vw, 2.125rem);   /* h2 */
  --fs-h3:         1.5rem;
  --fs-h4:         1.25rem;
  --fs-lede:       1.25rem;
  --fs-body:       1rem;
  --fs-body-sm:    0.9375rem;
  --fs-meta:       0.8125rem;
  --fs-eyebrow:    0.875rem;
  --fs-mono:       0.875rem;

  --lh-display:    1.02;
  --lh-heading:    1.12;
  --lh-lede:       1.45;
  --lh-body:       1.55;
  --lh-tight:      1.2;
}

/* ---------- Semantic element defaults ----------------------------------- */
html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-page); }
body { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-heading);
  color: var(--fg-1);
  margin: 0 0 0.4em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display-m); line-height: var(--lh-display); }
h2 { font-size: var(--fs-display-s); }
h3 { font-family: var(--font-sans); font-weight: var(--weight-sans-bold); font-size: var(--fs-h3); letter-spacing: var(--tracking-normal); }
h4 { font-family: var(--font-sans); font-weight: var(--weight-sans-bold); font-size: var(--fs-h4); letter-spacing: var(--tracking-normal); margin: 0 0 0.5em; }

p  { margin: 0 0 1em; color: var(--fg-2); text-wrap: pretty; max-width: 65ch; }
.lede { font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--fg-2); font-weight: 400; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  font-weight: var(--weight-sans-med);
  color: var(--fg-3);
}

small, .meta { font-size: var(--fs-meta); color: var(--fg-3); }
code, kbd, samp { font-family: var(--font-mono); font-size: var(--fs-mono); }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--rule-strong); transition: text-decoration-color 120ms ease, color 120ms ease; }
a:hover { text-decoration-color: var(--accent); color: var(--accent); }

/* The signature split-color word treatment.
   Use on any heading: <h1>Fiber<span class="split">Wise</span></h1>
   Or via .split-word with paired spans. */
.split { color: var(--accent); }
.split--blue { color: var(--brand-blue-deep); }
.split--yellow { color: var(--brand-yellow-deep); }
[data-theme="dark"] .split--blue { color: var(--brand-blue); }
[data-theme="dark"] .split--yellow { color: var(--brand-yellow); }

/* Italic accents in display serif read beautifully — reserved for pull quotes & emphasis. */
.display em, em.display-em { font-style: italic; font-weight: 500; font-family: var(--font-display); }

/* ---------- Spacing, radii, motion (small but core) --------------------- */
:root {
  --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;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emph:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 420ms;

  --border-hair: 1px;
  --border-reg:  1px;
  --border-strong: 2px;
}

/* ---------- Focus ring (accessibility) ---------------------------------- */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Utility: fiber "hair rule" (thin horizontal accent) --------- */
.hairline { display: block; height: 1px; background: var(--rule); border: 0; }
.hairline--accent { background: linear-gradient(90deg, var(--brand-pink), var(--brand-blue) 60%, var(--brand-yellow)); }

/* ---------- Selection --------------------------------------------------- */
::selection { background: var(--brand-yellow); color: var(--brand-black); }
[data-theme="dark"] ::selection { background: var(--brand-pink); color: var(--brand-white); }