/*
 * CSS Variables & Design Tokens - Tema FFLCH
 * Suporte a paletas de cores dinâmicas mantendo compatibilidade com 500+ sites.
 */

:root {
  /* Paleta Padrão: Azul Tradicional (FFLCH / USP) */
  --fflch-primary: #273e74;
  --fflch-primary-dark: #1a2b52;
  --fflch-primary-light: #3b589b;
  --fflch-primary-subtle: #edf2f9;
  --fflch-primary-rgb: 39, 62, 116;

  /* Cores de Destaque / Acento (Ouro / Âmbar USP) */
  --fflch-accent: #de9c16;
  --fflch-accent-hover: #ab7811;
  --fflch-accent-subtle: #fef8ee;

  /* Neutros e Tipografia */
  --fflch-text-primary: #1e293b;
  --fflch-text-secondary: #475569;
  --fflch-text-muted: #64748b;
  --fflch-text-light: #94a3b8;

  /* Superfícies e Fundos */
  --fflch-bg-body: #f8fafc;
  --fflch-bg-surface: #ffffff;
  --fflch-bg-subtle: #f1f5f9;
  --fflch-bg-card: #ffffff;

  /* Bordas */
  --fflch-border: #e2e8f0;
  --fflch-border-subtle: #f1f5f9;
  --fflch-border-focus: rgba(39, 62, 116, 0.35);

  /* Sombras Modernas (Soft Elevation) */
  --fflch-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --fflch-shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --fflch-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
  --fflch-shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.09), 0 4px 8px -3px rgba(0, 0, 0, 0.05);
  --fflch-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* Cantos Arredondados */
  --fflch-radius-xs: 4px;
  --fflch-radius-sm: 6px;
  --fflch-radius-md: 10px;
  --fflch-radius-lg: 14px;

  /* Transições Fluidas */
  --fflch-transition-fast: 0.15s ease-in-out;
  --fflch-transition: 0.25s ease-in-out;

  /* Fontes */
  --fflch-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fflch-font-brand: "Arial Narrow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   Paletas Pré-definidas (Classes aplicadas no <body>)
   ========================================================================== */

/* 1. Azul Tradicional (Padrão) */
body.fflch-palette-default {
  --fflch-primary: #273e74;
  --fflch-primary-dark: #1a2b52;
  --fflch-primary-light: #3b589b;
  --fflch-primary-subtle: #edf2f9;
  --fflch-primary-rgb: 39, 62, 116;
  --fflch-accent: #de9c16;
  --fflch-accent-hover: #ab7811;
  --fflch-border-focus: rgba(39, 62, 116, 0.35);
}

/* 2. Vinho / Rubi */
body.fflch-palette-vinho {
  --fflch-primary: #7a1b2e;
  --fflch-primary-dark: #56101e;
  --fflch-primary-light: #9e263d;
  --fflch-primary-subtle: #faf0f2;
  --fflch-primary-rgb: 122, 27, 46;
  --fflch-accent: #c9933b;
  --fflch-accent-hover: #a67425;
  --fflch-border-focus: rgba(122, 27, 46, 0.35);
}

/* 3. Verde Floresta */
body.fflch-palette-verde {
  --fflch-primary: #1b5e3a;
  --fflch-primary-dark: #114227;
  --fflch-primary-light: #258251;
  --fflch-primary-subtle: #eff8f2;
  --fflch-primary-rgb: 27, 94, 58;
  --fflch-accent: #d4a017;
  --fflch-accent-hover: #b0800e;
  --fflch-border-focus: rgba(27, 94, 58, 0.35);
}

/* 4. Terracota / Argila */
body.fflch-palette-terracota {
  --fflch-primary: #8b3a2b;
  --fflch-primary-dark: #66271c;
  --fflch-primary-light: #b04c3a;
  --fflch-primary-subtle: #faf2f0;
  --fflch-primary-rgb: 139, 58, 43;
  --fflch-accent: #df9c34;
  --fflch-accent-hover: #b87a20;
  --fflch-border-focus: rgba(139, 58, 43, 0.35);
}

/* 5. Grafite / Slate */
body.fflch-palette-grafite {
  --fflch-primary: #334155;
  --fflch-primary-dark: #1e293b;
  --fflch-primary-light: #475569;
  --fflch-primary-subtle: #f1f5f9;
  --fflch-primary-rgb: 51, 65, 85;
  --fflch-accent: #0284c7;
  --fflch-accent-hover: #0369a1;
  --fflch-border-focus: rgba(51, 65, 85, 0.35);
}

/* 6. Azul Marinho Noturno */
body.fflch-palette-marinho {
  --fflch-primary: #0f3b60;
  --fflch-primary-dark: #09263e;
  --fflch-primary-light: #17578c;
  --fflch-primary-subtle: #eef5fa;
  --fflch-primary-rgb: 15, 59, 96;
  --fflch-accent: #e5a823;
  --fflch-accent-hover: #b88214;
  --fflch-border-focus: rgba(15, 59, 96, 0.35);
}

/* 7. Roxo Acadêmico */
body.fflch-palette-roxo {
  --fflch-primary: #4c2882;
  --fflch-primary-dark: #331959;
  --fflch-primary-light: #6639aa;
  --fflch-primary-subtle: #f4effb;
  --fflch-primary-rgb: 76, 40, 130;
  --fflch-accent: #eab308;
  --fflch-accent-hover: #ca8a04;
  --fflch-border-focus: rgba(76, 40, 130, 0.35);
}

/* 8. Petróleo / Oceano */
body.fflch-palette-petroleo {
  --fflch-primary: #164e63;
  --fflch-primary-dark: #0e3847;
  --fflch-primary-light: #0891b2;
  --fflch-primary-subtle: #ecfeff;
  --fflch-primary-rgb: 22, 78, 99;
  --fflch-accent: #38bdf8;
  --fflch-accent-hover: #0284c7;
  --fflch-border-focus: rgba(22, 78, 99, 0.35);
}

/* 9. Mostarda / Ocre */
body.fflch-palette-ocre {
  --fflch-primary: #854d0e;
  --fflch-primary-dark: #603507;
  --fflch-primary-light: #a16207;
  --fflch-primary-subtle: #fefce8;
  --fflch-primary-rgb: 133, 77, 14;
  --fflch-accent: #f59e0b;
  --fflch-accent-hover: #d97706;
  --fflch-border-focus: rgba(133, 77, 14, 0.35);
}

/* 10. Café / Mogno */
body.fflch-palette-cafe {
  --fflch-primary: #4a2c2a;
  --fflch-primary-dark: #321d1b;
  --fflch-primary-light: #633b38;
  --fflch-primary-subtle: #f7f3f2;
  --fflch-primary-rgb: 74, 44, 42;
  --fflch-accent: #d97706;
  --fflch-accent-hover: #b45309;
  --fflch-border-focus: rgba(74, 44, 42, 0.35);
}

/* 11. Esmeralda / Menta */
body.fflch-palette-esmeralda {
  --fflch-primary: #065f46;
  --fflch-primary-dark: #044432;
  --fflch-primary-light: #059669;
  --fflch-primary-subtle: #ecfdf5;
  --fflch-primary-rgb: 6, 95, 70;
  --fflch-accent: #10b981;
  --fflch-accent-hover: #047857;
  --fflch-border-focus: rgba(6, 95, 70, 0.35);
}

/* 12. Coral / Pôr do Sol */
body.fflch-palette-coral {
  --fflch-primary: #9f1239;
  --fflch-primary-dark: #700c28;
  --fflch-primary-light: #be123c;
  --fflch-primary-subtle: #fff1f2;
  --fflch-primary-rgb: 159, 18, 57;
  --fflch-accent: #fb923c;
  --fflch-accent-hover: #f97316;
  --fflch-border-focus: rgba(159, 18, 57, 0.35);
}