/* ============================================================
   Nudge Design System — Colors & Type
   ============================================================ */

/* ---- FONTS ----
   Primary: Eina 03 (proprietary, licensed by nudge).
   Brand .otf files are loaded locally from /fonts.
*/
@font-face {
  font-family: 'Eina 03';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Eina03-Light__1_.otf') format('opentype');
}
@font-face {
  font-family: 'Eina 03';
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url('fonts/Eina03-LightItalic__1_.otf') format('opentype');
}
@font-face {
  font-family: 'Eina 03';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Eina03-Regular__1_.otf') format('opentype');
}
@font-face {
  font-family: 'Eina 03';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('fonts/Eina03-RegularItalic__1_.otf') format('opentype');
}
@font-face {
  font-family: 'Eina 03';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Eina03-Regular__1_.otf') format('opentype');
}
@font-face {
  font-family: 'Eina 03';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Eina03-SemiBold__1_.otf') format('opentype');
}
@font-face {
  font-family: 'Eina 03';
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src: url('fonts/Eina03-SemiboldItalic__1_.otf') format('opentype');
}
@font-face {
  font-family: 'Eina 03';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Eina03-Bold__1_.otf') format('opentype');
}
@font-face {
  font-family: 'Eina 03';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url('fonts/Eina03-BoldItalic__1_.otf') format('opentype');
}
@font-face {
  font-family: 'Eina 03';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Eina03-Bold__1_.otf') format('opentype');
}

:root {
  /* ---------- BRAND COLORS ---------- */
  --nudge-pink:        #E0008A;   /* primary brand pink (rgb(224,0,138)) */
  --nudge-red:         #EB0000;   /* primary brand red (rgb(235,0,0)) */
  --nudge-pink-deep:   #D61F62;   /* pressed/hover pink */
  --nudge-pink-bright: #FF1AA8;   /* accent pink */
  --nudge-pink-soft:   #DF007E;
  --nudge-red-deep:    #C80D0D;   /* pressed red */
  --nudge-red-bright:  #FF2B2B;
  --nudge-green:       #00FF00;   /* logo accent / progress / 'good' */
  --nudge-purple:      #9747FF;   /* retired coach accent — keep token, don't use on numa */

  /* signature gradient */
  --nudge-gradient: linear-gradient(180deg, #E0008A 0%, #EB0000 100%); /* @kind color */
  --nudge-gradient-h: linear-gradient(90deg,  #E0008A 0%, #EB0000 100%); /* @kind color */

  /* numa — the AI money coach sub-brand. Uses the signature brand gradient,
     never the retired purple. Canonical mark: assets/numa/numa-icon.png */
  --numa-gradient: var(--nudge-gradient); /* @kind color */

  /* ---------- NEUTRALS ---------- */
  --black:        #000000;
  --ink:          #141414;   /* near-black body text */
  --ink-2:        #363636;   /* dark gray text */
  --ink-3:        #424242;
  --ink-4:        #525252;
  --ink-5:        #595959;   /* muted/secondary text */
  --gray-1:       #949494;   /* placeholder/disabled text */
  --gray-2:       #D6D6D6;   /* dividers, subtle stroke */
  --gray-3:       #E2E2E2;
  --gray-4:       #E5E5E5;   /* default border / fill */
  --gray-5:       #EDEDED;
  --gray-6:       #EEEEEE;
  --gray-7:       #F6F6F6;   /* surface tint */
  --gray-8:       #F7F7F7;   /* page background */
  --white:        #FFFFFF;
  --white-78:     rgba(255,255,255,0.78);

  /* ---------- SEMANTIC COLORS ---------- */
  --bg-page:        var(--gray-8);
  --bg-surface:     var(--white);
  --bg-tint:        var(--gray-7);
  --bg-inverse:     var(--ink);

  --fg-primary:     var(--black);
  --fg-secondary:   var(--ink-5);
  --fg-muted:       var(--gray-1);
  --fg-on-brand:    var(--white);
  --fg-link:        var(--nudge-pink);

  --border-default: var(--gray-5);
  --border-strong:  var(--gray-2);
  --border-focus:   var(--black);

  --action-primary:        var(--nudge-gradient);
  --action-primary-hover:  linear-gradient(180deg, #C80077 0%, #C80000 100%); /* @kind color */
  --action-secondary:      var(--gray-4);
  --action-tertiary:       transparent; /* @kind color */

  --status-positive: var(--nudge-green);
  --status-warning:  #FFB020;
  --status-danger:   var(--nudge-red);

  /* ---------- RADII ---------- */
  --radius-xs:  4px;
  --radius-sm:  6px;   /* buttons, fields */
  --radius-md:  8px;
  --radius-lg:  12px;  /* cards */
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(10,13,18,0.05);
  --shadow-sm: 0 1px 3px rgba(10,13,18,0.10), 0 1px 2px rgba(10,13,18,0.06);
  --shadow-md: 0 4px 8px rgba(10,13,18,0.08), 0 2px 4px rgba(10,13,18,0.06);
  --shadow-lg: 0 12px 24px rgba(10,13,18,0.10), 0 4px 8px rgba(10,13,18,0.06);
  --shadow-pop: 0 24px 48px rgba(10,13,18,0.16);

  /* ---------- SPACING ---------- */
  --space-0:  0; /* @kind spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;   /* base gutter */
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ---------- TYPE — base scale ---------- */
  --font-sans: 'Eina 03', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Manrope', sans-serif;

  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* sizes (px values lifted from Figma usage counts) */
  --fs-display: 124px;  /* cover hero */
  --fs-h1:      28px;
  --fs-h2:      24px;
  --fs-h3:      21px;
  --fs-h4:      18px;
  --fs-body-l:  16px;
  --fs-body:    14px;
  --fs-small:   12px;
  --fs-micro:   11px;
  --fs-overline: 7px;

  --lh-tight:   1.0; /* @kind font */
  --lh-snug:    1.15; /* @kind font */
  --lh-normal:  1.4; /* @kind font */
  --lh-relaxed: 1.55; /* @kind font */
}

/* ---------- SEMANTIC TYPE STYLES ---------- */

.ds-display, h1.ds-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--white);
}

.ds-h1, h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--fg-primary);
}

.ds-h2, h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--fg-primary);
}

.ds-h3, h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--fg-primary);
}

.ds-h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

.ds-body-l {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

.ds-body, p {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

.ds-body-strong {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

.ds-small, small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--fg-secondary);
}

.ds-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--fg-primary);
}

.ds-overline {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-overline);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-primary);
}

.ds-link {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- LAYOUT BASELINE ---------- */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-primary);
  background: var(--bg-page);
}