/* =========================================================
   Spark Hive — Colors & Type
   "Analog Soul in a Digital World"
   ========================================================= */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: "Nunito";
  src: url("./fonts/Nunito-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("./fonts/Nunito-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("./fonts/Nunito-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("./fonts/Nunito-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("./fonts/Nunito-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("./fonts/Nunito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("./fonts/Nunito-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("./fonts/Nunito-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Shadows Into Light";
  src: url("./fonts/ShadowsIntoLight-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shadows Into Light Two";
  src: url("./fonts/ShadowsIntoLightTwo-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway Dots";
  src: url("./fonts/RalewayDots-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   Tokens
   ========================================================= */
:root {
  /* ---------- Canonical palette ---------- */
  --sh-cosmic-purple: #471C78;   /* brand primary, headings, strategy */
  --sh-radiant-gold:  #F6A900;   /* accent, CTAs, energy */
  --sh-spark-teal:    #00CFC1;   /* highlights, innovation */
  --sh-orbit-silver:  #BFBFBF;   /* neutrals, grounding */
  --sh-midnight:      #1A1A1A;   /* body text, contrast */
  --sh-white:         #FFFFFF;   /* backgrounds, breathing room */

  /* ---------- Purple scale (derived from Cosmic Purple) ---------- */
  --sh-purple-50:  #F3EEF9;
  --sh-purple-100: #E4D8F0;
  --sh-purple-200: #C4A9E0;
  --sh-purple-300: #9F75CB;
  --sh-purple-400: #7746A8;
  --sh-purple-500: #471C78;  /* = cosmic-purple */
  --sh-purple-600: #3A1664;
  --sh-purple-700: #2C1050;
  --sh-purple-800: #1E0A3B;
  --sh-purple-900: #120526;

  /* ---------- Gold scale ---------- */
  --sh-gold-50:  #FFF6E0;
  --sh-gold-100: #FEE7B0;
  --sh-gold-200: #FCD072;
  --sh-gold-300: #F9BB3D;
  --sh-gold-400: #F6A900;  /* = radiant-gold */
  --sh-gold-500: #D79300;
  --sh-gold-600: #A86F00;

  /* ---------- Teal scale ---------- */
  --sh-teal-50:  #DFFAF7;
  --sh-teal-100: #A8F1EB;
  --sh-teal-200: #6DE6DC;
  --sh-teal-300: #2BD9CC;
  --sh-teal-400: #00CFC1;  /* = spark-teal */
  --sh-teal-500: #00A59A;
  --sh-teal-600: #007A72;

  /* ---------- Neutral / silver scale ---------- */
  --sh-ink-0:   #FFFFFF;
  --sh-ink-50:  #F8F7FA;
  --sh-ink-100: #EFEEF2;
  --sh-ink-200: #DFDEE4;
  --sh-ink-300: #BFBFBF;  /* = orbit-silver */
  --sh-ink-400: #8F8F95;
  --sh-ink-500: #616167;
  --sh-ink-600: #3D3D42;
  --sh-ink-700: #262629;
  --sh-ink-900: #1A1A1A;  /* = midnight */

  /* ---------- Sticky note colors (flat digital) ---------- */
  --sh-sticky-yellow: #FFE56D;
  --sh-sticky-purple: #E4D8F0;
  --sh-sticky-teal:   #A8F1EB;

  /* ---------- Semantic surfaces ---------- */
  --sh-bg:            var(--sh-white);          /* plain white paper */
  --sh-bg-muted:      var(--sh-ink-50);         /* graph paper underlay */
  --sh-bg-dark:       var(--sh-purple-800);     /* deep brand surface */
  --sh-surface:       var(--sh-white);
  --sh-surface-alt:   var(--sh-purple-50);
  --sh-border:        var(--sh-ink-200);
  --sh-border-strong: var(--sh-ink-300);
  --sh-hairline:      rgba(26, 26, 26, 0.08);

  /* ---------- Semantic foreground ---------- */
  --sh-fg:         var(--sh-midnight);           /* body */
  --sh-fg-strong:  var(--sh-cosmic-purple);      /* headings, strategic */
  --sh-fg-muted:   var(--sh-ink-500);            /* supporting */
  --sh-fg-subtle:  var(--sh-ink-400);            /* captions */
  --sh-fg-invert:  var(--sh-white);
  --sh-link:       var(--sh-cosmic-purple);
  --sh-link-hover: var(--sh-purple-400);

  /* ---------- Semantic accents ---------- */
  --sh-accent:        var(--sh-radiant-gold);
  --sh-accent-strong: var(--sh-gold-500);
  --sh-highlight:     var(--sh-spark-teal);

  /* ---------- Named gradients ---------- */
  --sh-grad-spark:      linear-gradient(135deg, #471C78 0%, #F6A900 100%); /* @kind color */
  --sh-grad-innovation: linear-gradient(135deg, #471C78 0%, #00CFC1 100%); /* @kind color */
  --sh-grad-warmth:     linear-gradient(135deg, #F6A900 0%, #00CFC1 100%); /* @kind color */

  /* ---------- Paper backgrounds (CSS-rendered) ---------- */
  --sh-paper-dot:
    radial-gradient(circle, rgba(71, 28, 120, 0.18) 1px, transparent 1.2px) 0 0 / 18px 18px,
    var(--sh-white);
  --sh-paper-graph:
    linear-gradient(to right, rgba(71, 28, 120, 0.08) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(to bottom, rgba(71, 28, 120, 0.08) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--sh-white);
  --sh-paper-plain: var(--sh-white);

  /* ---------- Type stacks ---------- */
  --sh-font-sans: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sh-font-serif: "Lora", ui-serif, Georgia, serif;
  --sh-font-hand: "Shadows Into Light", "Shadows Into Light Two", "Comic Sans MS", cursive;
  --sh-font-accent: "Raleway Dots", "Nunito", sans-serif;
  --sh-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --sh-text-xs:    12px;
  --sh-text-sm:    14px;
  --sh-text-base:  16px;
  --sh-text-md:    18px;
  --sh-text-lg:    20px;
  --sh-text-xl:    24px;
  --sh-text-2xl:   30px;
  --sh-text-3xl:   36px;
  --sh-text-4xl:   44px;
  --sh-text-5xl:   56px;
  --sh-text-6xl:   72px;

  /* ---------- Line heights ---------- */
  --sh-leading-tight:  1.15;
  --sh-leading-snug:   1.3;
  --sh-leading-normal: 1.5;
  --sh-leading-relaxed:1.7;

  /* ---------- Letter spacing ---------- */
  --sh-track-tight:  -0.01em;
  --sh-track-normal: 0; /* @kind other */
  --sh-track-wide:   0.04em;
  --sh-track-wider:  0.12em;   /* for accent all-caps */

  /* ---------- Spacing scale (4pt base) ---------- */
  --sh-space-1:  4px;
  --sh-space-2:  8px;
  --sh-space-3:  12px;
  --sh-space-4:  16px;
  --sh-space-5:  20px;
  --sh-space-6:  24px;
  --sh-space-8:  32px;
  --sh-space-10: 40px;
  --sh-space-12: 48px;
  --sh-space-16: 64px;
  --sh-space-20: 80px;
  --sh-space-24: 96px;

  /* ---------- Corner radii — soft, hand-drawn quality ---------- */
  --sh-radius-xs:  4px;
  --sh-radius-sm:  8px;
  --sh-radius-md:  12px;
  --sh-radius-lg:  18px;
  --sh-radius-xl:  28px;
  --sh-radius-2xl: 36px;
  --sh-radius-pill: 999px;
  /* "authentic wobble" radii — use on sticky notes / hand-drawn cards */
  --sh-radius-wobble-1: 14px 18px 12px 20px / 16px 14px 20px 12px;
  --sh-radius-wobble-2: 22px 14px 20px 16px / 14px 22px 16px 20px;

  /* ---------- Shadows (soft, paper-on-paper) ---------- */
  --sh-shadow-xs: 0 1px 2px rgba(26, 26, 26, 0.06);
  --sh-shadow-sm: 0 2px 6px rgba(26, 26, 26, 0.08);
  --sh-shadow-md: 0 6px 18px rgba(26, 26, 26, 0.10);
  --sh-shadow-lg: 0 14px 36px rgba(26, 26, 26, 0.12);
  /* Sticky-note shadow — slight offset, no blur halo */
  --sh-shadow-sticky: 2px 3px 0 rgba(26, 26, 26, 0.10), 0 6px 14px rgba(26, 26, 26, 0.06);
  /* Glow shadows — sparingly used for "spark" moments */
  --sh-shadow-glow-gold:   0 0 0 4px rgba(246, 169, 0, 0.16);
  --sh-shadow-glow-purple: 0 0 0 4px rgba(71, 28, 120, 0.16);

  /* ---------- Borders ---------- */
  --sh-border-width: 1.5px;
  --sh-border-width-bold: 2.5px;
  --sh-stroke-hand:  2px; /* icon-style stroke */

  /* ---------- Motion ---------- */
  --sh-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --sh-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --sh-ease-exit:     cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --sh-dur-fast:   140ms; /* @kind other */
  --sh-dur-base:   220ms; /* @kind other */
  --sh-dur-slow:   380ms; /* @kind other */

  /* ---------- Focus ---------- */
  --sh-focus-ring: 0 0 0 3px rgba(246, 169, 0, 0.45);
}

/* =========================================================
   Semantic element styles
   Use by applying classes — or copy into your own components.
   ========================================================= */

/* Base */
.sh-body {
  font-family: var(--sh-font-sans);
  font-weight: 400;
  font-size: var(--sh-text-base);
  line-height: var(--sh-leading-normal);
  color: var(--sh-fg);
  background: var(--sh-bg);
  -webkit-font-smoothing: antialiased;
}

/* Display & headings — always Nunito Bold/Black, purple by default */
.sh-display {
  font-family: var(--sh-font-sans);
  font-weight: 900;
  font-size: var(--sh-text-6xl);
  line-height: var(--sh-leading-tight);
  letter-spacing: var(--sh-track-tight);
  color: var(--sh-fg-strong);
}
.sh-h1 {
  font-family: var(--sh-font-sans);
  font-weight: 800;
  font-size: var(--sh-text-4xl);
  line-height: var(--sh-leading-tight);
  letter-spacing: var(--sh-track-tight);
  color: var(--sh-fg-strong);
}
.sh-h2 {
  font-family: var(--sh-font-sans);
  font-weight: 700;
  font-size: var(--sh-text-3xl);
  line-height: var(--sh-leading-snug);
  color: var(--sh-fg-strong);
}
.sh-h3 {
  font-family: var(--sh-font-sans);
  font-weight: 700;
  font-size: var(--sh-text-2xl);
  line-height: var(--sh-leading-snug);
  color: var(--sh-fg-strong);
}
.sh-h4 {
  font-family: var(--sh-font-sans);
  font-weight: 700;
  font-size: var(--sh-text-xl);
  line-height: var(--sh-leading-snug);
  color: var(--sh-fg);
}

/* Body */
.sh-p {
  font-family: var(--sh-font-sans);
  font-weight: 400;
  font-size: var(--sh-text-md);
  line-height: var(--sh-leading-relaxed);
  color: var(--sh-fg);
}
.sh-p-light {
  font-family: var(--sh-font-sans);
  font-weight: 300;
  font-size: var(--sh-text-md);
  line-height: var(--sh-leading-relaxed);
  color: var(--sh-fg);
}
.sh-small {
  font-size: var(--sh-text-sm);
  color: var(--sh-fg-muted);
}
.sh-caption {
  font-size: var(--sh-text-xs);
  color: var(--sh-fg-subtle);
  letter-spacing: var(--sh-track-wide);
}

/* Editorial serif — for pull quotes and essays */
.sh-serif {
  font-family: var(--sh-font-serif);
  font-weight: 400;
  line-height: var(--sh-leading-relaxed);
}
.sh-quote {
  font-family: var(--sh-font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--sh-text-2xl);
  line-height: var(--sh-leading-snug);
  color: var(--sh-fg-strong);
}

/* Hand-drawn / annotation — used for margin notes and sticky labels */
.sh-hand {
  font-family: var(--sh-font-hand);
  font-weight: 400;
  font-size: var(--sh-text-lg);
  line-height: var(--sh-leading-snug);
  color: var(--sh-fg);
}

/* Accent — Raleway Dots. SPICE ONLY. One per composition. */
.sh-accent-dots {
  font-family: var(--sh-font-accent);
  font-weight: 400;
  font-size: var(--sh-text-sm);
  letter-spacing: var(--sh-track-wider);
  text-transform: uppercase;
  color: var(--sh-fg-strong);
}

/* Eyebrow / kicker */
.sh-eyebrow {
  font-family: var(--sh-font-sans);
  font-weight: 700;
  font-size: var(--sh-text-xs);
  letter-spacing: var(--sh-track-wider);
  text-transform: uppercase;
  color: var(--sh-accent-strong);
}

/* Links */
.sh-link {
  color: var(--sh-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--sh-dur-base) var(--sh-ease-standard);
}
.sh-link:hover { color: var(--sh-link-hover); }

/* Utility: gradient text */
.sh-text-gradient-spark {
  background: var(--sh-grad-spark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sh-text-gradient-innovation {
  background: var(--sh-grad-innovation);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}