/* ==========================================================================
   CRAiD Design System — Colors & Type
   Source of truth for all CRAiD branded interfaces.
   Based on the CRAiD Relaunch 2026 v002 theme (Figma + Sanity CMS site).
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
}

:root {
  /* ----- Brand color ---------------------------------------------------- */
  --craid-pink: #EC16F5;          /* hero mark, primary actions, accents  */
  --craid-pink-soft: #F7B3FA;     /* pink tint (approx 40%)               */
  --craid-pink-wash: rgba(236, 22, 245, 0.10);  /* chip / tag backgrounds */
  --craid-pink-ring: rgba(236, 22, 245, 0.20);  /* focus / border wash    */

  /* ----- Neutrals (app chrome) ----------------------------------------- */
  --craid-ink:    #131F22;  /* foreground / headings                     */
  --craid-slate:  #304953;  /* muted-foreground / body text              */
  --craid-paper:  #F6FAFB;  /* background (nearly white, cool tint)      */
  --craid-card:   #FFFFFF;  /* card / popover                            */
  --craid-border: #E4D8F5;  /* "Nice" — lavender hairline on cards, nav, chips */

  /* ----- Secondary / muted (lavender wash) ----------------------------- */
  --craid-lavender: #E4D8F5;          /* secondary / muted / accent bg   */
  --craid-lavender-soft: #EDE6F5;     /* hero gradient mid-stop          */

  /* ----- Semantic ------------------------------------------------------- */
  --craid-destructive: #ff3b5c;
  --craid-success:     #10B981;
  --craid-warning:     #F59E0B;

  /* ----- Semantic role tokens (the names you should code against) ------ */
  --bg:             var(--craid-paper);
  --bg-card:        var(--craid-card);
  --fg:             var(--craid-ink);
  --fg-muted:       var(--craid-slate);
  --fg-subtle:      rgba(48, 73, 83, 0.60);
  --border:         var(--craid-border);
  --primary:        var(--craid-pink);
  --primary-fg:     #FFFFFF;
  --secondary:      var(--craid-lavender);
  --secondary-fg:   var(--craid-ink);
  --ring:           var(--craid-pink);
  --destructive:    var(--craid-destructive);

  /* ----- Type ----------------------------------------------------------- */
  --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-size-base: 16px;

  /* Weights (DM Sans is variable; we use these stops) */
  --fw-light:    300;   /* display headlines & body prose         */
  --fw-regular:  400;
  --fw-medium:   500;   /* h1–h4 defaults, buttons, labels         */
  --fw-semibold: 600;   /* CTAs, card titles                       */
  --fw-bold:     700;   /* section section H2s                     */

  /* Tracking */
  --tracking-tight: -0.025em;
  --tracking-wide:   0.025em;
  --tracking-widest: 0.1em;   /* overlines / eyebrow caps          */

  /* Scale (semantic) */
  --text-xs:   0.75rem;   /* 12px — micro labels                  */
  --text-sm:   0.875rem;  /* 14px — UI meta                       */
  --text-base: 1rem;      /* 16px — body                          */
  --text-lg:   1.125rem;  /* 18px — h3                            */
  --text-xl:   1.25rem;   /* 20px — h2                            */
  --text-2xl:  1.5rem;    /* 24px — h1                            */
  --text-3xl:  2rem;      /* 32px — block heading                 */
  --text-4xl:  2.5rem;    /* 40px — section H2                    */
  --text-5xl:  3.5rem;    /* 56px — big section H2                */
  --text-6xl:  5.5rem;    /* 88px — hero display md               */
  --text-7xl:  7rem;      /* 112px — hero display lg              */

  /* Line heights */
  --lh-display: 0.95;   /* hero / giant type                      */
  --lh-tight:   1.1;    /* section H2s                            */
  --lh-snug:    1.25;
  --lh-normal:  1.5;    /* default UI                             */
  --lh-relaxed: 1.625;  /* long-form                              */

  /* ----- Spacing (4px baseline) --------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;   /* py-32 section rhythm */

  /* ----- Radii -------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;  /* app base --radius: 0.625rem */
  --radius-xl:   14px;
  --radius-2xl:  16px;  /* cards */
  --radius-3xl:  24px;  /* feature cards */
  --radius-pill: 9999px; /* buttons, chips, overlines */

  /* ----- Shadows (soft, low-contrast) --------------------------------- */
  --shadow-sm: 0 1px 2px rgba(19, 31, 34, 0.04), 0 1px 3px rgba(19, 31, 34, 0.04);
  --shadow-md: 0 4px 12px rgba(19, 31, 34, 0.06), 0 1px 3px rgba(19, 31, 34, 0.04);
  --shadow-lg: 0 12px 32px rgba(19, 31, 34, 0.08), 0 2px 8px rgba(19, 31, 34, 0.04);
  --shadow-glow: 0 0 0 6px rgba(236, 22, 245, 0.12);

  /* ----- Motion ------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med:  400ms;
  --dur-slow: 700ms;

  /* ----- Signature gradients (hero / atmosphere) ---------------------- */
  --grad-hero-vertical: linear-gradient(to bottom, #F6FAFB 0%, #EDE6F5 50%, #F6FAFB 100%);
  --grad-hero-radial:   radial-gradient(ellipse at 50% 40%, rgba(236, 22, 245, 0.12) 0%, rgba(246, 250, 251, 0.7) 55%);
  --grad-services-wash: radial-gradient(ellipse at 80% 50%, rgba(236, 22, 245, 0.08) 0%, transparent 50%);
}

/* --- Base element styles (matches app defaults) -------------------------- */
html  { font-size: var(--font-size-base); font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body  { font-family: var(--font-sans); background: var(--bg); color: var(--fg); }

h1    { font-size: var(--text-2xl); font-weight: var(--fw-medium); line-height: var(--lh-normal); }
h2    { font-size: var(--text-xl);  font-weight: var(--fw-medium); line-height: var(--lh-normal); }
h3    { font-size: var(--text-lg);  font-weight: var(--fw-medium); line-height: var(--lh-normal); }
h4, label, button { font-size: var(--text-base); font-weight: var(--fw-medium); line-height: var(--lh-normal); }
input { font-size: var(--text-base); font-weight: var(--fw-regular); line-height: var(--lh-normal); }
p     { line-height: var(--lh-relaxed); }

/* --- Composite display classes (use these in marketing surfaces) --------- */
.display-xl {      /* hero line — 88–112px, light weight, tight tracking  */
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(2.8rem, 7vw, 7rem);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
}
.display-lg {      /* section H2 — 40–56px, bold                          */
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: var(--lh-tight);
}
.display-md {      /* card heading — 32–40px                              */
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 3vw, 2.5rem);
  line-height: var(--lh-tight);
}
.overline {        /* eyebrow — 13px, tracked, uppercase, pink or mute    */
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--primary);
}
.lead {            /* hero sub-copy — 18–21px, light weight, muted        */
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(1.1rem, 1.3vw, 1.3rem);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
.body {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 0.95rem;
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
.meta {            /* chips, tags, outcome labels                         */
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--fw-regular);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-wide);
}

/* --- Utility primitives used across the kit ------------------------------ */
.btn-primary {
  background: var(--primary); color: var(--primary-fg);
  padding: 14px 32px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 1rem;
  border: 0; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.btn-primary:hover  { opacity: 0.9; transform: scale(1.05); }
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  background: transparent; color: var(--fg);
  padding: 14px 32px; border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: 1rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.btn-secondary:hover { background: rgba(255,255,255,0.5); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); font-size: 0.75rem;
  color: var(--fg-muted); background: transparent;
  letter-spacing: var(--tracking-wide);
}
.chip-primary {
  background: var(--craid-pink-wash);
  border-color: var(--craid-pink-ring);
  color: var(--primary);
}
.overline-pill {  /* the pulsing pill above the hero headline */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.60); border: 1px solid var(--border);
}
.overline-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary); animation: pulse-pink 2s var(--ease-in-out) infinite;
}
@keyframes pulse-pink {
  0%, 100% { opacity: 1; } 50% { opacity: 0.4; }
}

.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-med) var(--ease-out);
}
.card:hover { border-color: var(--craid-pink-ring); }