/* =========================================================================
   Nancy AI — Colors & Type Foundations
   =========================================================================

   Fonts substituted from Google Fonts (Framer site uses a custom modern
   geometric sans). Inter is the closest free match used on-screen; Manrope
   carries a slightly warmer display feel similar to the display text on
   Nancy AI's hero. Flag any swap on request from the user.
   ========================================================================= */

/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
:root {
  /* --------------------------------------------------------------------- */
  /* BRAND COLOR — the Nancy violet→indigo→cobalt spectrum                 */
  /* Derived directly from the logo tile and the hero gradient.            */
  /* --------------------------------------------------------------------- */
  --nancy-violet-50:  #F2EFFF;
  --nancy-violet-100: #E6E0FF;
  --nancy-violet-200: #C9BEFF;
  --nancy-violet-300: #A394FF;
  --nancy-violet-400: #7C68F6;
  --nancy-violet-500: #5B3FE4;   /* PRIMARY — "Create Job" button, Nancy name */
  --nancy-violet-600: #4A2FCE;
  --nancy-violet-700: #3A23A8;
  --nancy-violet-800: #2C1A82;
  --nancy-violet-900: #1F1260;

  /* Deep indigo — the dark edge of the logo tile */
  --nancy-indigo-500: #2E1DB8;
  --nancy-indigo-700: #1C117A;

  /* Magenta / cyan — only ever used inside the hero gradient swatch */
  --nancy-magenta:    #D44BE8;
  --nancy-cyan:       #2FC5FF;

  /* --------------------------------------------------------------------- */
  /* NEUTRALS — app chrome, text, borders                                  */
  /* --------------------------------------------------------------------- */
  --n-white:   #FFFFFF;
  --n-bg:      #FAFAFB;   /* app canvas */
  --n-bg-alt:  #F5F5F7;   /* sidebar / secondary surfaces */
  --n-surface: #FFFFFF;   /* cards */
  --n-line:    #EBEBEF;   /* hairlines, dividers */
  --n-line-2:  #DCDCE3;   /* input borders */

  --n-ink-900: #0E1116;   /* headings */
  --n-ink-800: #1A1D24;   /* body strong */
  --n-ink-700: #323640;   /* body */
  --n-ink-500: #6B7280;   /* secondary / metadata */
  --n-ink-400: #9096A2;   /* placeholder */
  --n-ink-300: #C2C6CE;   /* disabled */

  /* --------------------------------------------------------------------- */
  /* SEMANTIC — status dots, score rings, badges                           */
  /* --------------------------------------------------------------------- */
  --s-success:     #12B76A;  /* Active pill dot */
  --s-success-bg:  #ECFDF3;
  --s-warning:     #F59E0B;  /* In Review, mid-range scores */
  --s-warning-bg:  #FFF7E6;
  --s-danger:      #D92D20;  /* Closed, reject */
  --s-danger-bg:   #FEF3F2;
  --s-info:        #2E90FA;
  --s-info-bg:     #EFF8FF;

  /* Score-ring accents seen on Assessment panel */
  --score-accuracy: var(--nancy-violet-500);
  --score-content:  #EA7A0C;

  /* --------------------------------------------------------------------- */
  /* ELEVATION / SHADOW                                                    */
  /* --------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 10px rgba(16, 24, 40, 0.06), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 14px 30px rgba(16, 24, 40, 0.08), 0 4px 10px rgba(16, 24, 40, 0.04);
  /* glow used on the "Nancy is speaking" feature card */
  --shadow-glow: 0 0 0 1px rgba(91, 63, 228, 0.35), 0 18px 40px rgba(91, 63, 228, 0.18);

  /* --------------------------------------------------------------------- */
  /* RADIUS                                                                */
  /* --------------------------------------------------------------------- */
  --r-xs:  6px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;   /* cards */
  --r-xl:  20px;   /* large feature cards */
  --r-2xl: 28px;   /* the big app-frame mockups on the marketing site */
  --r-pill: 999px;

  /* --------------------------------------------------------------------- */
  /* SPACING — 4px grid                                                    */
  /* --------------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* --------------------------------------------------------------------- */
  /* TYPE FAMILIES                                                         */
  /* --------------------------------------------------------------------- */
  --font-display: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --------------------------------------------------------------------- */
  /* TYPE SCALE — marketing tone leans bold, app is tighter                */
  /* --------------------------------------------------------------------- */
  --fs-display-lg: 72px;   /* hero "Hire in hours not weeks." */
  --fs-display-md: 56px;
  --fs-display-sm: 44px;
  --fs-h1: 36px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body: 15px;         /* app body default */
  --fs-body-sm: 13px;
  --fs-caption: 12px;
  --fs-micro: 11px;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --lsp-display: -0.025em;  /* tightened display */
  --lsp-h: -0.01em;
  --lsp-all-caps: 0.08em;   /* "FEATURES", "INTEGRATIONS" eyebrows */

  /* --------------------------------------------------------------------- */
  /* SIGNATURE GRADIENTS                                                   */
  /* --------------------------------------------------------------------- */
  --grad-logo:  linear-gradient(135deg, #5B3FE4 0%, #2E1DB8 100%);
  --grad-hero:  linear-gradient(110deg, #F4F1FF 0%, #E9E3FF 35%, #D7C9FF 60%, #CDE3FF 100%);
  --grad-aurora: radial-gradient(60% 80% at 70% 50%,
                   rgba(212, 75, 232, 0.55) 0%,
                   rgba(91, 63, 228, 0.35) 40%,
                   rgba(47, 197, 255, 0.30) 75%,
                   rgba(250, 250, 251, 0) 100%);
  --grad-feature-ring: linear-gradient(135deg, #FF3DB7 0%, #5B3FE4 100%);
}

/* ========================================================================= */
/* SEMANTIC ALIASES — use these in component CSS                              */
/* ========================================================================= */
:root {
  /* surfaces */
  --bg:        var(--n-bg);
  --bg-alt:    var(--n-bg-alt);
  --surface:   var(--n-surface);
  --border:    var(--n-line);
  --border-strong: var(--n-line-2);

  /* foreground */
  --fg:        var(--n-ink-900);
  --fg-1:      var(--n-ink-800);
  --fg-2:      var(--n-ink-700);
  --fg-muted:  var(--n-ink-500);
  --fg-soft:   var(--n-ink-400);
  --fg-disabled: var(--n-ink-300);

  /* brand */
  --primary:          var(--nancy-violet-500);
  --primary-hover:    var(--nancy-violet-600);
  --primary-active:   var(--nancy-violet-700);
  --primary-soft:     var(--nancy-violet-50);
  --primary-fg:       #FFFFFF;
}

/* ========================================================================= */
/* TEXT UTILITY CLASSES (match semantic names in the system)                  */
/* ========================================================================= */
.t-display-lg { font: 800 var(--fs-display-lg)/var(--lh-tight) var(--font-display); letter-spacing: var(--lsp-display); color: var(--fg); }
.t-display-md { font: 800 var(--fs-display-md)/var(--lh-tight) var(--font-display); letter-spacing: var(--lsp-display); color: var(--fg); }
.t-display-sm { font: 700 var(--fs-display-sm)/var(--lh-snug) var(--font-display); letter-spacing: var(--lsp-display); color: var(--fg); }
.t-h1   { font: 700 var(--fs-h1)/var(--lh-snug)   var(--font-display); letter-spacing: var(--lsp-h); color: var(--fg); }
.t-h2   { font: 700 var(--fs-h2)/var(--lh-snug)   var(--font-display); letter-spacing: var(--lsp-h); color: var(--fg); }
.t-h3   { font: 600 var(--fs-h3)/var(--lh-snug)   var(--font-display); color: var(--fg); }
.t-h4   { font: 600 var(--fs-h4)/var(--lh-normal) var(--font-body);    color: var(--fg-1); }
.t-body-lg { font: 400 var(--fs-body-lg)/var(--lh-relaxed) var(--font-body); color: var(--fg-2); }
.t-body    { font: 400 var(--fs-body)/var(--lh-normal) var(--font-body);     color: var(--fg-2); }
.t-body-sm { font: 400 var(--fs-body-sm)/var(--lh-normal) var(--font-body);  color: var(--fg-2); }
.t-caption { font: 500 var(--fs-caption)/var(--lh-normal) var(--font-body);  color: var(--fg-muted); }
.t-eyebrow { font: 600 var(--fs-caption)/1 var(--font-body); letter-spacing: var(--lsp-all-caps); text-transform: uppercase; color: var(--primary); }
.t-mono    { font: 500 var(--fs-body-sm)/var(--lh-normal) var(--font-mono); color: var(--fg-2); }

/* ========================================================================= */
/* RESET-LITE — what the UI kits expect                                       */
/* ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}