/* ═══════════════════════════════════════════════════════════════
   FUNARPEN-RJ — Design Tokens (Site Shell / App Shell)
   Origem: apps-lab/001-teste-design-SiteShell-AppShell/assets/css/fn-tokens.css
   Superset dos tokens anteriores (mesmos nomes --fn-*) — CARREGAR
   PRIMEIRO, todos os demais CSS do shell dependem deste arquivo.
   ═══════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,300;0,7..72,400;0,7..72,500;0,7..72,600;0,7..72,700;1,7..72,400&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
    /* ─── BRAND / NAVY ─────────────────────────────────── */
    --fn-navy:           #102a43;
    --fn-navy-mid:       #1a3d5c;
    --fn-navy-light:     #243b53;
    --fn-navy-dark:      #0d1f2d;

    /* ─── TEAL (ação institucional / dados) ────────────── */
    --fn-teal:           #3d8c8c;
    --fn-teal-dark:      #2a6b6b;
    --fn-teal-light:     #5cbaab;
    --fn-teal-pale:      #e0f5f0;

    /* ─── COPPER (destaque editorial) ──────────────────── */
    --fn-copper:         #c67c4e;
    --fn-copper-light:   #e8a87c;
    --fn-copper-pale:    #fdf0e6;

    /* ─── GOLD ─────────────────────────────────────────── */
    --fn-gold:           #d4a843;
    --fn-gold-light:     #f5e6b8;

    /* ─── STATUS ───────────────────────────────────────── */
    --fn-green:          #27ae60;
    --fn-green-pale:     #e8f8ef;
    --fn-red:            #c0392b;
    --fn-red-pale:       #fbeae8;
    --fn-orange:         #e67e22;
    --fn-orange-pale:    #fef7ec;

    /* ─── SURFACES ─────────────────────────────────────── */
    --fn-bg:             #f5f6f8;
    --fn-bg-warm:        #faf9f7;
    --fn-surface:        #ffffff;
    --fn-border:         #e2e6ea;
    --fn-border-light:   #eef1f4;

    /* ─── TEXT ─────────────────────────────────────────── */
    --fn-text:           #1f2937;
    --fn-text-secondary: #5a6577;
    --fn-text-muted:     #8896a7;   /* só ≥18px ou decorativo (3.0:1) */

    /* ─── VARIANTES WCAG p/ TEXTO (padrão CGJRJ: accent nunca
       reprova como texto — versões escurecidas p/ fundo claro) ── */
    --fn-copper-texto:   #96562a;   /* eyebrow/link copper s/ fundo claro (5.7:1) */
    --fn-teal-texto:     #2a6b6b;   /* link/ação teal s/ fundo claro (6.1:1)      */

    /* ─── ELEVATION ────────────────────────────────────── */
    --fn-shadow-sm:      0 1px 3px  rgba(16,42,67,.06);
    --fn-shadow-md:      0 4px 12px rgba(16,42,67,.08);
    --fn-shadow-lg:      0 8px 30px rgba(16,42,67,.12);

    /* ─── RADII ────────────────────────────────────────── */
    --fn-radius:         8px;
    --fn-radius-lg:      12px;
    --fn-radius-pill:    9999px;

    /* ─── TYPE ─────────────────────────────────────────── */
    --fn-font-editorial: 'Literata', Georgia, 'Times New Roman', serif;
    --fn-font-ui:        'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --fn-font-mono:      'JetBrains Mono', 'Consolas', monospace;

    /* ─── GRADIENTS ────────────────────────────────────── */
    --fn-grad-topbar:        linear-gradient(90deg, var(--fn-teal-dark), var(--fn-teal));
    --fn-grad-hero:          linear-gradient(135deg, #0f2027 0%, #1a3d5c 40%, #2a6b6b 80%, #3d8c8c 100%);
    --fn-grad-card-header:   linear-gradient(135deg, var(--fn-navy) 0%, var(--fn-navy-mid) 100%);
    --fn-grad-progress:      linear-gradient(90deg, var(--fn-teal), var(--fn-teal-light));
    --fn-grad-accent-stripe: linear-gradient(90deg, var(--fn-copper), var(--fn-teal-light), var(--fn-copper));

    /* ─── SHELL METRICS (proposta) ─────────────────────── */
    --fn-siteheader-h:   64px;   /* Site Shell: header navy */
    --fn-apptopbar-h:    56px;   /* App Shell: topbar clara */
    --fn-appsidebar-w:   264px;  /* App Shell: rail expandido */
    --fn-appsidebar-w-min: 68px; /* App Shell: rail colapsado */
}