/* ═══════════════════════════════════════════════════════
   INSTITUTO ISABEL VELOSO — DESIGN TOKENS
   Fonte única de verdade para todo o visual do sistema.
   Nunca use valores hardcoded — sempre referencie variáveis.
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --green:        #6e7a62;
  --green-light:  #8f9e7f;
  --green-mid:    #5d6753;
  --green-dark:   #4d5544;
  --green-deep:   #3c4335;
  --green-abyss:  #1b1e18;
  --green-void:   #10120e;

  --gold:         #D4A574;
  --gold-light:   #e8cdb0;
  --gold-dark:    #B8895A;
  --gold-accent:  #c49a6c;

  /* ── Semantic Colors ── */
  --success:      #5a8a50;
  --success-bg:   rgba(90, 138, 80, 0.12);
  --danger:       #c45040;
  --danger-bg:    rgba(196, 80, 64, 0.10);
  --pending:      #c49a6c;
  --pending-bg:   rgba(212, 165, 116, 0.10);

  /* ── Backgrounds ── */
  --bg-primary:   var(--green-void);
  --bg-secondary: var(--green-abyss);
  --bg-card:      rgba(255, 255, 255, 0.025);
  --bg-subtle:    rgba(255, 255, 255, 0.04);
  --bg-elevated:  rgba(255, 255, 255, 0.05);
  --bg-gold:      rgba(212, 165, 116, 0.10);
  --bg-green:     rgba(110, 122, 98, 0.08);

  /* ── Text ── */
  --text-primary:   #ffffff;
  --text-heading:   #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.60);
  --text-muted:     rgba(255, 255, 255, 0.32);
  --text-green:     var(--green-light);
  --text-inverse:   var(--green-void);

  /* ── Borders ── */
  --border:       rgba(255, 255, 255, 0.07);
  --border-light: rgba(255, 255, 255, 0.04);
  --border-gold:  rgba(212, 165, 116, 0.25);
  --border-focus: var(--gold);

  /* ── Navigation ── */
  --nav-bg:       rgba(16, 18, 14, 0.92);
  --nav-blur:     20px;

  /* ── Sidebar ── */
  --sidebar-bg:         var(--green-abyss);
  --sidebar-active-bg:  rgba(212, 165, 116, 0.10);
  --sidebar-active-txt: var(--gold);

  /* ── Buttons ── */
  --btn-primary-bg:     var(--gold);
  --btn-primary-txt:    var(--green-void);
  --btn-secondary-bg:   transparent;
  --btn-secondary-txt:  #ffffff;
  --btn-secondary-bdr:  rgba(255, 255, 255, 0.18);

  /* ── Inputs ── */
  --input-bg:     rgba(255, 255, 255, 0.03);
  --input-border: rgba(255, 255, 255, 0.10);
  --input-text:   #ffffff;
  --input-placeholder: rgba(255, 255, 255, 0.25);

  /* ── Tabs ── */
  --tab-active-bg:    rgba(212, 165, 116, 0.10);
  --tab-active-txt:   var(--gold);
  --tab-inactive-bg:  transparent;
  --tab-inactive-txt: rgba(255, 255, 255, 0.32);

  /* ── Tables ── */
  --table-header-bg: rgba(255, 255, 255, 0.04);

  /* ── Scrollbar ── */
  --scrollbar-track: var(--green-void);
  --scrollbar-thumb: var(--green-deep);

  /* ── Hero ── */
  --hero-fade-to: var(--green-void);

  /* ── Typography ── */
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Manrope', sans-serif;

  --fs-xs:    0.55rem;   /* 8.8px  — badges, micro labels     */
  --fs-sm:    0.65rem;   /* 10.4px — labels, overlines         */
  --fs-base:  0.78rem;   /* 12.5px — body text                 */
  --fs-md:    0.88rem;   /* 14px   — larger body               */
  --fs-lg:    1.15rem;   /* 18.4px — card titles                */
  --fs-xl:    1.5rem;    /* 24px   — section titles             */
  --fs-2xl:   2.0rem;    /* 32px   — page headings              */
  --fs-3xl:   2.8rem;    /* 44.8px — hero heading               */
  --fs-stat:  1.7rem;    /* 27.2px — KPI numbers                */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;
  --lh-loose:   1.9;

  --ls-tight:   0.5px;
  --ls-normal:  1.5px;
  --ls-wide:    2.5px;
  --ls-wider:   4px;
  --ls-widest:  5px;

  /* ── Spacing (4px scale) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-9:  36px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ── Layout ── */
  --max-width:    1120px;
  --max-narrow:   820px;
  --max-form:     560px;
  --sidebar-w:    220px;
  --nav-h:        52px;
  --border-radius: 0px;   /* Design deliberado: zero radius */

  /* ── Transitions ── */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --duration:  0.2s;
  --dur-slow:  0.35s;

  /* ── Z-Index Scale ── */
  --z-base:    1;
  --z-card:    10;
  --z-sticky:  50;
  --z-nav:     100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-devlock: 9999;

  /* ── Breakpoints (referência — usar em media queries) ── */
  /* --bp-sm:  380px   */
  /* --bp-md:  600px   */
  /* --bp-lg:  900px   */
  /* --bp-xl:  1200px  */

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.5);
}