/**
 * Vecton Design System — Colors & Type
 * Base tokens + semantic tokens. Import this anywhere.
 *
 * Brand: AI-first BFSI technology partner
 * Palette: warm — orange + dark brown + beige. No cold grays.
 * Type: Instrument Sans only. Weights 400/500/600. No bold. No italic.
 */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand colors (raw) ─────────────────────── */
  --vecton-orange:     #FF5631;   /* primary, CTAs, focus rings */
  --vecton-purple:     #7E43BA;   /* secondary accent, badges, chart lines */
  --vecton-brown:      #24140D;   /* dark bg, foreground on light */
  --vecton-beige:      #E8E9D7;   /* muted, foreground on dark */
  --vecton-off-white:  #F9FAF6;   /* page background (light) */
  --vecton-white:      #FFFFFF;   /* cards, popovers */

  /* Derived warm spectrum (from tokens.ts + design-system.jsx) */
  --vecton-brown-light:  #3D2A1F;
  --vecton-brown-mid:    #6B5147;
  --vecton-brown-faded:  #9A8A82;

  /* Translucent layers */
  --vecton-orange-subtle: rgba(255, 86, 49, 0.08);
  --vecton-orange-light:  rgba(255, 86, 49, 0.15);
  --vecton-purple-subtle: rgba(126, 67, 186, 0.08);
  --vecton-border-light:  rgba(36, 20, 13, 0.10);
  --vecton-border-med:    rgba(36, 20, 13, 0.14);
  --vecton-border-dark:   rgba(232, 233, 215, 0.12);

  /* Semantic status */
  --vecton-success: #16A34A;
  --vecton-warning: #D97706;
  --vecton-danger:  #DC2626;
  --vecton-info:    var(--vecton-purple);

  /* ── Semantic color tokens ──────────────────── */
  --bg:              var(--vecton-off-white);
  --bg-elevated:     var(--vecton-white);
  --bg-muted:        #EFEFE5;            /* beige-washed surface */
  --fg:              var(--vecton-brown);
  --fg-muted:        var(--vecton-brown-mid);
  --fg-faded:        var(--vecton-brown-faded);
  --fg-inverse:      var(--vecton-beige);
  --border:          var(--vecton-border-med);
  --border-subtle:   var(--vecton-border-light);
  --ring:            var(--vecton-orange);
  --accent:          var(--vecton-orange);
  --accent-fg:       var(--vecton-off-white);

  /* ── Gradients ──────────────────────────────── */
  --vecton-gradient-dark:   linear-gradient(135deg, #FF5631 0%, #24140D 100%);
  --vecton-gradient-light:  linear-gradient(135deg, #FF5631 0%, #FF8A6A 50%, #F9FAF6 100%);
  --vecton-gradient-purple: linear-gradient(135deg, #7E43BA 0%, #24140D 100%);

  /* ── Shadow system ──────────────────────────── */
  --shadow-sm:     0 1px 2px rgba(36, 20, 13, 0.08);
  --shadow-md:     0 4px 12px rgba(36, 20, 13, 0.10);
  --shadow-lg:     0 12px 32px rgba(36, 20, 13, 0.15);
  --shadow-orange: 0 4px 16px rgba(255, 86, 49, 0.25);

  /* ── Radii ──────────────────────────────────── */
  --radius-sm:   calc(0.45rem - 4px); /* ~3px */
  --radius:      calc(0.45rem - 2px); /* ~5px */
  --radius-md:   calc(0.45rem - 2px);
  --radius-lg:   0.45rem;             /* ~7px — brand default */
  --radius-xl:   calc(0.45rem + 4px); /* ~11px */
  --radius-pill: 9999px;

  /* ── Spacing scale (4px base) ──────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Type scale ─────────────────────────────── */
  --font-sans: "Instrument Sans", Arial, sans-serif;

  --fw-regular:  400;   /* body, descriptions, labels */
  --fw-medium:   500;   /* headings, card titles, nav items */
  --fw-semibold: 600;   /* KPI values, table headers, data emphasis */

  --lh-heading: 1.1;    /* 110% — brand spec */
  --lh-body:    1.5;    /* readable body */

  /* Font sizes (px) */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;
  --fs-4xl:  40px;
  --fs-5xl:  56px;

  /* Eyebrow / label tracking */
  --tracking-eyebrow: 0.12em;
}

/* ────────────────────────────────────────────────
   DARK MODE — warm brown, not cold black
   ──────────────────────────────────────────────── */
.dark, [data-theme="dark"] {
  --bg:            var(--vecton-brown);
  --bg-elevated:   #2E1C13;
  --bg-muted:      #3D2A1F;
  --fg:            var(--vecton-beige);
  --fg-muted:      #B8B09C;
  --fg-faded:      #8A8271;
  --fg-inverse:    var(--vecton-brown);
  --border:        var(--vecton-border-dark);
  --border-subtle: rgba(232, 233, 215, 0.06);
  --accent-fg:     var(--vecton-brown);
}

/* ────────────────────────────────────────────────
   BASE TYPE — global defaults
   ──────────────────────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-style: normal;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Body-ish elements: never bold, never italic */
body, p, span, a, li, td, label, input, textarea, select, button {
  font-weight: var(--fw-regular);
  font-style: normal;
}
p, li, td { line-height: var(--lh-body); }

/* ────────────────────────────────────────────────
   SEMANTIC TEXT STYLES
   Use as classes OR read as vars.
   ──────────────────────────────────────────────── */

/* Display — marketing heroes only */
.display-1, h1.display {
  font-family: var(--font-sans);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* Headings */
h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: -0.015em;
  color: var(--fg);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  color: var(--fg);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  color: var(--fg);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  color: var(--fg);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  color: var(--fg);
}
h6, .h6 {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  color: var(--fg);
}

/* Body variants */
.body-lg {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg);
}
.body, p {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg);
}
.body-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

/* Labels + eyebrows — the signature Vecton small orange caps */
.label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
}
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--vecton-orange);
}

/* Data emphasis — tabular figures, semibold */
.data, th {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* Code / mono — optional; Instrument Sans has no mono cut so fall back */
.code, code, kbd {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.92em;
  background: var(--bg-muted);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--fg);
}

/* Links */
a {
  color: var(--vecton-orange);
  text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ────────────────────────────────────────────────
   UTILITY CLASSES
   ──────────────────────────────────────────────── */
.vecton-dot-grid {
  background-image: radial-gradient(circle, currentColor 0.8px, transparent 0.8px);
  background-size: 20px 20px;
}
.vecton-gradient-dark   { background: var(--vecton-gradient-dark); }
.vecton-gradient-light  { background: var(--vecton-gradient-light); }
.vecton-gradient-purple { background: var(--vecton-gradient-purple); }