/**
 * shared/theme.css — LAGIO
 *
 * Source of truth for the Embalagio brand palette, theme switch (dark/light),
 * typography scale, spacing scale, and base design tokens.
 *
 * Loaded by every HTML page BEFORE any inline <style> and BEFORE
 * shared/style.css. Inline page styles consume the tokens defined here via
 * var(--...).
 *
 * Brand colors are registered marks of Embalagio. The primary `#D25C20`
 * is treated as canonical (the apple-equivalent of the brand). Tone
 * variants 100/200/300/400 exist for the hub card differentiation system
 * defined in Decision 05; they are not generic design tokens.
 *
 * For the rationale, see:
 *   01_Architecture_Decisions/Decision - Theme And Base CSS.md
 */

:root {
  /* ─────────────────────────────────────────────────────────────── */
  /*  Brand — Embalagio (never change without brand approval)        */
  /* ─────────────────────────────────────────────────────────────── */
  --brand-primary-100: #E27543;  /* lighter laranja */
  --brand-primary-200: #D25C20;  /* base — the registered mark */
  --brand-primary-300: #B84A12;  /* darker */
  --brand-primary-400: #9C3D08;  /* darkest */
  --brand-secondary-dark:  #002C3E;
  --brand-secondary-light: #DADCDB;

  /* RGB triplets — for rgba() usage in tints */
  --brand-primary-rgb:         210, 92, 32;
  --brand-secondary-dark-rgb:    0, 44, 62;
  --brand-secondary-light-rgb: 218, 220, 219;

  /* ─────────────────────────────────────────────────────────────── */
  /*  Status colors (functional, not brand)                          */
  /* ─────────────────────────────────────────────────────────────── */
  --status-success: #10B981;
  --status-error:   #EF4444;
  --status-warn:    #F59E0B;

  /* RGB triplets — para tints rgba() destes status */
  --status-success-rgb:  16, 185, 129;
  --status-error-rgb:   239,  68,  68;
  --status-warn-rgb:    245, 158,  11;

  /* ─────────────────────────────────────────────────────────────── */
  /*  Typography                                                     */
  /*  Montserrat is the official Embalagio primary typeface.         */
  /*  Each HTML page must load it from Google Fonts before this CSS. */
  /* ─────────────────────────────────────────────────────────────── */
  --font-family: 'Montserrat', sans-serif;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  --font-size-xs:   12px;
  --font-size-sm:   13px;
  --font-size-base: 14px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   24px;
  --font-size-2xl:  32px;

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

  /* ─────────────────────────────────────────────────────────────── */
  /*  Border radius (single value across the system)                 */
  /* ─────────────────────────────────────────────────────────────── */
  --radius: 12px;
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Dark theme (default)                                               */
/* ─────────────────────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  /* Superfícies — família navy/slate do hub (era um quase-preto neutro
     próprio, #0a0a0f/#12121a, que deixava os módulos visivelmente mais
     escuros e mais frios que o hub). shared/hub.css agora referencia estes
     tokens em vez de redeclarar os seus, para não voltarem a divergir. */
  --bg:           #0D131C;
  --surface:      #141C27;
  --card:         #1B2532;
  --border:       #263241;
  --border-hover: #354355;
  --text:         #EEF2F7;
  --muted:        #748195;
  --navbar-bg:    rgba(20, 28, 39, .88);
  --shadow:       rgba(0, 0, 0, .32);
  --tag-bg:       rgba(255, 255, 255, .05);
  --toggle-bg:    rgba(255, 255, 255, .07);
  --grid-line:    rgba(210, 92, 32, .03);
  --glow:         rgba(210, 92, 32, .06);

  --accent:       var(--brand-primary-200);

  /* Legacy card color tokens — retired in Stage 3 of Phase 4 Batch 4 */
  --green:        #10b981;
  --blue:         #3b82f6;
  --purple:       #8b5cf6;
  --teal:         #14b8a6;
  --red:          #ef4444;

  /* ─────────────────────────────────────────────────────────────── */
  /*  Legacy aliases for shared/dashboard.css (Frente 2)             */
  /*  These mirror the token names the legacy dashboard stylesheet   */
  /*  used. Resolve to brand tokens so the dashboard inherits the    */
  /*  Embalagio palette without renaming every selector.             */
  /*  Retire when the dashboard CSS is refactored to brand tokens.   */
  /* ─────────────────────────────────────────────────────────────── */
  --orange:        var(--brand-primary-200);
  --orange-dark:   var(--brand-primary-300);
  --orange-dim:    rgba(var(--brand-primary-rgb), .12);
  --orange-glow:   rgba(var(--brand-primary-rgb), .25);

  --bg-base:       var(--bg);
  --bg-card:       var(--surface);
  --bg-card2:      var(--card);
  --bg-hover:      var(--card);
  --bg-input:      #101822;

  --border-orange: rgba(var(--brand-primary-rgb), .45);

  --txt-primary:   var(--text);
  --txt-secondary: #A7B0BE;
  --txt-muted:     var(--muted);
  --txt-orange:    var(--brand-primary-100);

  --cls-a:    var(--status-success);
  --cls-a-bg: rgba(16, 185, 129, .12);
  --cls-b:    var(--status-warn);
  --cls-b-bg: rgba(245, 158, 11, .12);
  --cls-c:    #6B7280;
  --cls-c-bg: rgba(107, 114, 128, .12);

  --radius-sm: 8px;
  --font:       var(--font-family);
  --transition: .18s ease;

  --card-shadow:    0 16px 36px rgba(0, 0, 0, .32);
  --card-shadow-lg: 0 24px 56px rgba(0, 0, 0, .42);

  --overlay-bg: rgba(13, 19, 28, .92);

  /* ─────────────────────────────────────────────────────────────── */
  /*  Chart tokens — consumidos por modules/dashboard/charts.js      */
  /*                                                                 */
  /*  Antes destes tokens o dashboard carregava uma paleta própria   */
  /*  (índigo #818cf8, azul #60a5fa, cinza #606673) que não existia  */
  /*  em lugar nenhum do design system. Tudo aqui deriva da marca    */
  /*  ou dos status colors.                                          */
  /* ─────────────────────────────────────────────────────────────── */
  --chart-grid:          var(--border);
  --chart-tick:          var(--muted);
  --chart-label:         var(--txt-secondary);
  --chart-tooltip-bg:    var(--card);
  --chart-tooltip-title: var(--text);
  --chart-tooltip-body:  var(--txt-secondary);
  --chart-arc-border:    var(--surface);

  /*  Séries categóricas — ordem fixa, nunca ciclada.                */
  /*  Validada nos seis checks em light e dark (pior par adjacente   */
  /*  CVD ΔE 17.0 protan; normal-vision 25.7). Slot 1 é a marca.     */
  --chart-series-1: #D25C20;  /* laranja Embalagio */
  --chart-series-2: #0E7C9E;  /* petróleo — família do secondary-dark */
  --chart-series-3: #7E67B8;
  --chart-series-1-rgb: 210,  92,  32;
  --chart-series-2-rgb:  14, 124, 158;
  --chart-series-3-rgb: 126, 103, 184;

  /*  Rampa ordinal (porte, maturidade) — tons 400→100 da marca.     */
  /*  No dark a magnitude cresce clareando; no light, escurecendo.   */
  --chart-ramp-1: #9C3D08;
  --chart-ramp-2: #B84A12;
  --chart-ramp-3: #D25C20;
  --chart-ramp-4: #E27543;
  --chart-ramp-other: var(--cls-c);
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Light theme overrides                                              */
/* ─────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  /* Superfícies claras do hub. `--muted` fica em #667085 (≈5.3:1) e não no
     #98A2B3 do hub-soft: aqui ele é sempre `color:` de texto — o tier mais
     claro reprovaria contraste em ~130 usos. */
  --bg:           #F7F8FA;
  --surface:      #FFFFFF;
  --card:         #FFFFFF;
  --border:       #E6E9EE;
  --border-hover: #D9DEE6;
  --text:         #111827;
  --muted:        #667085;
  --navbar-bg:    rgba(255, 255, 255, .92);
  --shadow:       rgba(0, 0, 0, .1);
  --tag-bg:       rgba(0, 0, 0, .04);
  --toggle-bg:    rgba(0, 0, 0, .05);
  --grid-line:    rgba(210, 92, 32, .04);
  --glow:         rgba(210, 92, 32, .04);

  --accent:       var(--brand-primary-200);

  /* Legacy card color tokens — retired in Stage 3 of Phase 4 Batch 4 */
  --green:        #059669;
  --blue:         #2563eb;
  --purple:       #7c3aed;
  --teal:         #0d9488;
  --red:          #dc2626;

  /* Legacy alias overrides for light theme (Frente 2) */
  --bg-hover:      #F7F8FA;
  --bg-input:      #FFFFFF;
  --txt-secondary: #667085;
  --cls-a:         #059669;
  --cls-a-bg:      rgba(5, 150, 105, .10);
  --cls-b:         #d97706;
  --cls-b-bg:      rgba(217, 119, 6, .10);
  --card-shadow:    0 4px 24px rgba(0, 0, 0, .08);
  --card-shadow-lg: 0 12px 48px rgba(0, 0, 0, .12);

  --overlay-bg: rgba(240, 242, 245, .92);

  /* Chart tokens — tema claro.
     As séries categóricas não mudam de step (a paleta passa nos seis
     checks contra as duas superfícies). O que muda é o cromo do
     chrome do gráfico e o sentido da rampa ordinal. */
  --chart-tooltip-bg:    var(--brand-secondary-dark);
  --chart-tooltip-title: #FFFFFF;
  --chart-tooltip-body:  var(--brand-secondary-light);
  --chart-arc-border:    var(--card);

  --chart-ramp-1: #E27543;
  --chart-ramp-2: #D25C20;
  --chart-ramp-3: #B84A12;
  --chart-ramp-4: #9C3D08;
}