/* Decidr Design System — Colors & Typography
 * Sourced from the Decidr brand system Figma file (V2 - April 2026).
 *
 * Brand fonts:  Noi Grotesk (display + body), Inter (Google substitute)
 * Brand colors: Purple 500 #8E57FB, Orange 400 #F36744 + neutral grey scale
 */

/* ──────────────────────────────────────────────────────────────────
   FONTS
   Noi Grotesk is the brand typeface. We don't have the Noi Grotesk
   licence files in this kit, so we ship Inter as a substitute (the
   brand spec calls Inter the official Google substitute). Drop real
   Noi Grotesk .woff2 files into /fonts and the @font-face below
   will pick them up.
   ────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Noi Grotesk";
  src: local("Noi Grotesk"),
       url("./fonts/NoiGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noi Grotesk";
  src: local("Noi Grotesk Medium"),
       url("./fonts/NoiGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noi Grotesk";
  src: local("Noi Grotesk Semibold"),
       url("./fonts/NoiGrotesk-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ── PRIMITIVE COLOR SCALES ──────────────────────────────────── */

  /* Purple — primary brand */
  --purple-50:  #F5F3FF;
  --purple-100: #EEE8FF;
  --purple-200: #DDD5FF;
  --purple-300: #C5B3FF;
  --purple-400: #A987FE;
  --purple-500: #8E57FB;  /* signature */
  --purple-600: #8034F3;
  --purple-700: #7222DF;
  --purple-800: #5F1CBB;
  --purple-900: #4F1999;
  --purple-950: #300D68;

  /* Orange — secondary brand accent */
  --orange-50:  #FEF3EE;
  --orange-100: #FDE3D7;
  --orange-200: #FAC4AE;
  --orange-300: #F79B7A;
  --orange-400: #F36744;  /* signature accent */
  --orange-500: #EF4120;
  --orange-600: #E12815;
  --orange-700: #BA1A14;
  --orange-800: #941818;
  --orange-900: #781616;
  --orange-950: #400A0D;

  /* Grey — neutrals */
  --grey-50:  #F7F8F8;
  --grey-100: #EEF0F0;
  --grey-200: #D9DEDE;
  --grey-300: #B0BCBC;
  --grey-400: #90A0A0;
  --grey-500: #728585;
  --grey-600: #5C6C6D;
  --grey-700: #4B5959;
  --grey-800: #414B4B;
  --grey-900: #394141;   /* default text — rgb(57,65,65) */
  --grey-950: #262B2B;

  /* Blue */
  --blue-50:  #F3F6FB;
  --blue-100: #E3ECF6;
  --blue-200: #CEDEEF;
  --blue-300: #B4CEE7;
  --blue-400: #84ACD6;
  --blue-500: #6790CA;
  --blue-600: #5378BD;
  --blue-700: #4967AC;
  --blue-800: #40558D;
  --blue-900: #374871;
  --blue-950: #252E46;

  /* Indigo */
  --indigo-50:  #F0F4FD;
  --indigo-100: #E4EBFB;
  --indigo-200: #CEDAF7;
  --indigo-300: #B1C3F0;
  --indigo-400: #92A3E8;
  --indigo-500: #7683DE;
  --indigo-600: #5C62CF;
  --indigo-700: #4C4FB6;
  --indigo-800: #404493;
  --indigo-900: #393D76;
  --indigo-950: #222444;

  /* Red — error */
  --red-50:  #FFF1F1;
  --red-100: #FFDFDF;
  --red-200: #FFC5C6;
  --red-300: #FF9C9D;
  --red-400: #FF6365;
  --red-500: #FF3234;
  --red-600: #F02123;
  --red-700: #C90C0E;
  --red-800: #A60E0F;
  --red-900: #891314;
  --red-950: #4B0405;

  /* Green — success */
  --green-50:  #ECFDF3;
  --green-100: #D2F9E2;
  --green-200: #A8F2C9;
  --green-300: #70E5AD;
  --green-400: #36D18A;
  --green-500: #11A969;
  --green-600: #07945B;
  --green-700: #06764C;
  --green-800: #075E3D;
  --green-900: #074D35;
  --green-950: #032B1E;

  /* Yellow — warning */
  --yellow-50:  #FEFCE8;
  --yellow-100: #FFF8C2;
  --yellow-200: #FFED75;
  --yellow-300: #FFDF45;
  --yellow-400: #FCCB13;
  --yellow-500: #ECB206;
  --yellow-600: #CC8902;
  --yellow-700: #A26006;
  --yellow-800: #864C0D;
  --yellow-900: #723E11;
  --yellow-950: #431F05;

  /* True ink + paper */
  --black: #0A0A0A;
  --white: #FFFFFF;

  /* Black with opacity */
  --black-a05: rgba(10,10,10,0.05);
  --black-a10: rgba(10,10,10,0.10);
  --black-a15: rgba(10,10,10,0.15);
  --black-a20: rgba(10,10,10,0.20);
  --black-a35: rgba(10,10,10,0.35);
  --black-a40: rgba(10,10,10,0.40);
  --black-a60: rgba(10,10,10,0.60);
  --black-a75: rgba(10,10,10,0.75);
  --black-a90: rgba(10,10,10,0.90);

  /* White with opacity */
  --white-a05: rgba(255,255,255,0.05);
  --white-a10: rgba(255,255,255,0.10);
  --white-a15: rgba(255,255,255,0.15);
  --white-a20: rgba(255,255,255,0.20);
  --white-a35: rgba(255,255,255,0.35);
  --white-a40: rgba(255,255,255,0.40);
  --white-a56: rgba(255,255,255,0.56);
  --white-a60: rgba(255,255,255,0.60);
  --white-a75: rgba(255,255,255,0.75);
  --white-a90: rgba(255,255,255,0.90);

  /* ── SEMANTIC TOKENS ─────────────────────────────────────────── */
  --bg:                #FFFFFF;
  --bg-soft:           var(--grey-50);   /* the warm off-white, used everywhere */
  --bg-muted:          var(--grey-100);
  --bg-inverse:        var(--black);
  --bg-brand:          var(--purple-500);
  --bg-accent:         var(--orange-400);

  --fg:                var(--grey-900);  /* default body — rgb(57,65,65) */
  --fg-muted:          var(--grey-600);
  --fg-subtle:         var(--grey-500);
  --fg-inverse:        #FFFFFF;
  --fg-brand:          var(--purple-500);
  --fg-accent:         var(--orange-400);
  --fg-on-brand:       #FFFFFF;
  --fg-on-accent:      #FFFFFF;

  --border:            var(--grey-200);  /* rgb(217,222,222) */
  --border-soft:       var(--grey-100);  /* rgb(238,240,240) */
  --border-strong:     var(--grey-300);
  --border-on-dark:    var(--white-a20);

  --highlight:         var(--blue-500);
  --error:             var(--red-600);
  --success:           var(--green-500);
  --warning:           var(--yellow-500);

  /* ── TYPOGRAPHY ──────────────────────────────────────────────── */
  --font-sans:    "Noi Grotesk", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Noi Grotesk", "Inter", system-ui, sans-serif;
  --font-mono:    "PP Mori", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Tailwind-aligned size scale (per spec) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  32px;
  --text-5xl:  36px;
  --text-6xl:  48px;
  --text-7xl:  64px;
  --text-8xl:  84px;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  --leading-tight: 1;
  --leading-snug:  1.2;
  --leading-body:  1.5;

  --tracking-display: -0.030em;  /* Noi Grotesk display */
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.030em;

  /* ── RADIUS, SPACING, ELEVATION ──────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 40px;
  --radius-2xl: 60px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10,10,10,0.06), 0 1px 1px rgba(10,10,10,0.04);
  --shadow-md: 0 6px 16px rgba(10,10,10,0.08);
  --shadow-lg: 0 16px 48px rgba(10,10,10,0.12);
  --shadow-glow: 0 0 0 4px rgba(142,87,251,0.18);

  /* ── SIGNATURE GRADIENTS (from Brand Library / Cover) ────────── */
  --gradient-brand:
    linear-gradient(180deg, var(--purple-500) 0%, var(--purple-500) 20%,
                            var(--orange-400) 80%, var(--orange-400) 100%);
  --gradient-cover:
    radial-gradient(at 70% 30%, var(--orange-400) 0%, transparent 60%),
    radial-gradient(at 20% 80%, var(--purple-300) 0%, transparent 60%),
    var(--purple-500);
  --gradient-aurora:
    radial-gradient(at 20% 30%, var(--purple-300) 0%, transparent 50%),
    radial-gradient(at 80% 20%, var(--orange-300) 0%, transparent 50%),
    radial-gradient(at 50% 90%, var(--indigo-300) 0%, transparent 50%),
    var(--grey-50);
}

/* ── SEMANTIC TYPE STYLES ──────────────────────────────────────── */
html, body { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }

.h-display, h1.display {
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 200px);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-regular);
  color: var(--black);
  text-wrap: balance;
}
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-8xl);     /* 84 */
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-regular);
  color: var(--black);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-6xl);     /* 48 */
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-regular);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);     /* 32 */
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-medium);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);     /* 24 */
  line-height: var(--leading-snug);
  font-weight: var(--weight-medium);
  margin: 0;
}
.subhead {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);    /* 16 */
  line-height: var(--leading-body);
  color: var(--fg);
  margin: 0;
}
.body-lg  { font-size: var(--text-lg); line-height: var(--leading-body); }
.body-sm  { font-size: var(--text-sm); line-height: var(--leading-body); }
.caption  { font-size: var(--text-xs); line-height: var(--leading-body); color: var(--fg-muted); }
.eyebrow  {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.metric {
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  line-height: var(--leading-tight);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
}
code, .code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}