/* ============================================================
   UTSPRING — COLORS & TYPE
   A Norwegian community for authentic emergence.
   Palette pulled directly from the hand-drawn mandala logo.
   ============================================================ */

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

/* Montserrat via Google Fonts — import where used, or in <link> */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap");

:root {
  /* ---------- CORE BRAND ---------- */
  --utspring-purple:      #3B01FF;   /* the ink */
  --utspring-pink:        #FF79D9;   /* the offset / aura */
  --utspring-lilac:       #E1D5FF;   /* soft purple wash */
  --utspring-mist:        #ECE5FE;   /* lightest purple tint */
  --utspring-blush:       #FFDEF7;   /* soft pink wash */
  --utspring-paper:       #FFFFFF;   /* page */
  --utspring-ink:         #0A0A14;   /* near-black for body */

  /* ---------- EXTENDED PURPLES ---------- */
  --purple-50:   #ECE5FE;
  --purple-100:  #E1D5FF;
  --purple-200:  #B392FF;
  --purple-300:  #8A5CFF;
  --purple-400:  #5A1BFF;
  --purple-500:  #3B01FF;   /* brand */
  --purple-600:  #2E00CC;
  --purple-700:  #220099;
  --purple-800:  #17006B;
  --purple-900:  #0C003D;

  /* ---------- EXTENDED PINKS ---------- */
  --pink-50:     #FFDEF7;
  --pink-100:    #FFCEF2;
  --pink-200:    #FFB5E5;
  --pink-300:    #FF9BDE;
  --pink-400:    #FF79D9;   /* brand */
  --pink-500:    #F24FC4;
  --pink-600:    #C93AA2;

  /* ---------- NEUTRALS (rooted in #3B01FF — desaturated purple-greys) ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F5FA;
  --neutral-100: #ECEAF4;
  --neutral-200: #D6D2E5;
  --neutral-300: #B4AECB;
  --neutral-400: #8B84A6;
  --neutral-500: #625C80;
  --neutral-600: #463F5F;
  --neutral-700: #2E2842;
  --neutral-800: #1A162B;
  --neutral-900: #0B0818;

  /* ---------- SEMANTIC FG / BG ---------- */
  --fg-1: var(--utspring-ink);       /* primary body */
  --fg-2: var(--neutral-600);        /* secondary body */
  --fg-3: var(--neutral-400);        /* tertiary, captions, meta */
  --fg-brand: var(--utspring-purple);
  --fg-accent: var(--utspring-pink);
  --fg-on-purple: var(--utspring-paper);
  --fg-on-pink: var(--utspring-purple);

  --bg-1: var(--utspring-paper);     /* default page */
  --bg-2: var(--neutral-100);        /* recessed */
  --bg-3: var(--neutral-200);        /* cards / wells */
  --bg-ink: var(--utspring-ink);     /* dark mode surface */
  --bg-brand: var(--utspring-purple);
  --bg-accent: var(--utspring-pink);

  /* ---------- SEMANTIC STATES (tuned for #3B01FF + #FF79D9) ---------- */
  --success: #2E8F6E;
  --warning: #D9A441;
  --danger:  #B8246B;
  --info:    var(--utspring-purple);

  /* ---------- BORDERS ---------- */
  --border-1: color-mix(in srgb, var(--utspring-ink) 12%, transparent);
  --border-2: color-mix(in srgb, var(--utspring-ink) 22%, transparent);
  --border-ink: var(--utspring-ink);
  --border-brand: var(--utspring-purple);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Lumosky", "Caveat Brush", "Permanent Marker", system-ui, sans-serif;
  --font-body:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SIZES ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;
  --text-6xl:  120px;

  /* ---------- WEIGHTS ---------- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- TRACKING ---------- */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.16em;   /* used on small caps / eyebrows */

  /* ---------- LEADING ---------- */
  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* ---------- SPACING (4px base) ---------- */
  --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;

  /* ---------- RADII — soft, hand-drawn feel ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 36px;
  --radius-pill: 999px;
  /* "wonky" — for capsules that feel slightly irregular */
  --radius-wonky: 22px 28px 20px 26px;

  /* ---------- SHADOWS — purple-tinted, soft ---------- */
  --shadow-xs: 0 1px 2px rgba(74, 0, 255, 0.08);
  --shadow-sm: 0 2px 6px rgba(74, 0, 255, 0.10);
  --shadow-md: 0 8px 20px rgba(74, 0, 255, 0.12);
  --shadow-lg: 0 16px 40px rgba(74, 0, 255, 0.16);
  --shadow-xl: 0 28px 70px rgba(74, 0, 255, 0.22);
  /* The signature "pink offset" — mimics the dual-color logo */
  --shadow-offset-pink: 6px 6px 0 var(--pink-400);
  --shadow-offset-purple: 6px 6px 0 var(--purple-500);
  --shadow-offset-ink: 4px 4px 0 var(--utspring-ink);

  /* ---------- DURATIONS / EASING ---------- */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   160ms;
  --dur-base:   280ms;
  --dur-slow:   520ms;
}

/* ============================================================
   BASE ELEMENT STYLES
   Opinionated defaults. Consumers can opt out.
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
}

/* Display headlines use Lumosky — the hand-drawn voice of the brand. */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(var(--text-3xl), 7vw, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-brand);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  line-height: var(--leading-tight);
  color: var(--fg-brand);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-brand);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-2);
  line-height: var(--leading-snug);
}

.quote {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  color: var(--fg-brand);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

a {
  color: var(--fg-brand);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out-soft);
}
a:hover { color: var(--pink-500); }