/**
 * encre-tokens.css — Veri Source "Encre" palette
 * ------------------------------------------------------------------
 * Load this AFTER variables.css and BEFORE app.css in every page:
 *
 *   <link rel="stylesheet" href="variables.css">
 *   <link rel="stylesheet" href="encre-tokens.css">   <-- new
 *   <link rel="stylesheet" href="app.css">
 *
 * Two things happen at once:
 *
 * 1. MIGRATION SHORTCUT. It re-points the existing variable names your
 *    CSS already uses. --secondary was the green used for every primary
 *    button in the app; in Encre the action colour is navy, so simply
 *    re-pointing it converts most buttons, focus rings and active nav
 *    states without touching a single rule. Green survives where green
 *    means something: --success / "human" verdicts.
 *
 * 2. MISSING TOKEN FIXES. Your stylesheets call ~10 variables that are
 *    never defined (see the block at the bottom). Undefined variables
 *    make the whole declaration invalid, which is why the hero badge has
 *    no pill and the bulk page has no type hierarchy. Defining them here
 *    fixes those bugs with no markup changes.
 */

:root {
  /* === ENCRE — surfaces ============================================ */
  --canvas:            #E7ECF4;  /* page background */
  --surface:           #F8FAFD;  /* cards, panels */
  --surface-inset:     #EEF2F9;  /* fills inside a card: inputs, rows */
  --surface-inset-2:   #DCE3EF;  /* segmented-control track, bar tracks */
  --hairline:          #E3E9F4;  /* ONLY for list separators, never borders */

  /* === ENCRE — brand & action ===================================== */
  --rail:              #142253;  /* sidebar / dark bands */
  --rail-icon:         #93B4FF;  /* icons on the rail (= brand mark) */
  --rail-text:         #CBD6EC;
  --rail-label:        #7C8CB6;
  --action:            #2A4CA8;  /* primary button, links, active state */
  --action-hover:      #1E3C8C;

  /* === ENCRE — text ============================================== */
  --ink:               #0F1B3D;  /* headings, values */
  --ink-body:          #2A3550;  /* long-form body copy */
  --ink-muted:         #5B6785;  /* labels, metadata — 5.9:1 on surface */

  /* === Verdict semantics ========================================= */
  /* Green = human, red = AI, amber = mixed. Never used for branding. */
  --verdict-human:     #15803D;
  --verdict-human-bg:  rgba(22,163,74,.10);
  --verdict-ai:        #D6314B;
  --verdict-ai-strong: #B0233A;
  --verdict-ai-bg:     rgba(214,49,75,.10);
  --verdict-ai-mark:   rgba(214,49,75,.16); /* inline text highlight */
  --verdict-mixed:     #B45309;
  --verdict-mixed-bg:  rgba(180,83,9,.10);
  --verdict-mixed-mark:rgba(180,83,9,.18);

  /* === Radius ==================================================== */
  --r-pill:  9999px;
  --r-chip:  12px;
  --r-field: 14px;
  --r-card:  20px;
  --r-hero:  22px;

  /* === Elevation — ONE shadow, plus a lift for hero cards ======== */
  --elev-1: 0 1px 2px rgba(15,27,61,.06);
  --elev-2: 0 1px 2px rgba(15,27,61,.06), 0 10px 30px -18px rgba(15,27,61,.20);
  --elev-3: 0 1px 2px rgba(15,27,61,.06), 0 14px 40px -22px rgba(15,27,61,.25);

  /* === Motion ==================================================== */
  --ease-out:   cubic-bezier(.2,.8,.2,1);
  --t-press:    120ms ease;
  --t-hover:    150ms ease;
  --t-enter:    260ms var(--ease-out);
  --t-bar:      700ms var(--ease-out);

  /* === Type scale (real hierarchy — the app is currently ~all 14px) */
  --fs-11: .6875rem;  /* rail group labels, tab labels */
  --fs-12: .75rem;    /* uppercase eyebrows */
  --fs-13: .8125rem;  /* helper text, chips */
  --fs-14: .875rem;   /* secondary UI */
  --fs-15: .9375rem;  /* body UI, nav, rows */
  --fs-16: 1rem;      /* long-form reading, primary button */
  --fs-17: 1.0625rem; /* card titles, verdict sentence */
  --fs-19: 1.1875rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;      /* page title */
  --fs-44: 2.75rem;   /* price, progress count */
  --fs-60: 3.75rem;   /* verdict numeral */

  --ls-tight:  -.025em; /* titles */
  --ls-numeral: -.04em; /* big numbers */


  /* ================================================================
     RE-POINTED LEGACY TOKENS — this is what converts existing CSS
     ================================================================ */
  --primary:        #142253;
  --primary-dark:   #0E1838;
  --primary-light:  #2A4CA8;
  --primary-subtle: #93B4FF;

  /* was #22C55E green: every .btn-primary / .btn-scan-now / focus ring */
  --secondary:       #2A4CA8;
  --secondary-dark:  #1E3C8C;
  --secondary-light: #3A5DBE;

  --success: #15803D;   /* stays green — "human" */
  --danger:  #D6314B;
  --warning: #B45309;   /* was #FDE047 yellow: unreadable on white */
  --info:    #2A4CA8;

  --text-primary:   #0F1B3D;
  --text-secondary: #5B6785;
  --text-tertiary:  #5B6785;  /* was #9ca3af — failed contrast */
  --text-muted:     #5B6785;  /* was #9ca3af — failed contrast */

  --bg-primary:   #F8FAFD;
  --bg-secondary: #EEF2F9;
  --bg-tertiary:  #DCE3EF;

  --border:        transparent; /* Encre is borderless: tonal fills only */
  --border-light:  transparent;
  --border-medium: transparent;
  --border-dark:   #DCE3EF;

  --shadow-sm:   0 1px 2px rgba(15,27,61,.06);
  --shadow-base: 0 1px 2px rgba(15,27,61,.06);
  --shadow-md:   0 1px 2px rgba(15,27,61,.06), 0 10px 30px -18px rgba(15,27,61,.20);
  --shadow-lg:   0 1px 2px rgba(15,27,61,.06), 0 14px 40px -22px rgba(15,27,61,.25);
  --shadow-xl:   0 1px 2px rgba(15,27,61,.06), 0 18px 48px -26px rgba(15,27,61,.30);
  --shadow-primary: 0 8px 20px -10px rgba(42,76,168,.55);
  --shadow-danger:  0 8px 20px -10px rgba(214,49,75,.45);
  --shadow-warning: 0 8px 20px -10px rgba(180,83,9,.40);

  /* Kill the decorative gradients. Keep the names so nothing breaks. */
  --gradient-primary:   none;
  --gradient-secondary: none;
  --gradient-accent:    none;
  --gradient-ai:        none;
  --gradient-subtle:    none;

  --glass-bg:   rgba(248,250,253,.86);
  --glass-blur: blur(20px);


  /* ================================================================
     MISSING TOKENS — called by your CSS but never defined anywhere.
     Each of these is currently a live rendering bug.
     ================================================================ */

  /* landing.css .nav-container, freemium.css .nav-container
     (typo for --container-2xl → nav had no max width at all) */
  --container-xxl: 1400px;

  /* bulk.css calls these 14 times. Undefined = every title, file name,
     metadata line and hint on /bulk collapsed to inherited 16px. */
  --font-size-sm: .8125rem;
  --font-size-md: .9375rem;
  --font-size-lg: 1.0625rem;
  --font-size-xl: 1.25rem;

  /* landing.css .hero-badge (background + border), .demo-placeholder
     (background), .btn-secondary:hover (border-color).
     Undefined = badge rendered with no pill, demo frame rendered empty. */
  --overlay-green-10: rgba(42,76,168,.10);
  --overlay-green-15: rgba(42,76,168,.15);
  --overlay-green-20: rgba(42,76,168,.20);
  --overlay-green-30: rgba(42,76,168,.30);
  --overlay-white-50: rgba(255,255,255,.50);
}


/* ==================================================================
   NUIT — dark theme. Same geometry, same sizes; only values change.
   Elevation comes from lightness, not shadow (a shadow is invisible
   on a dark canvas).
   Activate with <html data-theme="dark"> or the media query below.
   ================================================================== */
[data-theme="dark"] {
  --canvas:          #0F131A;
  --surface:         #181D26;
  --surface-inset:   #212836;
  --surface-inset-2: #2B3446;
  --hairline:        #262E3D;

  --rail:       #141922;
  --rail-icon:  #7BA2FF;
  --rail-text:  #A8B0C0;
  --rail-label: #6E7688;
  --action:       #3B63D6;
  --action-hover: #4A72E8;

  --ink:       #E8EBF1;
  --ink-body:  #B6BECD;
  --ink-muted: #8D96A8;

  --verdict-human:      #4ADE80;
  --verdict-human-bg:   rgba(74,222,128,.14);
  --verdict-ai:         #FF8A8A;
  --verdict-ai-strong:  #FFB3B3;
  --verdict-ai-bg:      rgba(255,138,138,.14);
  --verdict-ai-mark:    rgba(255,138,138,.16);
  --verdict-mixed:      #FBBF6B;
  --verdict-mixed-bg:   rgba(251,191,107,.14);
  --verdict-mixed-mark: rgba(251,191,107,.18);

  --elev-1: none;
  --elev-2: none;
  --elev-3: none;

  --primary: #141922;
  --secondary: #3B63D6;
  --secondary-light: #4A72E8;
  --success: #4ADE80;
  --danger:  #FF8A8A;
  --warning: #FBBF6B;
  --text-primary:   #E8EBF1;
  --text-secondary: #8D96A8;
  --text-tertiary:  #8D96A8;
  --text-muted:     #8D96A8;
  --bg-primary:   #181D26;
  --bg-secondary: #212836;
  --bg-tertiary:  #2B3446;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --glass-bg: rgba(24,29,38,.86);
}


/* ==================================================================
   Three rules worth adding globally. Everything else is per-file work
   described in README.md.
   ================================================================== */

/* 1. The app canvas is currently navy, because .app-layout paints
      var(--primary) and .main-content paints nothing. */
.app-layout   { background: var(--canvas); }
.main-content { background: var(--canvas); }

/* 2. Retire the decorative diagonal streak. It sits on 9 components
      (.content-card, .card, .form-container, .results-modal,
      .analysis-header, .projects-hero, .projects-section,
      .feature-card, .pricing-card) and reads as a rendering artifact. */
.content-card::before,
.card::before,
.form-container::before,
.results-modal::before,
.result-panel::before,
.analysis-header::before,
.page-header-gradient::before,
.projects-hero::before,
.projects-section::before,
.feature-card::before,
.pricing-card::before,
.bulk-upload-section::before,
.files-queue::before,
.progress-section::before,
.hero::before,
.hero::after,
.hero-section::before,
.cta::before,
.project-header-modern::before { content: none; display: none; }

/* 3. Gradient text on the brand mark prints as invisible text if the
      background-clip fails. Use a flat ink colour. */
.brand-name,
.sidebar-brand .brand-name,
.nav-brand .brand-name {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
}