/*
  tokens.css — Design Tokens
  Source: extracted from custom.css (Phlox Pro theme, webtemplates.revelationagency.com)
  All values confirmed from wp-pipeline/extracted-reference/page-maps/custom.css
*/

:root {
  /* ── Colors ── */
  --color-primary:      rgb(48, 150, 239);   /* blue — CTAs, links, accents */
  --color-secondary:    rgb(255, 255, 255);  /* white */
  --color-text:         rgb(0, 0, 0);        /* body text */
  --color-accent:       rgb(42, 42, 42);     /* near-black — dark section backgrounds */
  --color-header-bg:    #FFFFFF;
  --color-footer-bg:    #1A1A1A;
  --color-subfooter-bg: #fafafa;
  --color-border:       #EAEAEA;
  --color-muted:        #888888;

  /* ── Typography ── */
  --font-body:    'Work Sans', sans-serif;
  --font-heading: 'Libre Franklin', sans-serif;

  --text-base:  1rem;        /* 16px */
  --text-sm:    0.875rem;    /* 14px */
  --text-lg:    1.125rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   2.5rem;
  --text-4xl:   3rem;
  --text-hero:  clamp(2.5rem, 6vw, 5rem);

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ── Layout ── */
  --container-max:      1200px;
  --container-padding:  clamp(1rem, 4vw, 2rem);
  --section-padding-y:  clamp(3rem, 8vw, 6rem);

  /* ── Header / Nav (from custom.css) ── */
  --header-height:        85px;
  --nav-item-height:      60px;
  --header-sticky-height: 80px;
  --logo-max-width:       80px;
  --logo-max-height:      85px;
  --logo-footer-height:   50px;

  /* ── Spacing scale ── */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;

  /* ── Borders & Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --border-std: 1px solid var(--color-border);

  /* ── Motion ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
}