globals.css

/* ============================================
   PRF Design System — globals.css
   Versão 1.1 (2026)

   Tema shadcn/ui alinhado ao Manual de Identidade Visual da PRF.
   Mudanças v1.1:
   - Tipografia: Fira Sans → Inter
   - --background: branco (#FFFFFF) → cinza claro (#F5F5F5)
   - novo token --card / --popover continuam brancos (superfícies elevadas)
   - Material Symbols como família oficial de ícones
   ============================================ */

@import "./fonts.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ====== TOKENS BASE PRF ====== */
@layer base {
  :root {
    /* — Cores institucionais oficiais — */
    --prf-azul: #000D4B;
    --prf-amarelo: #FFC900;
    --prf-branco: #FFFFFF;

    /* — Escalas auxiliares (UI digital) — */
    --azul-10: #000935;
    --azul-20: #0A1656;
    --azul-30: #19245F;
    --azul-40: #2D3877;
    --azul-60: #6973A0;
    --azul-80: #B5BBD3;
    --azul-90: #DCDFEC;
    --azul-95: #F1F2F8;

    --amarelo-100: #FFC900;
    --amarelo-90: #FFD64D;
    --amarelo-80: #FFE17A;
    --amarelo-60: #FFEDB0;
    --amarelo-40: #FFF6D9;
    --amarelo-20: #FFFCEF;

    /* — Status — */
    --status-success: #1F7A3A;
    --status-warning: #B26B00;
    --status-danger: #B32020;
    --status-info: #1E4FB2;

    /* — Tipografia (v1.1: Inter) — */
    --font-sans: "Inter", "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --font-icons: "Material Symbols Outlined", system-ui, sans-serif;

    /* — Aliases semânticos (tema claro) —
       v1.1: bg passa de branco puro para #F5F5F5; branco fica em superfícies elevadas */
    --bg: #F5F5F5;
    --bg-elevated: var(--prf-branco);
    --bg-subtle: #ECEDEF;
    --bg-muted: #DCDEE3;
    --fg: #0B0D14;
    --fg-muted: #5B6373;
    --fg-subtle: #8E94A1;
    --border-color: #DCDEE3;
    --border-strong: #C2C5CD;
    --accent: var(--prf-azul);
    --accent-fg: var(--prf-branco);
    --highlight: var(--prf-amarelo);

    /* ====== TOKENS SHADCN/UI ======
       formato HSL canal-a-canal (sem hsl(...)), usado pelas vars do shadcn. */

    /* base — v1.1: --background agora é HSL de #F5F5F5 (era 0 0% 100%) */
    --background: 0 0% 96%;               /* #F5F5F5 */
    --foreground: 228 27% 6%;             /* #0B0D14 */

    /* superfícies elevadas (cards, popovers) continuam brancas */
    --card: 0 0% 100%;                    /* #FFFFFF */
    --card-foreground: 228 27% 6%;
    --popover: 0 0% 100%;                 /* #FFFFFF */
    --popover-foreground: 228 27% 6%;

    /* primária = AZUL PRF */
    --primary: 230 100% 15%;              /* #000D4B */
    --primary-foreground: 0 0% 100%;

    /* secundária = neutro suave */
    --secondary: 225 15% 95%;             /* azul-95 #F1F2F8 */
    --secondary-foreground: 230 100% 15%;

    /* muted = fundos discretos */
    --muted: 220 7% 92%;                  /* um pouco mais escuro que --background */
    --muted-foreground: 222 12% 40%;

    /* accent = AMARELO PRF (destaques e alertas) */
    --accent: 47 100% 50%;                /* #FFC900 */
    --accent-foreground: 230 100% 15%;

    /* destrutivo */
    --destructive: 0 70% 41%;             /* #B32020 */
    --destructive-foreground: 0 0% 100%;

    /* bordas, inputs, ring */
    --border: 222 11% 87%;                /* #DCDEE3 */
    --input: 222 11% 87%;
    --ring: 230 100% 15%;                 /* azul PRF no foco */

    /* gráficos (paleta institucional) */
    --chart-1: 230 100% 15%;              /* azul-PRF */
    --chart-2: 47 100% 50%;               /* amarelo-PRF */
    --chart-3: 230 47% 32%;               /* azul-40 */
    --chart-4: 47 100% 65%;               /* amarelo-90 */
    --chart-5: 222 19% 56%;               /* azul-60 */

    /* raio padrão */
    --radius: 0.5rem;
  }

  .dark,
  [data-theme="dark"] {
    --bg: #060814;
    --bg-elevated: #0B0F1F;
    --bg-subtle: #0B0F1F;
    --bg-muted: #131830;
    --fg: #ECEEF5;
    --fg-muted: #9DA3B5;
    --fg-subtle: #6A7088;
    --border-color: #1F2540;
    --border-strong: #2D3458;
    --accent: var(--prf-amarelo);
    --accent-fg: var(--prf-azul);

    --background: 230 60% 5%;
    --foreground: 230 18% 94%;

    --card: 230 50% 7%;
    --card-foreground: 230 18% 94%;
    --popover: 230 50% 7%;
    --popover-foreground: 230 18% 94%;

    /* no dark, AMARELO PRF assume papel de primária */
    --primary: 47 100% 50%;
    --primary-foreground: 230 100% 15%;

    --secondary: 230 40% 14%;
    --secondary-foreground: 230 18% 94%;

    --muted: 230 35% 12%;
    --muted-foreground: 222 13% 67%;

    --accent: 230 47% 32%;                /* azul-40 vira accent no dark */
    --accent-foreground: 230 18% 94%;

    --destructive: 0 65% 50%;
    --destructive-foreground: 0 0% 100%;

    --border: 230 35% 18%;
    --input: 230 35% 18%;
    --ring: 47 100% 50%;

    --chart-1: 47 100% 50%;
    --chart-2: 230 100% 75%;
    --chart-3: 47 100% 65%;
    --chart-4: 222 30% 56%;
    --chart-5: 47 60% 35%;
  }
}

/* ====== BASE STYLES ====== */
@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: var(--font-sans);
    /* recursos opentype do Inter para melhor legibilidade em tela */
    font-feature-settings: "cv02" 1, "cv03" 1, "cv04" 1, "cv11" 1, "ss01" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.011em;
  }

  /* — Material Symbols (icone com peso variável, herda currentColor) — */
  .material-symbols-outlined {
    font-family: var(--font-icons);
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
  }

  /* hierarquia tipográfica do Caderno 10 */
  .typo-display    { font-size: 4.5rem;  line-height: 1.11; font-weight: 800; letter-spacing: -0.035em; }
  .typo-h1         { font-size: 3rem;    line-height: 1.17; font-weight: 700; letter-spacing: -0.025em; }
  .typo-h2         { font-size: 2rem;    line-height: 1.25; font-weight: 700; }
  .typo-h3         { font-size: 1.5rem;  line-height: 1.33; font-weight: 600; }
  .typo-subtitle   { font-size: 1.25rem; line-height: 1.4;  font-weight: 500; }
  .typo-body       { font-size: 1rem;    line-height: 1.5;  font-weight: 400; }
  .typo-body-sm    { font-size: 0.875rem;line-height: 1.43; font-weight: 400; }
  .typo-caption    {
    font-size: 0.75rem;
    line-height: 1.33;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: var(--font-mono);
  }

  /* régua amarela institucional (assinatura visual do design system) */
  .rule-yellow {
    height: 4px;
    width: 56px;
    background: var(--prf-amarelo);
    border: 0;
    margin: 0;
  }
}