/* ============================================================
   ENTERFIX DESIGN TOKENS
   Source of truth: Enterfix/NEXUS (src/components/Sidebar.jsx,
   Auth.jsx, Dashboard.jsx) + brand guidelines from MKT folder.
   ============================================================ */

:root {
  /* ────────────────────────────────────────────────────────
     BRAND COLORS — from NEXUS app constants
     BLUE / GREEN are used as `const BLUE` / `const GREEN`
     across every NEXUS component.
     ──────────────────────────────────────────────────────── */
  --enterfix-blue:        var(--efx-azul);         /* D313: apelido. Valor em --efx-azul, no CSS da identidade */
  --enterfix-blue-deep:   var(--efx-azul-fundo);   /* D313: apelido */
  --enterfix-blue-soft:   var(--efx-azul-claro);   /* D313: apelido */
  --enterfix-green:       var(--efx-verde);        /* D313: apelido */
  --enterfix-green-deep:  #7d9622;
  --enterfix-green-soft:  #f3f7e5;

  /* The brand-mark "4-arrow" symbol uses these solid hues */
  --enterfix-mark-blue:   #1a9ddc;
  --enterfix-mark-green:  #7fba40;
  --enterfix-mark-dark:   #2c3e50;
  --enterfix-mark-gray:   #b6bcc2;

  /* ────────────────────────────────────────────────────────
     NEXUS PRODUCT — dark surfaces
     Sidebar gradient #0a1628 → #0c1c32; auth shell #0f172a
     ──────────────────────────────────────────────────────── */
  --nexus-navy-900:       #0a1628;
  --nexus-navy-800:       #0c1c32;
  --nexus-navy-700:       #0d1f3c;
  --nexus-navy-600:       #0f2040;

  /* ────────────────────────────────────────────────────────
     INDUSTRIAL NEUTRAL SCALE — Tailwind slate clones,
     declared explicitly in tailwind.config.js as `industrial`.
     ──────────────────────────────────────────────────────── */
  --industrial-50:        #f8fafc;
  --industrial-100:       #f1f5f9;
  --industrial-200:       #e2e8f0;
  --industrial-300:       #cbd5e1;
  --industrial-400:       #94a3b8;
  --industrial-500:       #64748b;
  --industrial-600:       #475569;
  --industrial-700:       #334155;
  --industrial-800:       #1e293b;
  --industrial-900:       #0f172a;

  /* ────────────────────────────────────────────────────────
     SEMANTIC COLORS — matches NEXUS Dashboard `StatCard color`
     ──────────────────────────────────────────────────────── */
  --success:              #22c55e;   /* APROVADO badge text  */
  --success-soft:         #f0fdf4;   /* APROVADO badge bg    */
  --success-strong:       #16a34a;
  --warning:              #f59e0b;   /* vencendo / 30d alert */
  --warning-soft:         #fffbeb;
  --warning-strong:       #92400e;
  --danger:               #ef4444;   /* REPROVADO / vencido  */
  --danger-soft:          #fef2f2;
  --danger-strong:        #dc2626;
  --info:                 var(--enterfix-blue);

  /* Foreground / background semantic shortcuts */
  --bg-app:               var(--industrial-50);
  --bg-surface:           #ffffff;
  --bg-elevated:          #ffffff;
  --fg-default:           var(--industrial-900);   /* #0f172a */
  --fg-muted:             var(--industrial-500);   /* #64748b */
  --fg-subtle:            var(--industrial-400);   /* #94a3b8 */
  --fg-onDark:            #ffffff;
  --fg-onDark-muted:      rgba(255,255,255,0.58);
  --fg-onDark-subtle:     rgba(255,255,255,0.22);
  --border-default:       var(--industrial-200);
  --border-soft:          var(--industrial-100);

  /* Brand signature gradient — used on hero headlines,
     sidebar accent bars, progress bars, the Nexus N symbol. */
  --grad-brand:           linear-gradient(90deg, var(--enterfix-blue), var(--enterfix-green));
  --grad-brand-vert:      linear-gradient(180deg, var(--enterfix-blue), var(--enterfix-green));
  --grad-navy:            linear-gradient(135deg, #0a1628 0%, #0f2040 50%, #0a1628 100%);
  --grad-sidebar:         linear-gradient(180deg, #0a1628 0%, #0c1c32 100%);

  /* ────────────────────────────────────────────────────────
     SHADOW SYSTEM — NEXUS uses soft, low-contrast elevation
     ──────────────────────────────────────────────────────── */
  --shadow-xs:            0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm:            0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:            0 4px 16px rgba(5,166,240,0.16);   /* brand-tinted hover */
  --shadow-lg:            0 6px 20px rgba(0,0,0,0.10);       /* StatCard hover     */
  --shadow-sidebar:       4px 0 32px rgba(0,0,0,0.45);

  /* ────────────────────────────────────────────────────────
     RADII — corners are rounded but never pill-y except chips
     ──────────────────────────────────────────────────────── */
  --radius-xs:            6px;
  --radius-sm:            8px;
  --radius-md:            9px;     /* sidebar buttons        */
  --radius-lg:            10px;    /* form fields / icon box */
  --radius-xl:            12px;    /* dialogs, alerts        */
  --radius-2xl:           14px;    /* StatCard               */
  --radius-pill:          999px;   /* status badges          */

  /* ────────────────────────────────────────────────────────
     SPACING — 4px base, with the 7/9/10/14/18/20/24 stops
     that NEXUS leans on (see sidebar/dashboard inline px).
     ──────────────────────────────────────────────────────── */
  --space-0:              0;
  --space-1:              4px;
  --space-2:              7px;
  --space-3:              9px;
  --space-4:              10px;
  --space-5:              14px;
  --space-6:              18px;
  --space-7:              20px;
  --space-8:              24px;
  --space-9:              28px;
  --space-10:             32px;
  --space-12:             44px;
  --space-16:             64px;

  /* ────────────────────────────────────────────────────────
     TYPOGRAPHY — D328/D329: títulos em Poppins, corpo em Inter.
     Os dois nomes abaixo são APELIDOS dos tokens da identidade
     (post 7313, bloco D328), como o --enterfix-blue do D311:
     o valor mora só lá. A reserva depois da vírgula só vale se
     o CSS da identidade não carregar.
     ──────────────────────────────────────────────────────── */
  --font-sans:            var(--efx-fonte-corpo, 'Inter', 'Inter Reserva', system-ui, sans-serif);
  --font-display:         var(--efx-fonte-titulo, 'Poppins', 'Poppins Reserva', system-ui, sans-serif);
  --font-mono:            source-code-pro, Menlo, Monaco, Consolas,
                          'Courier New', monospace;

  /* Type scale (raw) ─────────────────────────────────────── */
  --fs-9:                  9px;     /* over-line label, EM BREVE chip */
  --fs-10:                10px;     /* tiny captions                  */
  --fs-11:                11px;     /* badge text, table caption      */
  --fs-12:                12px;     /* small buttons, secondary nav   */
  --fs-13:                13px;     /* nav, body small                */
  --fs-14:                14px;     /* body / section title           */
  --fs-15:                15px;     /* card title                     */
  --fs-16:                16px;     /* default body in marketing      */
  --fs-18:                18px;     /* h6 / card heading              */
  --fs-20:                20px;
  --fs-24:                24px;     /* welcome / dialog h2            */
  --fs-26:                26px;     /* StatCard value                 */
  --fs-32:                32px;
  --fs-40:                40px;     /* hero headline                  */
  --fs-56:                56px;

  /* Semantic type tokens ─────────────────────────────────── */
  --t-hero-size:          40px;
  --t-hero-weight:        800;
  --t-hero-tracking:      -1px;
  --t-hero-leading:       1.15;

  --t-h1-size:            32px;
  --t-h1-weight:          800;
  --t-h1-tracking:        -0.5px;

  --t-h2-size:            24px;
  --t-h2-weight:          700;

  --t-h3-size:            18px;
  --t-h3-weight:          700;

  --t-section-size:       14px;     /* "Relatórios de Inspeção" */
  --t-section-weight:     700;
  --t-section-color:      var(--industrial-800);

  --t-body-size:          14px;
  --t-body-weight:        400;
  --t-body-color:         var(--industrial-700);

  --t-body-small-size:    13px;

  --t-stat-value-size:    26px;
  --t-stat-value-weight:  800;
  --t-stat-label-size:    11px;
  --t-stat-label-weight:  600;
  --t-stat-label-tracking:0.8px;

  --t-eyebrow-size:       9px;
  --t-eyebrow-weight:     700;
  --t-eyebrow-tracking:   2.5px;
  --t-eyebrow-transform:  uppercase;

  --t-mono-size:          13px;

  /* ────────────────────────────────────────────────────────
     MOTION — short, ease, never bouncy
     ──────────────────────────────────────────────────────── */
  --motion-fast:          0.15s ease;
  --motion-base:          0.2s ease;
  --motion-slow:          0.3s ease;
  --motion-page:          0.8s ease;
}

/* ============================================================
   SEMANTIC RECIPES — drop-in classes used by preview cards
   ============================================================ */

.ent-body {
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  color: var(--t-body-color);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ent-h-hero {
  font-family: var(--font-display);
  font-size: var(--t-hero-size);
  font-weight: var(--t-hero-weight);
  letter-spacing: var(--t-hero-tracking);
  line-height: var(--t-hero-leading);
  color: var(--fg-default);
}

.ent-h-hero .grad,
.ent-grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.ent-h1     { font-size: var(--t-h1-size); font-weight: var(--t-h1-weight); letter-spacing: var(--t-h1-tracking); color: var(--fg-default); }
.ent-h2     { font-size: var(--t-h2-size); font-weight: var(--t-h2-weight); color: var(--fg-default); }
.ent-h3     { font-size: var(--t-h3-size); font-weight: var(--t-h3-weight); color: var(--fg-default); }
.ent-section{ font-size: var(--t-section-size); font-weight: var(--t-section-weight); color: var(--t-section-color); }
.ent-body-s { font-size: var(--t-body-small-size); color: var(--fg-muted); }
.ent-stat   { font-size: var(--t-stat-value-size); font-weight: var(--t-stat-value-weight); color: var(--fg-default); line-height: 1; }
.ent-label  { font-size: var(--t-stat-label-size); font-weight: var(--t-stat-label-weight); letter-spacing: var(--t-stat-label-tracking); text-transform: uppercase; color: var(--fg-subtle); }
.ent-eyebrow{ font-size: var(--t-eyebrow-size); font-weight: var(--t-eyebrow-weight); letter-spacing: var(--t-eyebrow-tracking); text-transform: var(--t-eyebrow-transform); color: var(--fg-onDark-subtle); }
.ent-mono   { font-family: var(--font-mono); font-size: var(--t-mono-size); }