/* ==========================================================================
   FERNANDA MEYER — DESIGN SYSTEM
   Design tokens: color, typography, spacing, radius, shadow, motion,
   breakpoints, container, z-index.

   Two visual modes, not a light/dark theme:
     - Modo Autoridade  -> [data-mode="autoridade"]  (default on <body>? no —
       applied per-section, see design-system.html "Como os modos funcionam")
     - Modo Dossiê      -> [data-mode="dossie"]       (fallback / :root default)

   Rule of scarcity: --color-accent (carmim) is reserved for the single most
   important word, symbol or CTA per screen. Never a fill, never decorative.
   ========================================================================== */

@import url('./fonts/fonts.css');

:root{
  /* ---- Brand constants (do not flip with mode) ----
     v9 palette (MD07, 2026-08-21): "preto predominante" pass — the v5
     "cartela outonal" light ground is retired as a page background (it
     read as beige-dominant, which Fernanda's latest revision explicitly
     rejects). Both modes now sit on warm near-black; chocolate/camel/
     burgundy survive only as accents (buttons, small labels, hover), never
     as a fill covering a whole section. Values are the same near-blacks
     already validated for contrast in the Home v8 pass (.section-onyx,
     footer-editorial) — reused here rather than re-derived, so every
     existing ratio check still holds. */
  --color-dark:  #0E0C0A;   /* deepest black — Modo Autoridade ground */
  --color-light: #F4EEE2;   /* cream/ivory — reserved for TEXT now, not backgrounds */
  --color-primary:   #3A3029; /* ink — legacy brand primary, no longer used as page bg/text */
  --color-secondary: #A48662; /* camel — warm secondary accent */
  --color-terracotta: #A65D45; /* reserve — use sparingly, e.g. one accent per page */
  --color-olive:      #6E6B4F; /* reserve — use sparingly */
  --color-burgundy:   #70433D; /* fixed brand red — used where white-on-fill contrast matters (buttons), regardless of mode */
  --color-burgundy-hover: #54322E;

  /* ---- Semantic tokens: DEFAULT = Modo Dossiê (now warm near-black, not cream) ---- */
  --color-bg:      #17130F;
  --color-surface: #241F1A;   /* card / raised surface, dossiê */
  --color-surface-2: #332B23; /* deeper surface, dossiê */
  --color-text:    #F4EEE2;
  --color-muted:   #C9BEB0;   /* verified ≥7:1 on #17130F and #0E0C0A */
  --color-border:  rgba(244,238,226,0.14);
  --color-accent:       #B9A198; /* lightened burgundy — verified ≥7.5:1 on both near-blacks */
  --color-accent-hover: #C9B6AC;

  /* ---- Typography families ----
     MD12 (2026-08-24): display swapped from Fraunces to Newsreader, body/
     interface swapped from Archivo to Manrope — direction approved in the
     MD10 study. Fraunces read closer to "fashion-editorial" than the
     "sophisticated + mature + contemporary" register Fernanda asked for;
     Newsreader keeps a quiet serif voice without tipping into coaching/
     wellness territory, and Manrope reads as premium interface type rather
     than SaaS/startup default. Both render Portuguese diacritics correctly.
     Archivo and Fraunces stay self-hosted (unused, zero runtime cost) in
     case a future pass needs them; JetBrains Mono is still load-bearing —
     it carries tabular/metadata use (step numbers, captions, meta rows). */
  --font-display: 'Newsreader', Georgia, serif;
  --font-body:    'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ---- Type scale (fluid, clamps between mobile and desktop) ---- */
  --text-display: clamp(2.75rem, 3.2vw + 2rem, 5.5rem);   /* hero verdicts */
  --text-h1:      clamp(2.25rem, 2.2vw + 1.6rem, 3.75rem);
  --text-h2:      clamp(1.75rem, 1.4vw + 1.3rem, 2.5rem);
  --text-h3:      clamp(1.375rem, 0.8vw + 1.1rem, 1.75rem);
  --text-body:    1.0625rem;   /* 17px */
  --text-small:   0.9375rem;   /* 15px */
  --text-caption: 0.8125rem;   /* 13px */
  --text-label:   0.6875rem;   /* 11px, used with letter-spacing + uppercase */
  --text-nav:     0.8125rem;   /* 13px, uppercase */
  --text-quote:   clamp(1.5rem, 1.4vw + 1.1rem, 2.125rem);

  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.6;
  --tracking-label: 0.09em;
  --tracking-nav:   0.04em;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px */
  --space-10: 8rem;    /* 128px */

  /* ---- Radius: editorial, not SaaS — sharp by default ---- */
  --radius-none: 0px;
  --radius-sm:   2px;   /* only for small UI chrome, e.g. focus rings on inputs */
  --radius-full: 999px; /* reserved for circular elements only (avatar, dot) */

  /* ---- Shadows: subtle, warm-tinted, never pure black ---- */
  --shadow-sm: 0 1px 2px rgba(23,19,15,0.08);
  --shadow-md: 0 4px 16px rgba(23,19,15,0.10);
  --shadow-lg: 0 12px 32px rgba(23,19,15,0.14);

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--color-border);
  --border-width: 1px;

  /* ---- Motion: editorial reveal, not tech bounce ---- */
  --duration-fast: 150ms;
  --duration-base: 320ms;
  --duration-slow: 620ms;
  --ease-decisive: cubic-bezier(0.16, 1, 0.3, 1);  /* fast start, clean stop — "verdict" */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Breakpoints (reference values — used in literal @media rules) ---- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;

  /* ---- Container ---- */
  --container-max: 1200px;      /* full editorial layouts, galleries */
  --container-text: 66ch;       /* long-form reading measure */
  --container-narrow: 880px;    /* dossier / documentation pages */
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Z-index scale ---- */
  --z-base: 0;
  --z-sticky: 10;
  --z-header: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;
}

/* Any element carrying data-mode paints itself in that mode — background
   and text color included. Without this, a nested [data-mode] wrapper only
   flips the custom properties, and text silently renders in the new mode's
   color against the OLD mode's (unpainted, inherited) background. */
[data-mode]{
  background: var(--color-bg);
  color: var(--color-text);
}

/* ==========================================================================
   MODO AUTORIDADE — applied per-section via [data-mode="autoridade"].
   The deeper of the two blacks — reserved for emphasis (CTA bands,
   statement sections), not the page default, so it still reads as a
   register shift rather than "another black rectangle" (MD07 §1/§15).
   ========================================================================== */
[data-mode="autoridade"]{
  --color-bg:      var(--color-dark);
  --color-surface: #1C1815;
  --color-surface-2: #2A241E;
  --color-text:    #F4EEE2;
  --color-muted:   #C9BEB0;
  --color-border:  rgba(244,238,226,0.14);
  --color-accent:       #B9A198; /* lightened burgundy — verified ≥7.5:1 on #0E0C0A */
  --color-accent-hover: #C9B6AC;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.36);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.42);
}

/* Modo Dossiê is the default (:root above) — the warm near-black ground
   used for most sections; Autoridade is reserved for the deeper register. */
[data-mode="dossie"]{
  --color-bg:      #17130F;
  --color-surface: #241F1A;
  --color-surface-2: #332B23;
  --color-text:    #F4EEE2;
  --color-muted:   #C9BEB0;
  --color-border:  rgba(244,238,226,0.14);
  --color-accent:       #B9A198;
  --color-accent-hover: #C9B6AC;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.30);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.36);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  :root{
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}