/* =========================================================================
 * CFL Design Tokens — CSS Custom Properties
 * Version: 3.0.0 — Alignment with Brand Book (Michael Johnson, 2026-05-20)
 * Generated: 2026-05-20
 * Source of truth: aios-project/projects/clients/saldanha_investidor/
 *                  2_estrategia/branding/brand-book-cfl/
 *                  03-color-system.md, 02-type-architecture.md,
 *                  06-grid-layout.md, 08-digital-applications.md
 * WCAG Target: AA (verified Carbon/Papel pairs 15.8:1)
 * Philosophy: "Segurança jurídica antes de fortuna. Leitura antes de lance."
 *             Magistrate-Caregiver. Quiet luxury (Patek/Hermès), NÃO Outlaw.
 *
 * NOTE: tokens.dtcg.json, tokens.tailwind.js, tokens.ts STALE — regenerar
 *       via *export-dtcg após validação visual.
 * ========================================================================= */

:root {

  /* =========================================================================
   * 1. COLOR — PRIMARY
   * ========================================================================= */

  --cfl-carbon:         #0F0F0F;  /* text primary, dark bg, brand mark mono */
  --cfl-champagne:      #B58F53;  /* brand accent — APENAS decorativo (logos, highlights). Falha WCAG AA em fundo claro */
  --cfl-papel:          #EDE4D0;  /* default background — papel sépia institucional */

  /* =========================================================================
   * 2. COLOR — SECONDARY
   * ========================================================================= */

  --cfl-bronze:         #7A5C3F;  /* texto champagne acessível (5.5:1 em Papel) */
  --cfl-light-champagne: #C4A37D; /* highlights, hover dark mode */

  /* =========================================================================
   * 3. COLOR — NEUTRAL SCALE (5-step grayscale)
   * ========================================================================= */

  --stone-100:          #F5F2EC;  /* Cal — surface elevated, dark mode text primary */
  --stone-300:          #D4CFC4;  /* Névoa — borders, dividers, disabled */
  --stone-500:          #8A8A8A;  /* Pedra — text tertiary, placeholders */
  --stone-700:          #4A4A4A;  /* Grafite — text secondary */
  --stone-900:          #1A1A1A;  /* Carvão — text primary alt, dark mode elevated bg */

  /* =========================================================================
   * 4. COLOR — BACKGROUND
   * ========================================================================= */

  --bg-papel:           #EDE4D0;  /* DEFAULT light bg */
  --bg-papel-light:     #F7F2E5;  /* secondary light bg */
  --bg-cream:           #FBF8F1;  /* subtle, quase branco warm */
  --bg-white:           #FFFFFF;  /* uso restrito — alta clareza only */
  --bg-dark:            #0F0F0F;  /* DEFAULT dark mode bg */
  --bg-dark-elevated:   #1A1A1A;  /* dark mode elevated surfaces */

  /* =========================================================================
   * 5. COLOR — SEMANTIC (dessaturadas, institucionais)
   * ========================================================================= */

  --success-base:       #5A7A3F;  /* verde mato/oliveira */
  --success-light:      #E2EAD6;
  --success-dark:       #3D5429;

  --error-base:         #9C3F3F;  /* terracota envelhecida */
  --error-light:        #EFD9D9;
  --error-dark:         #6E2828;

  --warning-base:       #B88A2C;  /* âmbar fosco */
  --warning-light:      #F2E6CA;
  --warning-dark:       #7E5E17;

  --info-base:          #3F5C7A;  /* azul tinteiro */
  --info-light:         #D9DFE7;
  --info-dark:          #28394D;

  /* =========================================================================
   * 6. COLOR — FOCUS RING (a11y)
   * ========================================================================= */

  --focus-ring-on-light:  var(--cfl-bronze);
  --focus-ring-on-dark:   var(--cfl-light-champagne);


  /* =========================================================================
   * 7. TYPE FAMILIES — 3 famílias com papéis disjuntos
   * ========================================================================= */

  --font-display: 'Cinzel', 'Trajan Pro 3', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-data:    'JetBrains Mono', 'SF Mono', 'Monaco', 'Cascadia Code', 'Consolas', monospace;

  /* Aliases legacy (NÃO usar em código novo, mantidos pra compat retro) */
  --font-body:    var(--font-ui);
  --font-mono:    var(--font-data);

  /* =========================================================================
   * 8. FONT WEIGHTS
   * ========================================================================= */

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     900;

  /* =========================================================================
   * 9. TYPE SCALE — Modular ratio 1.25 (major third) from body 16px
   * ========================================================================= */

  /* Display (Cinzel Bold) */
  --text-display-2xl: 6rem;       /* 96px — Hero VSL, capas */
  --text-display-xl:  4.5rem;     /* 72px — LP hero principal */
  --text-display-lg:  3.5rem;     /* 56px — section hero */

  /* Headings */
  --text-h1:          3rem;       /* 48px — Cinzel Bold */
  --text-h2:          2.25rem;    /* 36px — Cinzel Bold */
  --text-h3:          1.75rem;    /* 28px — Cinzel Bold */
  --text-h4:          1.375rem;   /* 22px — Inter Semibold */
  --text-h5:          1.125rem;   /* 18px — Inter Semibold */
  --text-h6:          1rem;       /* 16px — Inter Semibold */

  /* Body (Inter Regular) */
  --text-body-xl:     1.25rem;    /* 20px — leitura confortável */
  --text-body-lg:     1.125rem;   /* 18px — long-form */
  --text-body:        1rem;       /* 16px — default */
  --text-body-sm:     0.875rem;   /* 14px — secondary */
  --text-body-xs:     0.75rem;    /* 12px — microcopy */

  /* UI (Inter Medium/Semibold) */
  --text-label:       0.875rem;   /* 14px */
  --text-label-sm:    0.75rem;    /* 12px */
  --text-overline:    0.6875rem;  /* 11px UPPERCASE +0.1em */
  --text-caption:     0.75rem;    /* 12px */

  /* Data (JetBrains Mono) */
  --text-data-lg:     3rem;       /* 48px — preço, %, ROI */
  --text-data:        1rem;       /* 16px — tabelas */
  --text-data-sm:     0.75rem;    /* 12px — IDs, microdata */

  /* =========================================================================
   * 10. LINE HEIGHT
   * ========================================================================= */

  --leading-display:  1.1;
  --leading-heading:  1.25;
  --leading-body:     1.5;
  --leading-comfort:  1.65;

  /* =========================================================================
   * 11. LETTER SPACING
   * ========================================================================= */

  --tracking-tight:    -0.02em;   /* display large */
  --tracking-snug:     -0.01em;
  --tracking-normal:   0;
  --tracking-overline: 0.1em;     /* OVERLINE caps */
  --tracking-cinzel:   0.04em;    /* Cinzel uppercase respiration */

  /* =========================================================================
   * 12. SPACING SCALE — 8px base unit
   * ========================================================================= */

  --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 — section vertical default */
  --space-32:   8rem;      /* 128px — extra-large only */

  /* =========================================================================
   * 13. CONTAINER WIDTHS
   * ========================================================================= */

  --content-max-default:  1280px;
  --content-max-wide:     1440px;
  --content-max-full:     1920px;
  --content-max-text:     680px;   /* legibilidade long-form */
  --content-max-narrow:   880px;   /* área de leitura */

  /* =========================================================================
   * 14. BREAKPOINTS (reference, JS only — CSS usa @media direto)
   * ========================================================================= */

  --bp-mobile:    0px;
  --bp-tablet:    640px;
  --bp-desktop:   1024px;
  --bp-wide:      1280px;
  --bp-ultra:     1536px;

  /* =========================================================================
   * 15. BORDER RADIUS — restraint
   * ========================================================================= */

  --radius-none:  0;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-xl:    12px;
  --radius-full:  9999px;

  /* =========================================================================
   * 16. MOTION
   * ========================================================================= */

  --duration-instant: 0ms;
  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;

  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:            cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis:      cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-hover:     var(--duration-fast) var(--ease-out);
  --transition-modal-in:  var(--duration-base) var(--ease-out);
  --transition-modal-out: var(--duration-fast) var(--ease-in);
  --transition-accordion: var(--duration-base) var(--ease-in-out);

  /* =========================================================================
   * 17. Z-INDEX SCALE
   * ========================================================================= */

  --z-base:           0;
  --z-raised:         1;
  --z-sticky-bar:     10;
  --z-dropdown:       20;
  --z-tooltip:        30;
  --z-modal-backdrop: 40;
  --z-modal:          50;
  --z-toast:          60;
  --z-skip-link:      100;

  /* =========================================================================
   * 18. SHADOW — minimal, brand institucional restraint
   * ========================================================================= */

  --shadow-none:        none;
  --shadow-sm:          0 1px 2px rgba(15, 15, 15, 0.06);
  --shadow-md:          0 4px 12px rgba(15, 15, 15, 0.08);
  --shadow-lg:          0 12px 32px -8px rgba(15, 15, 15, 0.18);
  --shadow-modal:       0 24px 56px -16px rgba(15, 15, 15, 0.45);
  --shadow-focus-ring:  0 0 0 3px rgba(122, 92, 63, 0.35);

  /* =========================================================================
   * 19. COMPONENT STATE TOKENS — Hero, CTA, Input, Card
   * ========================================================================= */

  --btn-primary-bg:          var(--cfl-carbon);
  --btn-primary-bg-hover:    var(--stone-900);
  --btn-primary-color:       var(--cfl-papel);
  --btn-primary-color-hover: var(--cfl-papel);
  --btn-primary-border:      var(--cfl-champagne);

  --btn-champagne-bg:        var(--cfl-champagne);
  --btn-champagne-bg-hover:  var(--cfl-bronze);
  --btn-champagne-color:     var(--cfl-carbon);

  --btn-outline-bg:          transparent;
  --btn-outline-color:       var(--cfl-papel);
  --btn-outline-border:      rgba(181, 143, 83, 0.4);
  --btn-outline-bg-hover:    rgba(181, 143, 83, 0.08);

  --input-bg:                rgba(245, 242, 236, 0.04);
  --input-border:            rgba(212, 207, 196, 0.18);
  --input-border-focus:      var(--cfl-champagne);
  --input-border-error:      var(--error-base);
  --input-placeholder:       var(--stone-500);

  --card-bg:                 var(--bg-dark-elevated);
  --card-border:             rgba(181, 143, 83, 0.14);
  --card-border-hover:       rgba(181, 143, 83, 0.32);
}


/* =========================================================================
 * GLOBAL A11Y — focus visible (WCAG 2.4.7 + 1.4.11 non-text contrast)
 * ========================================================================= */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--focus-ring-on-light);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

.bg-dark :focus-visible,
[data-theme="dark"] :focus-visible {
  outline-color: var(--focus-ring-on-dark);
}


/* =========================================================================
 * GLOBAL A11Y — prefers-reduced-motion (WCAG 2.3.3)
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================================================
 * SKIP LINK atom (WCAG 2.4.1)
 * ========================================================================= */

.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--cfl-champagne);
  color: var(--cfl-carbon);
  padding: 12px 20px;
  z-index: var(--z-skip-link);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  font-size: var(--text-label-sm);
  text-decoration: none;
  transition: top var(--transition-hover);
}

.skip-link:focus {
  top: 0;
}