/* ============================================================
   OZ Energia — Design System Tokens
   Colors & Typography
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- BRAND ---------- */
  --oz-blue-cyan:      #2AB4E5;   /* brand cyan from facebook banner */
  --oz-blue-cyan-dark: #1E9CC9;   /* pressed / deeper accent */
  --oz-blue-cyan-soft: #8ED8EF;   /* pattern / wave overlay */

  --oz-blue-royal:     #0A4A9F;   /* primary corporate blue — canopies, signage */
  --oz-blue-navy:      #1E3A5F;   /* deep header / gradient anchor */
  --oz-blue-navy-deep: #0E2440;   /* deepest variant */

  --oz-blue-500:       #2563EB;   /* UI action blue (used across product) */
  --oz-blue-600:       #1D4ED8;
  --oz-blue-700:       #1E40AF;

  --oz-blue-50:        #EFF6FF;
  --oz-blue-100:       #DBEAFE;
  --oz-blue-200:       #BFDBFE;

  /* Signature brand gradient (OZ logo + headers) */
  --oz-gradient-hero:  linear-gradient(135deg, #1E3A5F 0%, #1D4ED8 60%, #2563EB 100%);
  --oz-gradient-brand: linear-gradient(135deg, #1E3A5F 0%, #2563EB 100%);
  --oz-gradient-cyan:  linear-gradient(180deg, #2AB4E5 0%, #1E9CC9 100%);

  /* ---------- NEUTRALS ---------- */
  --oz-ink-900:        #0F172A;
  --oz-ink-800:        #111827;
  --oz-ink-700:        #1E293B;
  --oz-ink-600:        #374151;
  --oz-ink-500:        #6B7280;
  --oz-ink-400:        #9CA3AF;
  --oz-ink-300:        #D1D5DB;
  --oz-ink-200:        #E5E7EB;
  --oz-ink-150:        #EEF0F3;
  --oz-ink-100:        #F1F5F9;
  --oz-ink-50:         #F8FAFC;
  --oz-bg:             #F4F5F7;  /* default app background */
  --oz-bg-alt:         #F0F2F5;  /* alt dashboard bg */
  --oz-white:          #FFFFFF;

  /* ---------- SEMANTIC — ALERT / STATUS ---------- */
  /* These map 1:1 to the SQA alert levels used in the product */
  --oz-ok:             #16A34A;   /* Conforme */
  --oz-ok-bg:          #DCFCE7;
  --oz-ok-fg:          #15803D;

  --oz-warning:        #EAB308;   /* Aviso ≤30d */
  --oz-warning-bg:     #FEF9C3;
  --oz-warning-fg:     #854D0E;

  --oz-critical:       #F97316;   /* Crítico ≤7d */
  --oz-critical-bg:    #FFEDD5;
  --oz-critical-fg:    #9A3412;

  --oz-blocking:       #DC2626;   /* Expirado / bloqueante */
  --oz-blocking-bg:    #FEE2E2;
  --oz-blocking-fg:    #991B1B;

  --oz-rejected:       #7C3AED;   /* Rejeitado */
  --oz-rejected-bg:    #EDE9FE;
  --oz-rejected-fg:    #6D28D9;

  --oz-review:         #1D4ED8;   /* Em revisão */
  --oz-review-bg:      #DBEAFE;
  --oz-review-fg:      #1D4ED8;

  /* ---------- SEMANTIC — ROLE TOKENS ---------- */
  --fg-1:              var(--oz-ink-800);   /* primary text */
  --fg-2:              var(--oz-ink-600);   /* secondary text */
  --fg-3:              var(--oz-ink-500);   /* tertiary */
  --fg-muted:          var(--oz-ink-400);   /* subtle / labels */
  --fg-on-brand:       #FFFFFF;

  --bg-app:            var(--oz-bg);
  --bg-surface:        var(--oz-white);
  --bg-surface-alt:    var(--oz-ink-50);
  --bg-brand:          var(--oz-gradient-brand);

  --border-1:          var(--oz-ink-200);
  --border-2:          var(--oz-ink-100);
  --border-focus:      var(--oz-blue-500);

  --action:            var(--oz-blue-500);
  --action-hover:      var(--oz-blue-600);
  --action-press:      var(--oz-blue-700);

  /* ---------- RADII ---------- */
  --radius-xs:         6px;
  --radius-sm:         7px;   /* buttons, nav pills */
  --radius-md:         8px;   /* inputs, action buttons */
  --radius-lg:         10px;  /* table cards, supplier rows */
  --radius-xl:         12px;  /* cards, form cards */
  --radius-2xl:        14px;  /* hero */
  --radius-3xl:        16px;  /* auth card */
  --radius-pill:       9999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs:  0 1px 3px rgba(0,0,0,.06);
  --shadow-sm:  0 1px 4px rgba(0,0,0,.07);
  --shadow-md:  0 2px 6px rgba(0,0,0,.07);
  --shadow-lg:  0 2px 8px rgba(0,0,0,.08);
  --shadow-xl:  0 4px 14px rgba(0,0,0,.11);
  --shadow-2xl: 0 4px 20px rgba(37,99,235,.25);   /* brand-tinted for hero */
  --shadow-auth:0 20px 50px rgba(0,0,0,.25);

  /* Header dropshadow (sticky nav) */
  --shadow-header: 0 2px 8px rgba(0,0,0,.18);

  /* ---------- SPACING (4-pt base) ---------- */
  --sp-0:  0;
  --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-10: 40px;
  --sp-12: 48px;

  /* Chrome sizes */
  --h-header:  56px;
  --h-navbar:  44px;
  --max-page:  1280px;

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Base ramp */
  --text-2xs:  11px;   /* uppercase micro labels */
  --text-xs:   12px;   /* captions, meta */
  --text-sm:   13px;   /* table body */
  --text-base: 14px;   /* form labels, nav, body */
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;   /* hero headline */
  --text-3xl:  28px;   /* stat values */
  --text-4xl:  36px;
  --text-5xl:  48px;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.4;
  --lh-relaxed:1.55;

  /* Letter spacing */
  --ls-label: .04em;    /* uppercase labels */
  --ls-kpi:   .05em;    /* kpi captions */

  /* ---------- MOTION ---------- */
  --ease-out:      cubic-bezier(.2,.7,.2,1);
  --dur-fast:      .12s;
  --dur-base:      .15s;
  --dur-slow:      .2s;

  /* Hover / press conventions used across the product */
  --hover-opacity: .9;
}

/* ============================================================
   Semantic element defaults — drop-in typographic skin
   ============================================================ */
html { -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-app);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 {
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--fg-1);
  margin: 0;
}
p, .body { font-size: var(--text-base); color: var(--fg-2); margin: 0; }
small, .caption { font-size: var(--text-xs); color: var(--fg-3); }

.label-xs {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.kpi-value {
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1;
  color: var(--fg-1);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: .92em;
}

a { color: var(--action); text-decoration: none; }
a:hover { color: var(--action-hover); }