/* ==========================================================================
   Sia Design System — Colors + Type Foundations
   Extracted from Sia Brand Guidelines + Sia_Template_Master.pptx (theme: Sia 2024 01)
   ========================================================================== */

/* ---- Fonts --------------------------------------------------------------- */

@font-face {
  font-family: "Sora SIA";
  src: url("fonts/Sora-SIA-Thin.ttf") format("truetype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sora SIA";
  src: url("fonts/Sora-SIA-ExtraLight.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sora SIA";
  src: url("fonts/Sora-SIA-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sora SIA";
  src: url("fonts/Sora-Sia-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Sora SIA";
  src: url("fonts/Sora-SIA-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sora SIA";
  src: url("fonts/Sora-Sia-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Sora SIA";
  src: url("fonts/Sora-SIA-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sora SIA";
  src: url("fonts/Sora-Sia-MediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Sora SIA";
  src: url("fonts/Sora-SIA-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sora SIA";
  src: url("fonts/Sora-Sia-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Sora SIA";
  src: url("fonts/Sora-SIA-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sora SIA";
  src: url("fonts/Sora-Sia-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Sora SIA";
  src: url("fonts/Sora-SIA-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* ---- Core brand colors (from Sia 2024 01 theme) ------------------------ */
  --sia-mint:        #00DECC;   /* accent1 — primary "Sia" mint. The signature. */
  --sia-mint-light:  #9FF3F0;   /* accent3 — soft tint for backgrounds / chart fills */
  --sia-teal:        #00A2A3;   /* accent5 — mid teal for hover / links */
  --sia-teal-dark:   #077C84;   /* accent2 — deep teal for contrast on light */

  --sia-navy:        #0A151E;   /* dk1 — primary text / dark backgrounds */
  --sia-navy-2:      #173044;   /* dk2 — softer navy for cards on dark */
  --sia-slate:       #455669;   /* accent4 — supporting body text */
  --sia-slate-light: #8796A9;   /* accent6 — muted meta / hints */

  --sia-white:       #FFFFFF;   /* lt1 */
  --sia-off-white:   #F4F6FC;   /* lt2 — page wash, never pure white when paired with mint */

  /* ---- Pastel gradient palette (brand prism / glass imagery) ------------- */
  --sia-prism-blue:   #C9D8EA;
  --sia-prism-peach:  #F4D9C4;
  --sia-prism-pink:   #EAD4D8;
  --sia-prism-lilac:  #D8D4EA;
  --sia-prism-cream:  #FBF4EC;

  /* ---- Semantic — surfaces -------------------------------------------------*/
  --bg:              var(--sia-white);
  --bg-soft:         var(--sia-off-white);
  --bg-inverse:      var(--sia-navy);
  --bg-inverse-2:    var(--sia-navy-2);

  /* ---- Semantic — foreground ---------------------------------------------*/
  --fg:              var(--sia-navy);     /* primary ink */
  --fg-2:            var(--sia-slate);    /* body / secondary */
  --fg-3:            var(--sia-slate-light); /* meta, hints */
  --fg-inverse:      var(--sia-white);
  --fg-inverse-2:    rgba(255,255,255,0.72);
  --fg-accent:       var(--sia-teal);     /* links / accent ink on light */
  --fg-accent-bright: var(--sia-mint);    /* accent ink on dark */

  /* ---- Semantic — lines & strokes ----------------------------------------*/
  --line:            rgba(10, 21, 30, 0.10);
  --line-strong:     rgba(10, 21, 30, 0.18);
  --line-inverse:    rgba(255, 255, 255, 0.14);

  /* ---- Semantic — feedback -----------------------------------------------*/
  --success: #00A2A3;
  --warning: #E8A54E;
  --danger:  #D94A4A;
  --info:    var(--sia-teal);

  /* ---- Typography ---------------------------------------------------------*/
  --font-sans:  "Sora SIA", "Sora", ui-sans-serif, system-ui, -apple-system,
                 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono:  ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo,
                 Consolas, "Liberation Mono", monospace;

  /* Type scale (1920px slide design grid; scales down gracefully for web) */
  --fs-display-xl: clamp(48px, 6.25vw, 120px);   /* Hero title, max 64 char */
  --fs-display:    clamp(40px, 4.5vw,  88px);    /* Divider title */
  --fs-h1:         clamp(36px, 3.2vw,  64px);
  --fs-h2:         clamp(28px, 2.4vw,  48px);
  --fs-h3:         clamp(22px, 1.8vw,  32px);
  --fs-h4:         20px;
  --fs-lead:       20px;    /* subtitle after the "/" */
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-meta:       12px;
  --fs-eyebrow:    11px;    /* ALL CAPS eyebrow label */

  /* Line heights */
  --lh-display: 1.02;
  --lh-tight:   1.12;
  --lh-snug:    1.25;
  --lh-body:    1.5;
  --lh-loose:   1.7;

  /* Letter spacing */
  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:   0em;
  --ls-eyebrow:  0.14em;   /* strong tracking for caps eyebrows */

  /* Weights — Sora ships the full range; we use these named aliases */
  --fw-thin:       100;
  --fw-extralight: 200;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* ---- Spacing (8pt grid) ------------------------------------------------*/
  --sp-0:   0px;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ---- Radius ------------------------------------------------------------*/
  --r-0:    0px;   /* Sia defaults to hard corners on most surfaces */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 999px;

  /* ---- Shadows (restrained; Sia's look is largely shadowless) -----------*/
  --shadow-xs: 0 1px 2px rgba(10, 21, 30, 0.06);
  --shadow-sm: 0 2px 6px rgba(10, 21, 30, 0.06), 0 1px 2px rgba(10, 21, 30, 0.04);
  --shadow-md: 0 8px 24px rgba(10, 21, 30, 0.08), 0 2px 6px rgba(10, 21, 30, 0.04);
  --shadow-lg: 0 24px 48px rgba(10, 21, 30, 0.10), 0 6px 12px rgba(10, 21, 30, 0.04);

  /* ---- Brand gradients ---------------------------------------------------*/
  --grad-prism:
    linear-gradient(135deg, #C9D8EA 0%, #E8E1EC 35%, #F4D9C4 70%, #FBF4EC 100%);
  --grad-prism-soft:
    linear-gradient(135deg, #EEF3F9 0%, #F6ECE8 55%, #FBF4EC 100%);
  --grad-mint:
    linear-gradient(135deg, var(--sia-mint-light) 0%, var(--sia-mint) 100%);
  --grad-navy:
    linear-gradient(180deg, var(--sia-navy) 0%, var(--sia-navy-2) 100%);

  /* ---- Motion ------------------------------------------------------------*/
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
}

/* ---- Base typographic primitives ---------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, .h1, .sia-display {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

h2, .h2 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

h3, .h3 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  margin: 0;
}

h4, .h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

p, .p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  font-weight: var(--fw-regular);
  color: var(--fg);
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-2);
}

.meta {
  font-size: var(--fs-meta);
  color: var(--fg-3);
  line-height: var(--lh-body);
}

code, .code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a {
  color: var(--fg-accent);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-standard),
              opacity var(--dur-2) var(--ease-standard);
}
a:hover { color: var(--sia-teal-dark); }

/* ---- Signature slash — the "/" is Sia's brand mark, used as a soft bullet
   before subtitles/labels. Apply with .slash::before OR manually. ---------- */

.slash {
  position: relative;
}
.slash::before {
  content: "/";
  color: var(--sia-mint);
  font-weight: var(--fw-semibold);
  margin-right: 0.45em;
  display: inline-block;
}

/* ---- Utility: selection color ------------------------------------------- */
::selection { background: var(--sia-mint); color: var(--sia-navy); }