/* ==========================================================================
   SmartData Solutions — Colors & Type
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("./fonts/SpaceGrotesk-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("./fonts/SpaceGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("./fonts/SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("./fonts/SpaceGrotesk-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("./fonts/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- BRAND COLORS ------------------------------------------------------ */
  --sds-plum:      #322045;   /* Primary ink / dark surface */
  --sds-plum-ink:  #1E1329;   /* Deepest plum, rarely used */
  --sds-coral:     #FE6E4E;   /* Primary accent */
  --sds-coral-hi:  #E85A3A;   /* Coral hover */
  --sds-sage:      #E7ECE4;   /* Page background (brand default) */
  --sds-lavender:  #D097E7;   /* Secondary accent */
  --sds-bone:      #FAF9F3;   /* Card surface */
  --sds-paper:     #FFFFFF;   /* Reserve — only when Bone would clash */

  /* --- SEMANTIC COLOR TOKENS -------------------------------------------- */
  --bg:            var(--sds-sage);
  --bg-alt:        var(--sds-bone);
  --bg-dark:       var(--sds-plum);
  --surface:       var(--sds-bone);
  --surface-alt:   #F3EEE4;
  --border:        rgba(50, 32, 69, 0.12);
  --border-strong: rgba(50, 32, 69, 0.35);
  --divider:       rgba(50, 32, 69, 0.08);

  --fg:            var(--sds-plum);
  --fg1:           var(--sds-plum);
  --fg2:           rgba(50, 32, 69, 0.72);
  --fg3:           rgba(50, 32, 69, 0.52);
  --fg-inverse:    var(--sds-sage);
  --fg-on-coral:   var(--sds-bone);

  --accent:        var(--sds-coral);
  --accent-2:      var(--sds-lavender);

  /* semantic: state */
  --success:       #2F8F5E;
  --warning:       #D99A2B;
  --danger:        #C44A3A;
  --info:          var(--sds-lavender);

  /* --- TYPE ------------------------------------------------------------- */
  --font-sans:     "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display:  "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:     ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* scale */
  --fs-display: 128px;
  --fs-h1:      72px;
  --fs-h2:      48px;
  --fs-h3:      32px;
  --fs-h4:      24px;
  --fs-h5:      18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-eyebrow: 12px;

  --lh-tight:   1.0;
  --lh-snug:    1.15;
  --lh-normal:  1.4;
  --lh-relaxed: 1.5;

  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-eyebrow: 0.08em;

  /* --- SPACING ---------------------------------------------------------- */
  --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 ------------------------------------------------------------ */
  --radius-sm:  4px;
  --radius:     6px;  /* SDS default */
  --radius-lg:  12px;
  --radius-pill: 999px;

  /* --- SHADOWS ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(50, 32, 69, 0.06);
  --shadow-md: 0 8px 24px rgba(50, 32, 69, 0.10);
  --shadow-lg: 0 24px 48px rgba(50, 32, 69, 0.14);

  /* --- MOTION ----------------------------------------------------------- */
  --ease-out-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 320ms;
}

/* --- BASE / SEMANTIC ELEMENT STYLES ------------------------------------ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: currentColor;
}
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: currentColor;
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: currentColor;
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: currentColor;
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: currentColor;
}
h5, .h5 {
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: currentColor;
}
p, .p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: currentColor;
}
.lede {
  font-size: 20px;
  line-height: 1.4;
  color: var(--fg2);
  font-weight: var(--fw-regular);
}
small, .small {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg2);
}
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg2);
}
code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(50, 32, 69, 0.06);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}
a {
  color: currentColor;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: border-color var(--dur-fast) var(--ease-out-soft);
}
a:hover { border-bottom-color: currentColor; }