/* ─────────────────────────────────────────────────────────────
   Value Agentes — Design tokens
   Lifted directly from apps/web/app/globals.css (production).
   Use as a vanilla CSS layer (no Tailwind required) so HTML
   mocks, slide decks, and standalone prototypes share the
   exact token surface the Next.js app uses.
   ───────────────────────────────────────────────────────────── */

/* Webfonts — Google Fonts CDN.
   Display face: Bricolage Grotesque (variable, geometric, contemporary).
   Body: Inter. Mono: JetBrains Mono. Instrument Serif kept as a fallback
   for editorial emphasis if a slide ever wants italic prose. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ─── Surfaces ─────────────────────────────────────────── */
  --color-bg-base: #FAF8F5;        /* warm sépia canvas (cream) */
  --color-bg-card: #FFFFFF;        /* card / dialog surface */
  --color-bg-sidebar: #F5F2EC;     /* sidebar, table header row */
  --color-bg-elevated: #FFFFFF;    /* floating elements */
  --color-bg-ink: #0E1A2E;         /* navy bg behind the logo mark */

  /* ─── Borders ──────────────────────────────────────────── */
  --color-border: #E5E2DC;
  --color-border-strong: #C9C4BA;

  /* ─── Text ─────────────────────────────────────────────── */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #5C5C5C;
  --color-text-tertiary: #9E9E9E;
  --color-text-inverse: #FFFFFF;

  /* ─── Brand accent (Value orange) ──────────────────────── */
  --color-accent: #FF6B00;
  --color-accent-hover: #E85F00;
  --color-accent-soft: #FFF4EB;
  --color-accent-border: #FFD4B5;

  /* ─── Autonomy zones (semantic, do not repurpose) ──────── */
  --color-zone-green: #16A34A;
  --color-zone-green-soft: #DCFCE7;
  --color-zone-yellow: #EAB308;
  --color-zone-yellow-soft: #FEF3C7;
  --color-zone-red: #DC2626;
  --color-zone-red-soft: #FEE2E2;

  /* ─── Financial KPI bullets ────────────────────────────── */
  --color-fin-margin: #16A34A;
  --color-fin-revenue: #7C3AED;
  --color-fin-profit: #16A34A;
  --color-fin-tax: #DC2626;
  --color-fin-subsidy: #A855F7;
  --color-fin-ads: #EA580C;

  /* ─── Mascot fills (warm/cold/neutral wash) ────────────── */
  --mascot-stroke: #1A1A1A;
  --mascot-fill-warm: #E8D9C2;
  --mascot-fill-cold: #C8D8DC;
  --mascot-fill-neutral: #DDD7CC;

  /* ─── Sparkline / micrograph palette ───────────────────── */
  --micrograph-positive: rgba(22, 163, 74, 0.6);
  --micrograph-negative: rgba(220, 38, 38, 0.6);
  --micrograph-neutral:  rgba(120, 110, 95, 0.4);
  --micrograph-grid:     rgba(0, 0, 0, 0.04);

  /* ─── Pulse dot ────────────────────────────────────────── */
  --pulse-working: var(--color-zone-green);
  --pulse-idle:    rgba(120, 110, 95, 0.5);
  --pulse-error:   var(--color-zone-red);
  --pulse-paused:  rgba(234, 179, 8, 0.7);

  /* ─── Elevation ────────────────────────────────────────── */
  --shadow-soft:   0 1px 2px  rgba(0, 0, 0, 0.04);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.08);

  /* ─── Zone glows (used by ZoneBannerPremium / CardPremium) */
  --glow-green:  0 0 24px rgba( 22, 163,  74, 0.12);
  --glow-yellow: 0 0 24px rgba(234, 179,   8, 0.12);
  --glow-red:    0 0 24px rgba(220,  38,  38, 0.12);

  /* ─── Easing curves (Framer Motion) ────────────────────── */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);

  /* ═══════════════════════════════════════════════════════
     DARK theme — applied via [data-theme="dark"] or `.dark`
     Direção feedback do Iury: dashboard escuro com laranja
     da marca (referência: print do "Planit", maio/2026).
     ═══════════════════════════════════════════════════════ */

  /* ─── Layout primitives ────────────────────────────────── */
  --spacing-sidebar-w: 240px;
  --spacing-topbar-h:  64px;

  /* ─── Radii ────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-card: 8px;   /* default — do NOT go above 12px */
  --radius-lg:   12px;
  --radius-pill: 9999px;

  /* ─── Typography ───────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Type scale — semantic, in px so it can be used anywhere */
  --text-display:  56px;  /* hero, big-quote slide */
  --text-h1:       30px;  /* page title (serif) */
  --text-h2:       22px;  /* section header (serif) */
  --text-h3:       18px;  /* card title (serif) */
  --text-body:     14px;  /* default body */
  --text-body-lg:  16px;  /* generous body */
  --text-meta:     12px;  /* secondary / table body */
  --text-eyebrow:  10px;  /* uppercase kicker (mono, accent) */
}

[data-theme="dark"], .dark {
  /* surfaces — deep navy with hint of warmth, never pure black */
  --color-bg-base:     #0B1424;   /* page canvas */
  --color-bg-card:     #131D31;   /* card surface */
  --color-bg-sidebar:  #0A1220;   /* darker than canvas, anchors the rail */
  --color-bg-elevated: #1A2540;   /* modals, hover */
  --color-bg-ink:      #050A14;
  --color-bg-glow:     radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,107,0,0.28), transparent 60%);

  /* borders — barely-there, low-contrast */
  --color-border:        rgba(255,255,255,0.07);
  --color-border-strong: rgba(255,255,255,0.18);

  /* text */
  --color-text-primary:   #F5F5F5;
  --color-text-secondary: #A8B0BD;
  --color-text-tertiary:  #6B7585;
  --color-text-inverse:   #0B1424;

  /* accent — same Value orange, more saturation pops on dark */
  --color-accent:        #FF6B00;
  --color-accent-hover:  #FF8326;
  --color-accent-soft:   rgba(255,107,0,0.16);
  --color-accent-border: rgba(255,107,0,0.45);

  /* zones (slightly brighter for dark legibility) */
  --color-zone-green:      #22C55E;
  --color-zone-green-soft: rgba(34,197,94,0.16);
  --color-zone-yellow:     #FACC15;
  --color-zone-yellow-soft:rgba(250,204,21,0.16);
  --color-zone-red:        #F87171;
  --color-zone-red-soft:   rgba(248,113,113,0.18);

  /* financial bullets (same hues) */
  --color-fin-margin:  #22C55E;
  --color-fin-revenue: #A78BFA;
  --color-fin-profit:  #22C55E;
  --color-fin-tax:     #F87171;
  --color-fin-subsidy: #C084FC;
  --color-fin-ads:     #FB923C;

  /* sparkline / micrograph */
  --micrograph-positive: rgba(34,197,94,0.85);
  --micrograph-negative: rgba(248,113,113,0.85);
  --micrograph-neutral:  rgba(168,176,189,0.6);
  --micrograph-grid:     rgba(255,255,255,0.05);

  /* pulse */
  --pulse-working: var(--color-zone-green);
  --pulse-idle:    rgba(168,176,189,0.5);
  --pulse-error:   var(--color-zone-red);
  --pulse-paused:  var(--color-zone-yellow);

  /* shadows — deeper, glows pop more */
  --shadow-soft:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-medium: 0 6px 18px rgba(0,0,0,0.35);
  --shadow-strong: 0 16px 40px rgba(0,0,0,0.45);

  /* zone glows */
  --glow-green:  0 0 28px rgba( 34,197, 94,0.22);
  --glow-yellow: 0 0 28px rgba(250,204, 21,0.22);
  --glow-red:    0 0 28px rgba(248,113,113,0.22);
  --glow-accent: 0 0 36px rgba(255,107,  0,0.30);
}

/* ─── Base ─────────────────────────────────────────────── */
html, body {
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.5;
  /* Inter humanist alternates + tabular numerals. */
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { border-color: var(--color-border); }

/* ─── Semantic typography ─────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-text-primary);
  margin: 0;
  font-variation-settings: "opsz" 32;
}
h1 { font-size: var(--text-h1); line-height: 1.05; font-weight: 700; font-variation-settings: "opsz" 72; }
h2 { font-size: var(--text-h2); line-height: 1.12; font-weight: 600; }
h3 { font-size: var(--text-h3); line-height: 1.18; font-weight: 600; }

p { margin: 0; color: var(--color-text-primary); }

code, pre, .mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}

/* The signature eyebrow / breadcrumb above titles.
   Example: ESCRITORIO.OVERVIEW · PERGUNTAS.SAC */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

/* Numeric data should ALWAYS be tabular */
.tabular, .num, .kpi-value {
  font-variant-numeric: tabular-nums;
}

/* ─── Utilities used across cards/UI kits ─────────────── */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 24px;
}
.card-elevated { box-shadow: var(--shadow-medium); }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Zone pills — one per autonomy zone. */
.pill-green  { background: var(--color-zone-green-soft);  color: var(--color-zone-green); }
.pill-yellow { background: var(--color-zone-yellow-soft); color: var(--color-zone-yellow); }
.pill-red    { background: var(--color-zone-red-soft);    color: var(--color-zone-red); }
.pill-accent { background: var(--color-accent-soft);      color: var(--color-accent); }

/* ─── Pulse dot keyframes (status) ────────────────────── */
@keyframes pulse-ping {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.2); opacity: 0;   }
}
.pulse-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--pulse-working);
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: pulse-ping 1.6s cubic-bezier(0,0,0.2,1) infinite;
}