/* =============================================================================
   OUV-ABRIGO — DESIGN TOKENS
   Single source of truth. Extracted from the Strategic Blueprint presentation.
   Do NOT override these in component files — extend via local custom properties.
   ============================================================================= */

:root {

  /* ── CORES — extraídas diretamente da apresentação ──────────────────────── */

  /* Fundos (dois modos visuais: navy escuro / parchment claro) */
  --color-bg-dark:        #1B2A3B;   /* navy profundo — slides capa, solução, closing */
  --color-bg-light:       #F5F0E8;   /* linen/parchment — slides problema, NR-1, planos */
  --color-surface-dark:   #243447;   /* camada de card sobre fundo escuro */
  --color-surface-mid:    #2E3F52;   /* camada terciária / hover */
  --color-surface-light:  #EDE8DE;   /* card sobre fundo claro */
  --color-surface-white:  #FFFFFF;   /* superfície branca pura quando necessário */

  /* Ouro — identidade central da marca Ouv-abrigo */
  --color-gold:           #C9A268;   /* ouro quente — títulos, taglines, destaques */
  --color-gold-deep:      #B8973D;   /* ouro escuro — ícones, bordas ativas, CTAs */
  --color-gold-sand:      #D4C4A0;   /* areia/bege — coluna destaque em tabelas */
  --color-gold-dim:       rgba(185, 151, 61, 0.15); /* overlay suave */
  --color-gold-border:    rgba(201, 162, 104, 0.28);

  /* Azul Institucional */
  --color-navy:           #1B2A3B;   /* navy — texto sobre fundo claro */
  --color-blue-mid:       #2C6E9F;   /* azul médio — setas timeline, bordas escopo */
  --color-blue-steel:     #5B8DB8;   /* azul aço — escudo ROI, elementos secundários */

  /* Textos */
  --color-text-light:     #F0EDE6;   /* cream — texto sobre fundo escuro */
  --color-text-dark:      #1B2A3B;   /* navy — texto sobre fundo claro */
  --color-text-muted-dark: rgba(240, 237, 230, 0.55); /* dimmed sobre escuro */
  --color-text-muted-light: #5E7285; /* cinza-azulado — subtítulos sobre claro */
  --color-text-ghost:     rgba(240, 237, 230, 0.28); /* muito apagado sobre escuro */

  /* Alerta / Risco */
  --color-danger:         #C0392B;   /* vermelho — US$1T, risco alto */
  --color-danger-dim:     rgba(192, 57, 43, 0.12);

  /* Borda utilitária */
  --color-border-dark:    rgba(240, 237, 230, 0.08);
  --color-border-light:   rgba(27, 42, 59, 0.12);
  --color-border-gold:    rgba(201, 162, 104, 0.35);


  /* ── TIPOGRAFIA ──────────────────────────────────────────────────────────── */

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Escala tipográfica — clamp(min, preferred, max) */
  --text-xs:    clamp(0.68rem, 1vw,   0.72rem);
  --text-sm:    clamp(0.80rem, 1.2vw, 0.875rem);
  --text-base:  clamp(0.875rem, 1.5vw, 1rem);
  --text-md:    clamp(1rem, 1.8vw, 1.125rem);
  --text-lg:    clamp(1.125rem, 2vw,  1.35rem);
  --text-xl:    clamp(1.35rem, 2.5vw, 1.75rem);
  --text-2xl:   clamp(1.75rem, 3.5vw, 2.25rem);
  --text-3xl:   clamp(2.25rem, 4.5vw, 3rem);
  --text-hero:  clamp(2.75rem, 6vw,   4.5rem);

  /* Pesos */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Line-heights */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.15em;


  /* ── ESPAÇAMENTO ─────────────────────────────────────────────────────────── */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* Section padding vertical */
  --section-padding: clamp(4rem, 8vw, 7rem);

  /* Container */
  --container-max:  1120px;
  --container-pad:  clamp(1.25rem, 5vw, 3rem);


  /* ── BORDAS & RAIOS ──────────────────────────────────────────────────────── */

  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;


  /* ── SOMBRAS ─────────────────────────────────────────────────────────────── */

  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.18);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.24);
  --shadow-gold: 0 8px 28px rgba(185, 151, 61, 0.28);
  --shadow-navy: 0 8px 28px rgba(27, 42, 59, 0.35);


  /* ── TRANSIÇÕES ──────────────────────────────────────────────────────────── */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms cubic-bezier(0.16, 1, 0.3, 1);


  /* ── Z-INDEX STACK ───────────────────────────────────────────────────────── */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 40;
  --z-sticky:   50;
  --z-nav:      80;
  --z-modal:   100;
  --z-toast:   120;


  /* ── DS v2.0 ALIASES — compatibilidade com o Design System definitivo ─────
     Tokens paralelos que espelham os do design-system.html.
     Permitem que page-home.css e futuros arquivos usem a nomenclatura do DS.
     Os tokens originais (--color-*, --space-*, etc.) permanecem inalterados.
  ─────────────────────────────────────────────────────────────────────────── */

  /* Backgrounds */
  --bg-base:     #1B2A3B;
  --bg-mid:      #162233;
  --bg-elevated: #243447;
  --bg-surface:  #2E3F52;
  --bg-glass:    rgba(27, 42, 59, 0.75);

  /* Gold */
  --gold:        #C9A268;
  --gold-bright: #D4B87A;
  --gold-dim:    rgba(201, 162, 104, 0.15);
  --border-gold: rgba(201, 162, 104, 0.28);
  --shadow-gold: 0 8px 28px rgba(185, 151, 61, 0.28);

  /* Texts */
  --text-primary:   #F0EDE6;
  --text-secondary: rgba(240, 237, 230, 0.65);
  --text-muted:     rgba(240, 237, 230, 0.38);

  /* Borders */
  --border:     rgba(240, 237, 230, 0.07);
  --border-mid: rgba(240, 237, 230, 0.12);

  /* Fonts DS v2.0 */
  --font-mono: 'DM Mono', 'Courier New', monospace;

  /* Extra text sizes DS v2.0 */
  --text-2xs:  clamp(0.60rem, 0.9vw, 0.65rem);
  --text-giant: clamp(4rem, 9vw, 7.5rem);

  /* Spacing aliases: --sp-N = --space-N */
  --sp-1:  var(--space-1);
  --sp-2:  var(--space-2);
  --sp-3:  var(--space-3);
  --sp-4:  var(--space-4);
  --sp-5:  var(--space-5);
  --sp-6:  var(--space-6);
  --sp-7:  1.75rem;
  --sp-8:  var(--space-8);
  --sp-10: var(--space-10);
  --sp-12: var(--space-12);
  --sp-16: var(--space-16);
  --sp-20: var(--space-20);
  --sp-24: var(--space-24);
  --sp-32: var(--space-32);

  /* Section vertical padding alias */
  --section-v: var(--section-padding);

  /* Border radius aliases */
  --r-xs:   var(--radius-xs);
  --r-sm:   var(--radius-sm);
  --r-md:   var(--radius-md);
  --r-lg:   var(--radius-lg);
  --r-xl:   var(--radius-xl);
  --r-2xl:  var(--radius-2xl);
  --r-full: var(--radius-full);

  /* Transition aliases */
  --t-fast: var(--transition-fast);
  --t-base: var(--transition-base);
  --t-slow: var(--transition-slow);

  /* Font weight aliases */
  --w-light: var(--weight-light);
  --w-reg:   var(--weight-regular);
  --w-med:   var(--weight-medium);
  --w-semi:  var(--weight-semi);
  --w-bold:  var(--weight-bold);

  /* Shadow aliases */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 32px rgba(0,0,0,0.35);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.30);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.40);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.50);
}