/* ───────────────────────────────────────────────────────────────────────
 * Vallus GRC — Color and Type Tokens
 * Source of truth: app/globals.css from carrascocortes/GRC-SaaS
 * Tagline: "O reforço das suas defesas"
 *
 * The product is a serious GRC SaaS for SMBs — palette is restrained:
 * petrol blue (stability/trust), coral (warmth + AI/CTA accent), and
 * off-white (reduces fatigue on dense data screens).
 * ─────────────────────────────────────────────────────────────────────── */

/* Inter — self-hosted brand font set (uploaded by client).
   Files are static optical-size cuts: 18pt for body/UI sizes (≤16px),
   24pt for mid sizes, 28pt for display (~20px+). We expose three
   font-family aliases — "Inter" (body, default), "Inter 24" (mid),
   "Inter Display" (large headings) — so authors can pick the right
   optical size with a font-family change. The default "Inter" maps
   to the 18pt cuts because it covers nearly all UI surfaces. */

/* ── Inter (18pt) — body, UI, dense data text ───────────────────────── */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("./fonts/Inter_18pt-Thin.ttf")        format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("./fonts/Inter_18pt-ExtraLight.ttf")  format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("./fonts/Inter_18pt-Light.ttf")       format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/Inter_18pt-Regular.woff2") format("woff2"), url("./fonts/Inter_18pt-Regular.ttf") format("truetype"); }
/* subset latino — declarado DEPOIS: por ordem de declaração, vence pros codepoints que cobre */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/Inter_18pt-Regular.latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+2190-21FF, U+20A0-20BF, U+2122, U+2212; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/Inter_18pt-Medium.woff2") format("woff2"), url("./fonts/Inter_18pt-Medium.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/Inter_18pt-Medium.latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+2190-21FF, U+20A0-20BF, U+2122, U+2212; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/Inter_18pt-SemiBold.woff2") format("woff2"), url("./fonts/Inter_18pt-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/Inter_18pt-SemiBold.latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+2190-21FF, U+20A0-20BF, U+2122, U+2212; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/Inter_18pt-Bold.woff2") format("woff2"), url("./fonts/Inter_18pt-Bold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/Inter_18pt-Bold.latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+2190-21FF, U+20A0-20BF, U+2122, U+2212; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("./fonts/Inter_18pt-ExtraBold.woff2") format("woff2"), url("./fonts/Inter_18pt-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("./fonts/Inter_18pt-ExtraBold.latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+2190-21FF, U+20A0-20BF, U+2122, U+2212; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("./fonts/Inter_18pt-Black.ttf")       format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100; font-display: swap; src: url("./fonts/Inter_18pt-ThinItalic.ttf")        format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 200; font-display: swap; src: url("./fonts/Inter_18pt-ExtraLightItalic.ttf")  format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("./fonts/Inter_18pt-LightItalic.ttf")       format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("./fonts/Inter_18pt-Italic.ttf")            format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("./fonts/Inter_18pt-MediumItalic.ttf")      format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("./fonts/Inter_18pt-SemiBoldItalic.ttf")    format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("./fonts/Inter_18pt-BoldItalic.ttf")        format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 800; font-display: swap; src: url("./fonts/Inter_18pt-ExtraBoldItalic.ttf")   format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 900; font-display: swap; src: url("./fonts/Inter_18pt-BlackItalic.ttf")       format("truetype"); }

/* ── Inter 24 — mid sizes (h2/h3, KPI numbers ~18–24px) ─────────────── */
@font-face { font-family: "Inter 24"; font-style: normal; font-weight: 100; font-display: swap; src: url("./fonts/Inter_24pt-Thin.ttf")        format("truetype"); }
@font-face { font-family: "Inter 24"; font-style: normal; font-weight: 200; font-display: swap; src: url("./fonts/Inter_24pt-ExtraLight.ttf")  format("truetype"); }
@font-face { font-family: "Inter 24"; font-style: normal; font-weight: 300; font-display: swap; src: url("./fonts/Inter_24pt-Light.ttf")       format("truetype"); }
@font-face { font-family: "Inter 24"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/Inter_24pt-Regular.ttf")     format("truetype"); }
@font-face { font-family: "Inter 24"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/Inter_24pt-Medium.ttf")      format("truetype"); }
@font-face { font-family: "Inter 24"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/Inter_24pt-SemiBold.ttf")    format("truetype"); }
@font-face { font-family: "Inter 24"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/Inter_24pt-Bold.ttf")        format("truetype"); }
@font-face { font-family: "Inter 24"; font-style: normal; font-weight: 800; font-display: swap; src: url("./fonts/Inter_24pt-ExtraBold.ttf")   format("truetype"); }
@font-face { font-family: "Inter 24"; font-style: normal; font-weight: 900; font-display: swap; src: url("./fonts/Inter_24pt-Black.ttf")       format("truetype"); }
@font-face { font-family: "Inter 24"; font-style: italic; font-weight: 400; font-display: swap; src: url("./fonts/Inter_24pt-Italic.ttf")            format("truetype"); }
@font-face { font-family: "Inter 24"; font-style: italic; font-weight: 500; font-display: swap; src: url("./fonts/Inter_24pt-MediumItalic.ttf")      format("truetype"); }
@font-face { font-family: "Inter 24"; font-style: italic; font-weight: 600; font-display: swap; src: url("./fonts/Inter_24pt-SemiBoldItalic.ttf")    format("truetype"); }
@font-face { font-family: "Inter 24"; font-style: italic; font-weight: 700; font-display: swap; src: url("./fonts/Inter_24pt-BoldItalic.ttf")        format("truetype"); }

/* ── Inter Display (28pt) — large headings, marketing hero ──────────── */
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 100; font-display: swap; src: url("./fonts/Inter_28pt-Thin.ttf")        format("truetype"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 200; font-display: swap; src: url("./fonts/Inter_28pt-ExtraLight.ttf")  format("truetype"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 300; font-display: swap; src: url("./fonts/Inter_28pt-Light.ttf")       format("truetype"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/Inter_28pt-Regular.ttf")     format("truetype"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/Inter_28pt-Medium.ttf")      format("truetype"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/Inter_28pt-SemiBold.ttf")    format("truetype"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/Inter_28pt-Bold.woff2") format("woff2"), url("./fonts/Inter_28pt-Bold.ttf") format("truetype"); }
/* subset latino — declarado DEPOIS: por ordem de declaração, vence pros codepoints que cobre */
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/Inter_28pt-Bold.latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+2190-21FF, U+20A0-20BF, U+2122, U+2212; }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("./fonts/Inter_28pt-ExtraBold.woff2") format("woff2"), url("./fonts/Inter_28pt-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("./fonts/Inter_28pt-ExtraBold.latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+2190-21FF, U+20A0-20BF, U+2122, U+2212; }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 900; font-display: swap; src: url("./fonts/Inter_28pt-Black.ttf")       format("truetype"); }
@font-face { font-family: "Inter Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("./fonts/Inter_28pt-Italic.ttf")            format("truetype"); }
@font-face { font-family: "Inter Display"; font-style: italic; font-weight: 700; font-display: swap; src: url("./fonts/Inter_28pt-BoldItalic.ttf")        format("truetype"); }

:root {
  /* ─── Brand core (4 paint colors that appear on every screen) ───────── */
  --vg-petrol:     #0A3D4D;   /* primary — sidebar, headings, logo mark   */
  --vg-coral:      #FF6B6B;   /* accent  — CTAs, AI, logo accent          */
  --vg-offwhite:   #F9F9F9;   /* app background — never pure white        */
  --vg-graphite:   #2B2B2B;   /* body text — high contrast, low harshness */

  /* ─── Petrol scale (tints + shades of #0A3D4D) ──────────────────────── */
  --vg-petrol-50:  #e8eef1;
  --vg-petrol-100: #d0dde2;
  --vg-petrol-200: #a3bcc6;
  --vg-petrol-300: #6f9aaa;
  --vg-petrol-500: #1d6680;
  --vg-petrol-600: #0d4d63;
  --vg-petrol-700: #0A3D4D;   /* base / primary */
  --vg-petrol-800: #082f3c;
  --vg-petrol-900: #061f28;

  /* ─── Coral scale (tints + shades of #FF6B6B) ───────────────────────── */
  --vg-coral-50:   #fff0f0;
  --vg-coral-100:  #ffd9d9;
  --vg-coral-200:  #ffb5b5;
  --vg-coral-300:  #ff9595;
  --vg-coral-500:  #FF6B6B;   /* base / accent */
  --vg-coral-600:  #ee4848;
  --vg-coral-700:  #c43232;

  /* ─── Neutral / slate (UI chrome, borders, secondary text) ──────────── */
  --vg-white:      #FFFFFF;
  --vg-slate-50:   #f8fafc;
  --vg-slate-100:  #f1f5f9;
  --vg-slate-200:  #e2e8f0;
  --vg-slate-300:  #cbd5e1;
  --vg-slate-400:  #94a3b8;
  --vg-slate-500:  #64748b;
  --vg-slate-600:  #475569;
  --vg-slate-700:  #334155;
  --vg-slate-800:  #1e293b;
  --vg-slate-900:  #0f172a;

  /* ─── Semantic / status (risk-matrix + KPI tones, from codebase) ────── *
   * Note: the product deliberately breaks the traditional traffic-light:
   *   "High"     uses RED (was traditionally orange)
   *   "Critical" uses GRAPHITE/SLATE (signals "exception, escalate")
   * Keep this mapping intact when designing matrices/badges.
   * ─────────────────────────────────────────────────────────────────── */
  --vg-success:        #16a34a;  /* green-600 */
  --vg-success-bg:     #dcfce7;  /* green-100 */
  --vg-success-fg:     #166534;  /* green-800 */
  --vg-warning:        #d97706;  /* amber-600 */
  --vg-warning-bg:     #fef3c7;  /* amber-100 */
  --vg-warning-fg:     #92400e;  /* amber-800 */
  --vg-danger:         #dc2626;  /* red-600 — also used for "High" tier */
  --vg-danger-bg:      #fee2e2;  /* red-100 */
  --vg-danger-fg:      #991b1b;  /* red-800 */
  --vg-info:           #2563eb;  /* blue-600 */
  --vg-info-bg:        #dbeafe;  /* blue-100 */
  --vg-info-fg:        #1e40af;  /* blue-800 */

  /* Risk zones (matrix cell tokens — match lib/risk-matrix.ts) */
  --vg-risk-low-bg:        #dcfce7;
  --vg-risk-low-fg:        #166534;
  --vg-risk-moderate-bg:   #fef9c3;
  --vg-risk-moderate-fg:   #854d0e;
  --vg-risk-high-bg:       #fee2e2;
  --vg-risk-high-fg:       #991b1b;
  --vg-risk-critical-bg:   #cbd5e1;
  --vg-risk-critical-fg:   #0f172a;

  /* ─── Semantic foreground / background aliases ──────────────────────── */
  --vg-bg:           var(--vg-offwhite);
  --vg-bg-card:      var(--vg-white);
  --vg-bg-sidebar:   var(--vg-petrol-700);
  --vg-bg-muted:     var(--vg-slate-100);

  --vg-fg:           var(--vg-graphite);            /* base body text   */
  --vg-fg-strong:    var(--vg-petrol-700);          /* h1/h2, page titles */
  --vg-fg-muted:     var(--vg-slate-500);           /* secondary text   */
  --vg-fg-subtle:    var(--vg-slate-400);           /* hints, metadata  */
  --vg-fg-on-petrol: #ffffff;                       /* text on sidebar  */

  --vg-border:       var(--vg-slate-200);
  --vg-border-strong:var(--vg-slate-300);
  --vg-ring:         color-mix(in oklch, var(--vg-petrol-700) 50%, transparent);

  /* ─── Radii (from globals.css: --radius: 0.625rem = 10px) ───────────── */
  --vg-radius-sm:  6px;   /* 0.6  × 10 */
  --vg-radius-md:  8px;   /* 0.8  × 10 */
  --vg-radius-lg:  10px;  /* 1.0  × 10  — DEFAULT for cards, buttons     */
  --vg-radius-xl:  14px;  /* 1.4  × 10  — KPI cards, dashboard tiles     */
  --vg-radius-2xl: 18px;  /* 1.8  × 10 */
  --vg-radius-3xl: 22px;
  --vg-radius-full: 9999px;

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

  /* ─── Shadows (subtle — the product has a quiet, document-feel UI) ──── */
  --vg-shadow-xs: 0 1px 2px rgba(10, 61, 77, 0.04);
  --vg-shadow-sm: 0 1px 3px rgba(10, 61, 77, 0.06), 0 1px 2px rgba(10, 61, 77, 0.04);
  --vg-shadow-md: 0 4px 12px rgba(10, 61, 77, 0.08);
  --vg-shadow-lg: 0 10px 30px rgba(10, 61, 77, 0.10);
  --vg-shadow-popover: 0 12px 32px rgba(10, 61, 77, 0.14);

  /* ─── Typography ────────────────────────────────────────────────────── *
   * Self-hosted Inter (TTF) covers all UI surfaces. Three optical-size
   * aliases are exposed:
   *   --vg-font-sans     — "Inter" (18pt cuts) for body/UI ≤ 16px
   *   --vg-font-mid      — "Inter 24" for h2/h3 + KPI numbers (~18–24px)
   *   --vg-font-display  — "Inter Display" (28pt cuts) for marketing hero
   *
   * Plus Jakarta Sans is *no longer* part of the brand — the real logo is
   * an image asset. --vg-font-brand is retained as an alias for
   * "Inter Display" so existing references keep working.
   *
   * Geist Mono is kept as a system-monospace fallback for codes (RSK-001,
   * PLN-014). If a brand monospace ships later, swap it in here.
   * ─────────────────────────────────────────────────────────────────── */
  --vg-font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vg-font-mid:     "Inter 24", "Inter", ui-sans-serif, system-ui, sans-serif;
  --vg-font-display: "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif;
  --vg-font-brand:   "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif;
  --vg-font-mono:    ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* Type scale — tuned for dense data UI (small text is intentional) */
  --vg-text-2xs:   10px;     /* uppercase eyebrow labels, fine print     */
  --vg-text-xs:    11px;     /* metadata, badge text, table cells        */
  --vg-text-sm:    13px;     /* body text in dense lists                 */
  --vg-text-base:  14px;     /* default UI text                          */
  --vg-text-md:    15px;     /* form labels, secondary headings          */
  --vg-text-lg:    18px;     /* card titles                              */
  --vg-text-xl:    20px;     /* page titles (h1) inside the app          */
  --vg-text-2xl:   24px;     /* section heroes                           */
  --vg-text-3xl:   30px;     /* dashboard KPI numbers, marketing h2      */
  --vg-text-4xl:   40px;     /* marketing hero h1                        */
  --vg-text-5xl:   56px;     /* big marketing hero                       */

  --vg-leading-tight:   1.15;
  --vg-leading-snug:    1.3;
  --vg-leading-normal:  1.5;
  --vg-leading-relaxed: 1.625;

  --vg-tracking-tight:  -0.02em;
  --vg-tracking-normal: 0;
  --vg-tracking-wide:   0.02em;
  --vg-tracking-wider:  0.08em;   /* uppercase eyebrow labels */
}

/* ─── Semantic typography classes ────────────────────────────────────── */

.vg-h1 {
  font-family: var(--vg-font-mid);
  font-size: var(--vg-text-xl);
  font-weight: 600;
  line-height: var(--vg-leading-tight);
  letter-spacing: var(--vg-tracking-tight);
  color: var(--vg-petrol-700);
}

.vg-h2 {
  font-family: var(--vg-font-mid);
  font-size: var(--vg-text-lg);
  font-weight: 600;
  line-height: var(--vg-leading-snug);
  color: var(--vg-petrol-700);
}

.vg-h3 {
  font-family: var(--vg-font-sans);
  font-size: var(--vg-text-md);
  font-weight: 600;
  line-height: var(--vg-leading-snug);
  color: var(--vg-petrol-700);
}

.vg-eyebrow {
  font-family: var(--vg-font-sans);
  font-size: var(--vg-text-2xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--vg-tracking-wider);
  text-transform: uppercase;
  color: var(--vg-slate-500);
}

.vg-p {
  font-family: var(--vg-font-sans);
  font-size: var(--vg-text-sm);
  font-weight: 400;
  line-height: var(--vg-leading-normal);
  color: var(--vg-graphite);
}

.vg-meta {
  font-family: var(--vg-font-sans);
  font-size: var(--vg-text-xs);
  font-weight: 400;
  line-height: var(--vg-leading-snug);
  color: var(--vg-slate-400);
}

.vg-code {
  font-family: var(--vg-font-mono);
  font-size: var(--vg-text-xs);
  color: var(--vg-slate-500);
}

.vg-kpi-number {
  font-family: var(--vg-font-mid);
  font-weight: 700;
  font-size: var(--vg-text-3xl);
  line-height: 1;
  color: var(--vg-petrol-700);
  letter-spacing: var(--vg-tracking-tight);
}

/* ─── Marketing-only display sizing ─────────────────────────────────── */
.vg-marketing-h1 {
  font-family: var(--vg-font-display);
  font-weight: 700;
  font-size: var(--vg-text-5xl);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--vg-petrol-700);
}

.vg-marketing-h2 {
  font-family: var(--vg-font-display);
  font-weight: 700;
  font-size: var(--vg-text-4xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--vg-petrol-700);
}

.vg-marketing-lead {
  font-family: var(--vg-font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--vg-slate-600);
}

.vg-brand-wordmark {
  /* Use only when emitting a text-based wordmark (rare — the real logo is
     a PNG asset). Inter Display ExtraBold, tight tracking. */
  font-family: var(--vg-font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--vg-petrol-700);
}