/* ==========================================================================
   Vyuu Design System · Colors & Type
   --------------------------------------------------------------------------
   A calm, warm, editorial BFSI admin console. Cream + saffron orange + a touch of
   terracotta. Serif display (Fraunces), humanist UI sans, mono for data.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Core palette ---------- */
  --vyuu-bg:          #F7F4ED;  /* warm cream — app background */
  --vyuu-panel:       #FFFEFB;  /* slightly warmer than white — cards */
  --vyuu-ivory:       #FBF8F1;  /* sidebar / hover fill */
  --vyuu-ink:         #1F2A2E;  /* deep teal-black — body & headings */
  --vyuu-muted:       #6B7A7D;  /* secondary text */
  --vyuu-subtle:      #A9B4B5;  /* tertiary / disabled */
  --vyuu-line:        #E4DED1;  /* dividers & borders */
  --vyuu-line-soft:   #EDE8DC;  /* table row separators, tints */

  /* ---------- Brand — Saffron Orange (primary) ---------- */
  --vyuu-orange:        #D6843E;
  --vyuu-orange-deep:   #A85820;  /* primary button, emphasis */
  --vyuu-orange-soft:   #F3DAB6;  /* pill bg, active nav */
  --vyuu-orange-mist:   #FAEDD5;  /* subtle surfaces */

  /* ---------- Accents ---------- */
  --vyuu-sand:        #E8DFC9;  /* avatar / warm tint */
  --vyuu-terracotta:  #C17457;  /* high-risk / blocked / danger */
  --vyuu-terracotta-ink:  #8A4A34;  /* readable text on terracotta tints */
  --vyuu-terracotta-soft: #F4E2D9;
  --vyuu-terracotta-mist: #FAEFE9;
  --vyuu-amber:       #D4A259;  /* medium-risk / redacted / warn */
  --vyuu-amber-ink:   #8A6420;
  --vyuu-amber-soft:  #F7EBD4;
  --vyuu-amber-mist:  #FBF4E4;
  --vyuu-ocean:       #4E7A8A;  /* informational / categorical */
  --vyuu-ocean-ink:   #2E5565;
  --vyuu-ocean-soft:  #DCE7EC;
  --vyuu-ocean-mist:  #ECF3F5;

  /* ---------- Dark code surface (for terminal/code blocks) ---------- */
  --vyuu-code-bg:     #2A3638;
  --vyuu-code-fg:     #DCE7EC;

  /* ---------- Typography — families ---------- */
  --vyuu-serif:  'Fraunces', 'Iowan Old Style', 'Apple Garamond', Georgia, serif;
  --vyuu-sans:   'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vyuu-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  /* ---------- Semantic type tokens ----------
     Serif is used for PAGE TITLES, KPIs, SECTION HEADS and numbers-you-want-to-feel.
     Sans for everything interactive, labels, body. Mono for IDs, paths, code.
  */
  --vyuu-display:    400 40px/1.05  var(--vyuu-serif);   /* hero, KPI big numbers */
  --vyuu-h1:         400 30px/1.1   var(--vyuu-serif);   /* page title */
  --vyuu-h2:         500 22px/1.2   var(--vyuu-serif);   /* card title */
  --vyuu-h3:         500 18px/1.25  var(--vyuu-serif);   /* sub-card title */
  --vyuu-kpi:        400 36px/1     var(--vyuu-serif);   /* KPI value */

  --vyuu-body:       400 13.5px/1.55 var(--vyuu-sans);   /* default body text */
  --vyuu-body-lg:    400 15px/1.55  var(--vyuu-sans);    /* lede / intro copy */
  --vyuu-ui:         500 13px/1.3   var(--vyuu-sans);    /* buttons, menu, interactive */
  --vyuu-ui-sm:      500 12px/1.3   var(--vyuu-sans);    /* small UI */
  --vyuu-label:      500 12.5px/1.3 var(--vyuu-sans);    /* form labels, table cells */

  /* Uppercase eyebrows — the signature detail above every page title */
  --vyuu-eyebrow:    600 10px/1.2   var(--vyuu-sans);
  --vyuu-eyebrow-letter-spacing: 2.5px;
  --vyuu-eyebrow-transform: uppercase;

  /* Table column headers */
  --vyuu-th:         600 10.5px/1.2 var(--vyuu-sans);
  --vyuu-th-letter-spacing: 1.5px;

  --vyuu-mono-sm:    400 12px/1.4   var(--vyuu-mono);
  --vyuu-mono-md:    500 13px/1.4   var(--vyuu-mono);   /* identifiers, hostnames */

  /* ---------- Radii ---------- */
  --vyuu-r-xs:   4px;
  --vyuu-r-sm:   6px;
  --vyuu-r-md:   8px;   /* buttons, inputs */
  --vyuu-r-lg:   10px;  /* nested cards */
  --vyuu-r-xl:   12px;  /* top-level cards */
  --vyuu-r-pill: 999px;

  /* ---------- Elevation (very restrained) ---------- */
  --vyuu-shadow-sm:  0 1px 2px rgba(31, 42, 46, 0.04);
  --vyuu-shadow-md:  0 2px 8px rgba(168, 88, 32, 0.20);   /* tinted w/ orange-deep */
  --vyuu-shadow-lg:  0 8px 24px rgba(31, 42, 46, 0.08);

  /* ---------- Spacing rhythm ---------- */
  --vyuu-s-1: 4px;
  --vyuu-s-2: 8px;
  --vyuu-s-3: 12px;
  --vyuu-s-4: 16px;
  --vyuu-s-5: 20px;
  --vyuu-s-6: 24px;
  --vyuu-s-8: 32px;
  --vyuu-s-10: 40px;
}

/* ---------- Semantic element resets (optional — import when scoped) ---------- */
.vyuu-scope {
  font: var(--vyuu-body);
  color: var(--vyuu-ink);
  background: var(--vyuu-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.vyuu-scope h1 { font: var(--vyuu-h1); letter-spacing: -0.5px; color: var(--vyuu-ink); margin: 0; }
.vyuu-scope h2 { font: var(--vyuu-h2); letter-spacing: -0.3px; color: var(--vyuu-ink); margin: 0; }
.vyuu-scope h3 { font: var(--vyuu-h3); color: var(--vyuu-ink); margin: 0; }
.vyuu-scope .eyebrow {
  font: var(--vyuu-eyebrow);
  letter-spacing: var(--vyuu-eyebrow-letter-spacing);
  text-transform: var(--vyuu-eyebrow-transform);
  color: var(--vyuu-orange-deep);
}
.vyuu-scope code, .vyuu-scope .mono { font: var(--vyuu-mono-sm); color: var(--vyuu-muted); }