/*
  Ezytal design tokens.
  Every value here traces back to the logo mark (see IMPLEMENTATION-PLAN.md Section 2).
  Brand red is #FF1616, sampled from the source logo files - NOT the #FF2B2F
  in the original content brief. Do not "correct" this back without re-checking
  the source files in /0-Logo.
*/

:root {
  color-scheme: light;

  /* ---- Ink & surface ---- */
  --ez-ink:        #121214;
  --ez-ink-mute:   #5B5B63;
  --ez-ink-faint:  #8A8A92;
  --ez-black:      #0A0A0B;
  --ez-black-raised: #16161A; /* cards/panels sitting on a dark section - one step lighter than --ez-black so they read as elevated, not just a border on the same flat color */
  --ez-white:      #FFFFFF;
  --ez-gray-050:   #FAFAFB;
  --ez-gray-100:   #F5F5F7;
  --ez-gray-200:   #E8E8EC;
  --ez-gray-300:   #D2D2DA;

  /* ---- Accent, sampled from the logo files ---- */
  --ez-red:        #FF1616; /* 3.91:1 on white - fills, buttons, text 24px+ */
  --ez-red-ink:    #E81212; /* 4.64:1 on white - small red text, hover */
  --ez-red-tint:   #FFF0F0; /* badge backgrounds only, never large areas */
  --ez-red-on-dark:#FF1616; /* 5.07:1 on --ez-black - safe at any size */

  /* Semantic aliases - use these in components, not the raw scale */
  --ez-surface:        var(--ez-white);
  --ez-surface-alt:    var(--ez-gray-100);
  --ez-surface-dark:   var(--ez-black);
  --ez-text:           var(--ez-ink);
  --ez-text-mute:      var(--ez-ink-mute);
  --ez-text-on-dark:   var(--ez-white);
  --ez-text-on-dark-mute: rgba(255,255,255,.64);
  --ez-border:         var(--ez-gray-200);
  --ez-border-on-dark: rgba(255,255,255,.14);
  --ez-accent:         var(--ez-red);
  --ez-accent-ink:     var(--ez-red-ink);

  /* ---- Geometry, measured from the mark (outer 300, radius 150 = 50%) ---- */
  --ez-r-sm:    8px;
  --ez-r:       14px;
  --ez-r-lg:    28px;
  --ez-r-pill:  999px;
  /* True notch (50%) for square elements: icon tiles, avatars, badges, bullets */
  --ez-notch:      50% 50% 0 50%;
  /* Capped notch for rectangles: cards, images, inputs, buttons */
  --ez-notch-card: var(--ez-r-lg) var(--ez-r-lg) 0 var(--ez-r-lg);
  --ez-notch-sm:   var(--ez-r) var(--ez-r) 0 var(--ez-r);
  --ez-stroke:  2px; /* icon stroke at 24px grid */
  --ez-stroke-lg: 2.5px; /* icon stroke at 40px+ */

  /* ---- Type scale (fluid) ---- */
  --ez-fs-display: clamp(2.5rem, 1.9rem + 2.6vw, 4.5rem);
  --ez-fs-h1:      clamp(2.1rem, 1.7rem + 1.8vw, 3.25rem);
  --ez-fs-h2:      clamp(1.65rem, 1.4rem + 1.1vw, 2.375rem);
  --ez-fs-h3:      clamp(1.3rem, 1.15rem + .7vw, 1.75rem);
  --ez-fs-h4:      clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
  --ez-fs-body-lg: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --ez-fs-body:    1rem;
  --ez-fs-sm:      .875rem;
  --ez-fs-eyebrow: .8125rem;

  --ez-lh-tight: 1.08;
  --ez-lh-heading: 1.2;
  --ez-lh-body: 1.6;

  --ez-font-display: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  --ez-font-body: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

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

  --ez-section-pad: clamp(56px, 5vw + 24px, 128px);
  --ez-container: min(1240px, 100% - 2 * clamp(20px, 5vw, 64px));

  --ez-ease: cubic-bezier(.22, .8, .3, 1);
  --ez-dur-fast: 150ms;
  --ez-dur: 250ms;
  --ez-dur-slow: 450ms;

  --ez-shadow-sm: 0 1px 2px rgba(10,10,11,.06);
  --ez-shadow-md: 0 8px 24px rgba(10,10,11,.10);
  --ez-shadow-lg: 0 16px 48px rgba(10,10,11,.16);
  --ez-shadow-red: 0 8px 24px rgba(255,22,22,.24);
}

/* This theme intentionally does not ship a dark mode for site content -
   the brand system uses dark *sections* (--ez-black bands) deliberately
   placed by the designer, not a user-toggled dark theme. Admin-side
   meta boxes inherit wp-admin's own scheme. */