/*
 * @file tokens
 * @purpose Define shared layout and design tokens.
 * @author Orizon
 * @date 2026-10-02
 * @version 1.0.2
 * Orizon Instituto — Design Tokens
 *
 * Semantic CSS custom properties derived from the Figma reference (node 5:2525).
 * These are the authoritative frontend values; theme.json references them through
 * WordPress preset variables.
 *
 * Fidelity notes:
 *   - Background dark value (#1C1C1C) inferred from Figma composite BG export.
 *   - Gold accent derived from Figma carousel card border and CTA button fills.
 *   - PosicioneLife background uses the exported raster; hex is approximate.
 */

@import url("fonts.css");

:root {
  /* ── Color tokens ── */
  --color-bg-dark:         #1C1C1C;
  --color-bg-mid:          #252525;
  --color-bg-light:        #F5F4F0;
  --color-bg-saude:        #EBEBEA;      /* Saúde Empresarial lighter section */
  --color-text-primary:    #FFFFFF;
  --color-text-dark:       #535455;      /* Exact hex from Figma Saúde Empresarial text */
  --color-text-muted:      rgba(255,255,255,0.72);
  --color-accent-gold:     #C8A951;
  --color-accent-gold-lt:  #D4B96A;
  --color-accent-gold-dk:  #A8892F;
  --color-overlay-10:      rgba(0,0,0,0.10);
  --color-overlay-20:      rgba(0,0,0,0.20);

  /* ── Font families ── */
  --font-primary:  "Galano Grotesque", Montserrat, system-ui, sans-serif;
  --font-nav:      Montserrat, system-ui, sans-serif;
  --font-script:   "Bellarina", cursive;
  --font-social:   "Social Media Circled", sans-serif;
  --font-coord:    "IBM Plex Mono", monospace;

  /* ── Font weights (Galano Grotesque) ── */
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;
  --fw-heavy:    950;

  /* ── Type scale (fluid; values match Figma proportions at 1920px) ── */
  --text-sm:    clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base:  clamp(1rem,     0.9rem + 0.5vw,   1.25rem);
  --text-md:    clamp(1.25rem,  1.1rem + 0.75vw,  1.5rem);   /* body/description */
  --text-lg:    clamp(1.5rem,   1.3rem + 1vw,     2rem);
  --text-xl:    clamp(2rem,     1.5rem + 2.5vw,   3rem);     /* section titles */
  --text-2xl:   clamp(2.5rem,   1.75rem + 3.75vw, 4rem);     /* hero title */
  --text-hero:  clamp(3rem,     2rem + 5vw,       5rem);     /* Posicione Life wordmark */

  /* ── Spacing ── */
  --space-xs:    0.5rem;
  --space-s:     1rem;
  --space-m:     2rem;
  --space-l:     4rem;
  --space-xl:    6rem;
  --space-2xl:   10rem;

  /* ── Layout ── */
  --content-width: 68.75rem;     /* 1100px */
  --wide-width:    var(--content-width);        /* 1100px */
  --side-gutter:   clamp(16px, 2.5vw, 32px);
  --header-height: 64px;
  --logo-height: 36px;
  --admin-bar-h: 0px;
  --anchor-gap: 16px;

  /* ── Border radius ── */
  --radius-card:   50%;          /* Circular program/partner cards from Figma */
  --radius-btn:    40px;         /* CTA buttons */
  --radius-input:  8px;

  /* ── Transitions ── */
  --transition-base: 200ms ease;

  /* ── Carousel card dimensions (shared across all card carousels) ── */
  --card-size:        clamp(160px, 20vw, 200px);

  /* ── Z-index scale ── */
  --z-nav:     100;
  --z-overlay:  50;
  --z-content:  10;
}

@media (max-width: 960px) {
  :root { --header-height: 56px; --logo-height: 32px; }
}