/* ============================================
   HTS Editorial Warm — Design Tokens
   Extracted from: outputs/website-redesign/option-c/style.css
                   + shared/nav.css, shared/cookie.css (Option C values resolved)
   ============================================ */

/* -- Colors: surfaces & ink -- */
:root {
  --paper: #F4F0E9;               /* Page background (ivory) */
  --paper-2: #EBE5DB;             /* Alternate section band, form success panel */
  --paper-3: #DED6C9;             /* Media placeholder fill while loading */
  --paper-raised: #FBF9F5;        /* Floating surfaces: dropdown, cookie banner, cards on media */
  --paper-glass: rgba(244, 240, 233, .95); /* Scrolled nav background (with blur) */
  --white: #FFFFFF;               /* Diagram panels: manufacturer graphics are drawn on white */

  --ink: #16231F;                 /* Primary text, primary button */
  --ink-2: rgba(22, 35, 31, .76); /* Secondary text, list text */
  --muted: rgba(22, 35, 31, .56); /* Captions, breadcrumbs, placeholders */
  --line: rgba(22, 35, 31, .14);  /* Soft divider (section borders, nav) */
  --line-2: rgba(22, 35, 31, .26);/* Rule lines in lists, inputs, tables */

  --deep: #13201D;                /* Dark sections: AI band, footer, chat card */
}

/* -- Colors: brand accents -- */
:root {
  --cyan: #00A3DA;                /* HTS logo cyan. Quote rule, chat answer bubble, AI flow */
  --teal: #0A6E8E;                /* Interactive accent on paper: hover, section names, taglines, maker list */
  --sky: #A6E1F5;                 /* Accent on dark: section names over video, footer link hover */
  --sky-2: #8FD8F0;               /* Section name in the AI dark band */
}

/* -- Colors: text & lines on dark (--deep / video scrims) -- */
:root {
  --on-dark: #F4F0E9;                       /* = paper */
  --on-dark-2: rgba(244, 240, 233, .76);    /* Lead text on dark */
  --on-dark-3: rgba(244, 240, 233, .88);    /* Lead text over video (needs more contrast) */
  --on-dark-muted: rgba(244, 240, 233, .58);/* Notes, footer headings, legal */
  --on-dark-line: rgba(244, 240, 233, .2);  /* Rule lines on dark */
  --on-dark-line-strong: rgba(244, 240, 233, .35); /* Rule lines over video */
  --on-dark-line-soft: rgba(244, 240, 233, .15);   /* Footer legal divider */
}

/* -- Colors: diagrams (skin cross-sections) -- */
:root {
  --skin-sc: #E7C3A6;             /* Stratum corneum */
  --skin-epi: #EFCFB5;            /* Epidermis */
  --skin-derm: #F6E3D3;           /* Dermis */
  --skin-fat: #F4E6BC;            /* Hypodermis / fat */
  --heat: #C4553A;                /* Coagulation (thermal) zone */
  --channel: #FFFFFF;             /* Ablated channel (empty tissue) */
}

/* -- Colors: status -- */
:root {
  --error: #B23434;               /* Field errors, form error text */
  --warn-bg: #FBF0D2;             /* "Preview" / "Sample" badges and banners */
  --warn-fg: #6E5106;
  --warn-line: #D9A520;           /* Dashed border on sample badges */
}


/* -- Overlays (gradients on photos/videos) -- */
:root {
  --scrim-panel: linear-gradient(0deg, rgba(19, 32, 29, .92) 0%, rgba(19, 32, 29, .35) 50%, rgba(19, 32, 29, .05) 100%);
  --scrim-hero: linear-gradient(0deg, rgba(19, 32, 29, .92) 10%, rgba(19, 32, 29, .2) 65%);
  --scrim-night: linear-gradient(0deg, rgba(5, 12, 18, .85) 0%, rgba(5, 12, 18, .15) 60%);
  --scrim-photo: linear-gradient(0deg, rgba(5, 15, 20, .55), transparent 55%);
  --glass-dark: rgba(8, 20, 27, .78);       /* Chat card floating on a photo */
  --tag-on-media: rgba(22, 35, 31, .5);     /* Placeholder tag on media */
}

/* -- Spacing -- */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;

  /* Section rhythm (vertical padding) */
  --section-y: 130px;             /* Standard home section */
  --section-y-sm: 120px;          /* Product/AI page section */
  --section-y-lg: 150px;          /* Testimonial */
  --nav-h: 84px;
  --nav-h-mobile: 70px;

  /* Layout */
  --wrap: 1260px;                 /* Content max width */
  --gutter: 24px;                 /* Side gutter desktop/tablet (16px under 560px) */
  --col-gap: clamp(30px, 6vw, 110px); /* Gap between the two columns of a split layout */
}

/* -- Radii -- */
:root {
  --radius-none: 0;               /* All photos, videos, media frames, sections */
  --radius-sm: 4px;               /* Buttons, chips, banners, cookie banner */
  --radius-md: 6px;               /* Dropdown panel */
  --radius-bubble: 14px;          /* Chat bubbles in the phone-style AI mockup only */
  --radius-pill: 50%;             /* Testimonial portrait */
}

/* -- Shadows: only on layers that float above the page -- */
:root {
  --shadow-float: 0 30px 60px -20px rgba(0, 0, 0, .3);   /* Dropdown panel */
  --shadow-banner: 0 24px 60px rgba(0, 0, 0, .18);       /* Cookie banner */
  --shadow-card: 0 30px 70px -30px rgba(0, 0, 0, .45);   /* Card overlapping media (brief card) */
  --shadow-glass: 0 30px 60px -20px rgba(0, 0, 0, .5);   /* Glass chat on photo */
}

/* -- Typography -- */
:root {
  --serif: 'Spectral', Georgia, serif;                  /* Headlines, quotes, big numbers, list titles */
  --sans: 'Source Sans 3', system-ui, sans-serif;       /* Body, UI, labels, buttons */

  /* Fixed sizes */
  --text-legal: 14px;             /* Footer legal line only */
  --text-fine: 15px;              /* Fine print under CTAs, dropdown descriptions */
  --text-sm: 16px;                /* Form labels, captions, breadcrumbs, nav buttons */
  --text-ui: 17px;                /* Minimum body size: nav, buttons, section names, chips */
  --text-md: 18px;                /* Secondary paragraphs, trust line */
  --text-base: 19px;              /* Body (18px under 560px) */
  --text-input: 20px;             /* Form inputs */
  --text-serif-sm: 21px;          /* Serif list items (studies, footer links) */
  --text-serif-md: 24px;          /* Serif list items (education), FAQ questions */
  --text-h3: 28px;                /* h3 in rule lists */
  --text-fact: 30px;              /* Fact numbers, others-card title */

  /* Fluid sizes */
  --text-lead: clamp(19px, 1.4vw, 21px);
  --text-quote-sm: clamp(22px, 2vw, 27px);
  --text-tagline: clamp(22px, 2vw, 28px);
  --text-h3-lg: clamp(28px, 2.4vw, 36px);
  --text-h2: clamp(34px, 4vw, 58px);
  --text-display-sm: clamp(36px, 3.6vw, 54px);   /* Big phone number, panel titles */
  --text-quote: clamp(30px, 3.4vw, 50px);
  --text-h1-sentence: clamp(38px, 4.4vw, 64px);  /* Sentence-length h1 (AI page) */
  --text-h1: clamp(46px, 5.6vw, 92px);           /* Hero beside media (split layout) */
  --text-h1-full: clamp(34px, 3.6vw, 56px);      /* Home hero over full-width video: smaller, so the video shows */
  --text-h1-product: clamp(54px, 7vw, 108px);    /* Product name */

  --weight-light: 300;            /* Serif display (h1, h2, quotes) */
  --weight-regular: 400;          /* Serif h3, body */
  --weight-medium: 500;           /* Logo wordmark */
  --weight-semibold: 600;         /* Sans UI emphasis: buttons, labels, section names */

  --leading-tight: 1.02;          /* Hero h1 */
  --leading-display: 1.1;         /* h2 */
  --leading-heading: 1.2;
  --leading-quote: 1.35;
  --leading-body: 1.65;

  --tracking-display: -.02em;     /* h1 */
  --tracking-heading: -.01em;     /* h2, h3 */
}

/* -- Motion -- */
:root {
  --ease: cubic-bezier(.77, 0, .175, 1);      /* Panel expand (accordion flex, grid rows) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);    /* Reveals, arrows, image zoom */
  --dur-fast: .2s;                /* Dropdown, hover backgrounds */
  --dur: .3s;                     /* Buttons, chips, inputs */
  --dur-slow: 1s;                 /* Scroll reveal, accordion */
  --reveal-shift: 26px;           /* Scroll reveal travel distance */
}