/* ============================================================================
   DESIGN TOKENS — single source of truth for BOTH the marketing site and the app.
   Change a value here and it updates everywhere. Never hardcode a color, font,
   size, or spacing value anywhere else — always reference a token.
   Values captured from the current WordPress site.
   ========================================================================== */

:root {
  /* ---- Brand color ------------------------------------------------------ */
  --color-accent:        #00d7ff;   /* the bright cyan — links, buttons, highlights */
  --color-accent-rgb:    0, 215, 255; /* same cyan as an r,g,b triple, for rgba() glows */
  --color-accent-hover:  #4de4ff;   /* lighter cyan for hover */
  --color-accent-press:  #00b3d6;   /* darker cyan for active/pressed */
  --color-on-accent:     #000000;   /* text/icons sitting ON a cyan fill */

  /* ---- Neutrals / surfaces --------------------------------------------- */
  --color-bg:            #000000;   /* page background */
  --color-surface-1:     #121212;   /* raised panels, cards */
  --color-surface-2:     #1c1c1c;   /* nested surfaces, inputs */
  --color-surface-3:     #252525;   /* hovered rows, dividers-on-dark */

  /* ---- Text ------------------------------------------------------------- */
  --color-heading:       #ffffff;   /* headings */
  --color-text:          #d8d8d8;   /* body text */
  --color-text-bright:   #ededed;   /* long-form reading copy on black */
  --color-text-muted:    #9a9a9a;   /* secondary/meta text */
  --color-text-faint:    #6a6a6a;   /* disabled, fine print */

  /* ---- Lines / borders / overlays -------------------------------------- */
  --color-border:        rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.24);
  --color-overlay:       rgba(0, 0, 0, 0.55);   /* darkening over hero images */
  --color-scrim:         rgba(0, 0, 0, 0.25);   /* light wash over video posters */
  --color-scrim-hover:   rgba(0, 0, 0, 0.40);
  --color-overlay-strong: rgba(0, 0, 0, 0.70);  /* over background photos behind content */
  /* Hero scrim: flat dark wash at the top fading to a solid black floor, so the
     hero melts into the page background. Matches the live site exactly. */
  --hero-scrim:          linear-gradient(rgba(0, 0, 0, 0.56) 0%, var(--color-bg) 100%);

  /* ---- Status ----------------------------------------------------------- */
  --color-success:       #33c481;
  --color-error:         #ff5d5d;
  --color-warning:       #ffb020;

  /* ---- Typography: families -------------------------------------------- */
  /* Body/reading = Alegreya (serif). Headings = Alegreya Sans 600 uppercase.
     Nav/buttons = Alegreya Sans SC (the small-caps cut). Forms = Alegreya Sans.
     Verified against the live WordPress site. */
  --font-body:    'Alegreya', Georgia, 'Times New Roman', serif;
  --font-heading: 'Alegreya Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Alegreya Sans SC', 'Alegreya Sans', system-ui, sans-serif;
  --font-ui:      'Alegreya Sans', system-ui, -apple-system, sans-serif;

  /* ---- Typography: fluid scale ----------------------------------------- */
  --fs-xs:   0.8125rem;   /* 13px */
  --fs-sm:   0.9375rem;   /* 15px */
  --fs-base: 1.0625rem;   /* 17px — body */
  --fs-lg:   1.25rem;     /* 20px */
  /* Heading steps measured off the live site at 375px and 1280px. */
  --fs-xl:   clamp(1.1875rem, 1.11rem + 0.33vw, 1.375rem);  /* 19px -> 22px  (h4) */
  --fs-2xl:  clamp(1.25rem,  1.14rem + 0.44vw, 1.5rem);     /* 20px -> 24px  (h3, card titles) */
  --fs-hero: clamp(1.8125rem, 1.35rem + 1.95vw, 2.8125rem); /* 29px -> 45px  (hero h1) */
  --fs-price: clamp(1.75rem, 1.45rem + 1.25vw, 2.5rem);     /* 28px -> 40px  (pricing figures) */
  --fs-3xl:  var(--fs-hero);   /* section h2 matches the hero size on the live site */
  --fs-lead: clamp(0.9375rem, 0.85rem + 0.37vw, 1.125rem);  /* 15px -> 18px  (hero lead) */

  --lh-tight:   1.1;    /* large headings */
  --lh-heading: 1.2;    /* small headings */
  --lh-snug:    1.4;    /* body copy inside sections, per the live site */
  --lh-body:    1.7;    /* long-form reading */

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --tracking-wide:  0.04em;   /* nav, small-caps labels */
  --tracking-wider: 0.08em;
  --tracking-heading: 1px;    /* headings, per the live site */

  /* ---- Spacing scale ---------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ---- Radius ----------------------------------------------------------- */
  --radius-sm:   3px;
  --radius:      5px;    /* buttons, matches current site */
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ---- Shadows ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 6px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --glow-accent: 0 0 0 1px rgba(0, 215, 255, 0.4), 0 0 20px rgba(0, 215, 255, 0.25);

  /* ---- Layout ----------------------------------------------------------- */
  /* Content column = 1140px on desktop, matching Elementor's default boxed
     width. The .container rule adds --container-pad OUTSIDE this, so the inner
     content stays exactly 1140px wide (see base.css). */
  --container-max: 1140px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);
  /* Header + logo sizes taken from the live site (120/100px bar, 100/80px mark) */
  /* Breakpoint at which the nav collapses into the slide-out panel. Declared
     here so site.js can read it back — CSS stays the single source of truth. */
  --bp-nav: 900px;
  /* Scrolled header: translucent rather than near-solid, so the page reads
     through it, with a stronger blur keeping the text legible over anything. */
  --header-bg-scrolled: rgba(0, 0, 0, 0.72);
  --header-blur: 14px;
  --header-height:    120px;
  --header-height-sm: 100px;
  --logo-size:    100px;
  --logo-size-sm:  80px;

  /* ---- Motion ----------------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition:      200ms ease;
  --transition-slow: 400ms ease;

  /* ---- Z-index ---------------------------------------------------------- */
  --z-header:  1000;
  --z-overlay: 1500;
  --z-modal:   2000;
}