/* ==========================================================================
   SirusAI — Foundations
   Colors, type scale, tokens. Import this once at the root of every artifact.
   ========================================================================== */

/* --- Webfonts ------------------------------------------------------------- */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/InstrumentSerif-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/InstrumentSerif-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./fonts/Manrope-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/JetBrainsMono-Variable.woff2") format("woff2");
}

:root {
  /* ------ Brand palette --------------------------------------------------- */
  /* Primary ink: deep research-grade midnight sampled from the logo mark */
  --sirus-ink:         #0D1728;  /* primary dark */
  --sirus-ink-2:       #142038;  /* elevated navy (cards on ink) */
  --sirus-ink-3:       #1C2A45;  /* line / hairline on ink */

  /* Primary paper: warm cream sampled from the logo background */
  --sirus-paper:       #F7F6F2;  /* primary light */
  --sirus-paper-2:     #EFEDE5;  /* elevated cream (cards on paper) */
  --sirus-paper-3:     #E6E2D6;  /* line / hairline on paper */

  /* Accent: a restrained "star" gold — evokes the Sirius-star mythos.
     Used sparingly for royal touches, not as a primary surface color. */
  --sirus-gold:        #C9A24B;
  --sirus-gold-soft:   #E7D7A8;
  --sirus-gold-deep:   #8A6A24;

  /* Cool accent (for data / research tokens, links, interactive states) */
  --sirus-azure:       #3D6CE0;
  --sirus-azure-soft:  #DCE5FA;

  /* Semantic */
  --sirus-success:     #2F8F6A;
  --sirus-warning:     #C9822B;
  --sirus-danger:      #B3402F;
  --sirus-info:        #3D6CE0;

  /* ------ Neutral scale (cool-warm hybrid, anchored to paper+ink) --------- */
  --sirus-n-50:  #FAFAF7;
  --sirus-n-100: #F1EFE8;
  --sirus-n-200: #E1DED2;
  --sirus-n-300: #C8C3B3;
  --sirus-n-400: #A09B8B;
  --sirus-n-500: #6F6B60;
  --sirus-n-600: #4A4740;
  --sirus-n-700: #2F2D28;
  --sirus-n-800: #1B1A17;
  --sirus-n-900: #0D1728;

  /* ------ Semantic surface + text tokens (light mode defaults) ----------- */
  --bg:        var(--sirus-paper);
  --bg-elev:   var(--sirus-paper-2);
  --bg-sunk:   var(--sirus-n-100);
  --bg-ink:    var(--sirus-ink);         /* for hero sections on paper */

  --fg:        var(--sirus-ink);         /* primary text */
  --fg-2:      #384459;                  /* secondary text */
  --fg-3:      #6B7486;                  /* tertiary / captions */
  --fg-4:      #9AA0AE;                  /* placeholder / disabled */
  --fg-on-ink: var(--sirus-paper);       /* text on ink surfaces */
  --fg-on-ink-2: #AEB6C4;

  --line:      var(--sirus-paper-3);     /* hairlines on paper */
  --line-ink:  var(--sirus-ink-3);       /* hairlines on ink */
  --line-strong: #CFC8B6;

  --accent:    var(--sirus-gold);
  --accent-on: #0D1728;
  --link:      var(--sirus-azure);

  /* ------ Type ------------------------------------------------------------ */
  --font-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid display scale (Instrument Serif — editorial, royal, breathing).
     Clamp() gives ~min at 380px, ~max at 1440px. */
  --fs-display-1: clamp(3.5rem, 2rem + 6.5vw, 7.5rem);   /* 56–120 */
  --fs-display-2: clamp(2.75rem, 1.75rem + 4.5vw, 5rem); /* 44–80 */
  --fs-display-3: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);  /* 36–56 */

  /* Functional UI scale (Manrope) */
  --fs-h1:   2.25rem;  /* 36 */
  --fs-h2:   1.75rem;  /* 28 */
  --fs-h3:   1.375rem; /* 22 */
  --fs-h4:   1.125rem; /* 18 */
  --fs-body: 1rem;     /* 16 */
  --fs-sm:   0.875rem; /* 14 */
  --fs-xs:   0.75rem;  /* 12 */
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-eyebrow: 0.16em; /* All-caps labels */

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

  /* ------ Radii ---------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ------ Elevation ------------------------------------------------------ */
  /* Shadows are low-contrast and warm — like afternoon light on cream. */
  --shadow-xs: 0 1px 0 rgba(13, 23, 40, 0.04);
  --shadow-sm: 0 1px 2px rgba(13, 23, 40, 0.06), 0 1px 1px rgba(13, 23, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(13, 23, 40, 0.08), 0 1px 2px rgba(13, 23, 40, 0.05);
  --shadow-lg: 0 18px 40px -12px rgba(13, 23, 40, 0.22), 0 4px 10px rgba(13, 23, 40, 0.06);
  --shadow-xl: 0 40px 80px -24px rgba(13, 23, 40, 0.30), 0 10px 24px rgba(13, 23, 40, 0.08);

  /* Inset used on dark hero surfaces to suggest etched metal type */
  --shadow-ink-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ------ Motion --------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);   /* default UI */
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);     /* marketing reveal */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 140ms;
  --dur-med:  260ms;
  --dur-slow: 520ms;

  /* ------ Layout --------------------------------------------------------- */
  --container-narrow: 720px;
  --container:        1120px;
  --container-wide:   1320px;
}

/* Dark inversion: ink becomes the surface, paper becomes the text.
   Apply with <body data-theme="ink"> or on any container. */
[data-theme="ink"] {
  --bg:        var(--sirus-ink);
  --bg-elev:   var(--sirus-ink-2);
  --bg-sunk:   #0A1220;
  --bg-ink:    var(--sirus-paper);

  --fg:        var(--sirus-paper);
  --fg-2:      #AEB6C4;
  --fg-3:      #7E8699;
  --fg-4:      #4F5670;

  --line:      var(--sirus-ink-3);
  --line-strong: #2B3956;

  --accent-on: var(--sirus-paper);
}

/* ==========================================================================
   Semantic element styles — opt-in via class so they don't globally
   hijack pages that import this file.
   ========================================================================== */

.s-display-1, .s-display-2, .s-display-3, .s-h1, .s-h2, .s-h3, .s-h4,
.s-body, .s-sm, .s-xs, .s-eyebrow, .s-mono, .s-quote, .s-lead {
  color: var(--fg);
  margin: 0;
}

.s-display-1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.s-display-2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.s-display-3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}

.s-h1 { font: 600 var(--fs-h1)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-snug); }
.s-h2 { font: 600 var(--fs-h2)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-snug); }
.s-h3 { font: 600 var(--fs-h3)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-snug); }
.s-h4 { font: 600 var(--fs-h4)/var(--lh-snug) var(--font-sans); }

.s-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}
.s-body   { font: 400 var(--fs-body)/var(--lh-relaxed) var(--font-sans); color: var(--fg-2); text-wrap: pretty; }
.s-sm     { font: 400 var(--fs-sm)/var(--lh-normal) var(--font-sans); color: var(--fg-2); }
.s-xs     { font: 500 var(--fs-xs)/var(--lh-normal) var(--font-sans); color: var(--fg-3); }
.s-mono   { font: 500 var(--fs-sm)/var(--lh-normal) var(--font-mono); letter-spacing: 0; }

.s-eyebrow {
  font: 600 var(--fs-eyebrow)/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
}

.s-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  line-height: 1.3;
  color: var(--fg);
  text-wrap: balance;
}

/* Accent flourishes used sparingly. */
.s-gold { color: var(--sirus-gold); }
.s-italic-serif { font-family: var(--font-display); font-style: italic; font-weight: 400; }