/* ==========================================================================
   CC's Coffee House: design tokens
   --------------------------------------------------------------------------
   Values taken from the live site's compiled CSS (dist/assets/app-*.css)
   and computed styles on ccscoffee.com, 2026-11-12. Do not invent values
   here; if something new is needed, add it under "New tokens" at the bottom
   and flag it for the dev.

   NOTE: the site sets html { font-size: 62.5% }, so 1rem = 10px.
   Every rem value below follows that (e.g. 1.6rem = 16px).

   Source class names are noted in comments so the dev can map each token
   back to their Tailwind config.
   ========================================================================== */

:root {
  /* ---------- Brand colors ---------- */
  --ccs-red:          #902729;  /* .bg-ccred / .text-ccred: primary buttons, links, eyebrows */
  --ccs-black:        #3A2A20;  /* .bg-ccblack: body text, button hover (dark brown, not true black) */
  --ccs-gold:         #A07B56;  /* .bg-gold */
  --ccs-gold-light:   #F2EDE8;  /* .bg-gold-light: warm off-white section background */
  --ccs-green:        #699310;  /* .bg-ccgreen */
  --ccs-white:        #FFFFFF;

  /* ---------- Neutrals (Tailwind gray, as used on the site) ---------- */
  --ccs-gray-100:     #F3F4F6;  /* accordion + form field background */
  --ccs-gray-200:     #E5E7EB;  /* accordion + form field border */
  --ccs-gray-300:     #D1D5DB;
  --ccs-gray-400:     #9CA3AF;  /* radio/checkbox border */
  --ccs-gray-500:     #6B7280;
  --ccs-gray-600:     #4B5563;  /* radio/checkbox checked fill */

  /* ---------- Feedback ---------- */
  --ccs-error:        #DC2626;  /* required asterisk (.field-required), red-600 */
  --ccs-error-light:  #FCA5A5;  /* link hover on dark backgrounds */

  /* ---------- Semantic (mirrors .colormode-default) ---------- */
  --ccs-text:         var(--ccs-black);
  --ccs-link:         var(--ccs-red);
  --ccs-link-hover:   var(--ccs-error);
  --ccs-bg:           var(--ccs-white);
  --ccs-bg-alt:       var(--ccs-gray-100);
  --ccs-btn-bg:       var(--ccs-red);
  --ccs-btn-text:     var(--ccs-white);
  --ccs-btn-hover:    var(--ccs-black);
  --ccs-icon:         var(--ccs-red);

  /* ---------- Typography ---------- */
  --ccs-font-body:     roc-grotesk, sans-serif;            /* .font-roc */
  --ccs-font-heading:  roc-grotesk-condensed, sans-serif;  /* .font-roc-condensed */
  /* Loaded weights: roc-grotesk 400/500/600, roc-grotesk-condensed 500/600 (700 is synthesized by the browser) */

  /* Fluid type scale (.text-scaling-*): min, viewport-based, max */
  --ccs-text-xs:    clamp(1rem,   1vw,    1.4rem);   /* lh 1.3  */
  --ccs-text-sm:    clamp(1.2rem, 1.1vw,  1.6rem);   /* lh 1.42 */
  --ccs-text-base:  clamp(1.4rem, 1.25vw, 1.8rem);   /* lh 1.5, body default */
  --ccs-text-lg:    clamp(1.6rem, 1.4vw,  2rem);     /* lh 1.5  */
  --ccs-text-xl:    clamp(1.8rem, 1.6vw,  2.4rem);   /* lh 1.5  */
  --ccs-text-2xl:   clamp(2rem,   1.88vw, 3rem);     /* lh 1.33, page subhead */
  --ccs-text-3xl:   clamp(2.4rem, 2.3vw,  3.6rem);   /* lh 1.2  */
  --ccs-text-4xl:   clamp(3rem,   2.8vw,  4.8rem);   /* lh 1.1  */
  --ccs-text-5xl:   clamp(3.6rem, 3.75vw, 6rem);     /* lh 1, page header headline */
  --ccs-text-6xl:   clamp(4.8rem, 4.6vw,  7.2rem);   /* lh 1    */
  --ccs-text-7xl:   clamp(6rem,   5.625vw, 9.6rem);  /* lh 1    */
  --ccs-text-8xl:   clamp(7.2rem, 7.5vw,  12.8rem);  /* lh 1    */

  --ccs-leading-tight:  0.9;   /* .page-header-headline / .heading */
  --ccs-leading-normal: 1.5;   /* body */

  /* Eyebrow (.subhead .subhead-default, e.g. "CONTACT US"): body font, base size, bold, uppercase, 2px tracking, red */
  --ccs-eyebrow-tracking: 2px;

  /* ---------- Spacing (named steps used across the site) ---------- */
  --ccs-space-quarter: 0.375rem;                     /* 3.75px  .p-quarter */
  --ccs-space-half:    0.75rem;                      /* 7.5px   .py-half (also label-to-input gap) */
  --ccs-space-base:    1.5rem;                       /* 15px    .p-base, .mb-base */
  --ccs-space-normal:  clamp(1.5rem, 2.35vw, 4.5rem);/* 15-45px .container-inner, section padding */
  --ccs-space-extra:   clamp(3rem,   3.5vw,  6rem);  /* 30-60px .mt-extra */
  --ccs-space-2x:      3rem;                         /* 30px    .pb-2x, form column gap */
  --ccs-space-3x:      4.5rem;                       /* 45px */

  /* ---------- Radius ---------- */
  --ccs-radius-sm:   0.25rem;  /* .rounded */
  --ccs-radius-md:   0.5rem;   /* .rounded-lg: accordions, form fields (5px) */
  --ccs-radius-lg:   0.75rem;  /* .rounded-xl */
  --ccs-radius-xl:   1rem;     /* .rounded-2xl, also .modal-window */
  --ccs-radius-pill: 10rem;    /* .btn-standard */

  /* ---------- Motion ---------- */
  --ccs-ease:      cubic-bezier(.075, .82, .165, 1);  /* used on buttons + accordions */
  --ccs-duration:  .5s;

  /* ---------- Breakpoints (reference only; CSS vars can't be used in @media) ----------
     sm 640px · md 768px · lg 1024px · xl 1280px · 2xl 1536px
     Some components also use container queries at 64rem (640px) and 76.8rem (768px). */

  /* ---------- Form fields (from the live Formie form on /event-support) ---------- */
  --ccs-field-bg:        var(--ccs-gray-100);
  --ccs-field-border:    var(--ccs-gray-200);
  --ccs-field-radius:    var(--ccs-radius-md);
  --ccs-field-padding:   var(--ccs-space-half);    /* 7.5px all round */
  --ccs-field-text:      var(--ccs-text);
  --ccs-field-label-weight: 700;
  --ccs-field-col-gap:   var(--ccs-space-2x);      /* 30px between side-by-side fields */
  --ccs-field-row-gap:   2rem;                     /* ~20px between stacked fields (measured) */

  /* ---------- Modal (existing .modal-* classes the popup should reuse) ---------- */
  --ccs-modal-overlay:  rgb(0 0 0 / .7);   /* .modal-overlay: #000 at opacity .7 */
  --ccs-modal-radius:   var(--ccs-radius-xl);
  --ccs-modal-shadow:   0 25px 50px -12px rgba(0, 0, 0, .25);  /* shadow-2xl */
  --ccs-modal-max-w:    80vw;              /* .modal-window */
  --ccs-z-modal:        999;               /* note: .site-header is 9999 and #header_topbar 10001, so the existing modal sits under the header */

  /* ==========================================================================
     New tokens (not on the live site yet; flag these in the dev handoff)
     ========================================================================== */
  --ccs-z-popup:        10002;             /* global popup covers header + alert bar */
  --ccs-focus-ring:     0 0 0 3px rgb(144 39 41 / .25);  /* ccs-red at 25%; live Formie fields have no visible focus style */
  --ccs-field-min-h:    4.4rem;            /* 44px touch target (live fields are 32px) */
  --ccs-field-font:     max(1.6rem, var(--ccs-text-base));  /* 16px floor stops iOS zooming into fields */
  --ccs-shadow-pop:     0 12px 32px -8px rgb(58 42 32 / .25), 0 2px 6px rgb(58 42 32 / .08);  /* dropdown panel, tinted with ccs-black */
}