/* ==========================================================================
   SayCheese Design System — tokens, ported verbatim from the source design
   comp (Dr_Smile_Oral_Care_Website.html bundle). Do not rename these custom
   properties — template-parts/theme CSS below reference them directly, and
   keeping the names identical to the source makes future design-file
   updates a diff instead of a rewrite.
   ========================================================================== */

/* ---- Web fonts ----
   Cormorant Garamond = confirmed live brand font (headings).
   Avenir Next (body/UI) is NOT freely licensed/distributable — substituted
   with Montserrat (Google Fonts) as the closest geometric-sans match. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: local("Cormorant Garamond");
}

/* ---- Color tokens ---- */
:root {
  /* Base: teal / neutral */
  --sc-teal-darkest: #021B20;   /* hero / announcement bar */
  --sc-teal-dark: #06272D;      /* header, nav, footer, dark bands, heading text */
  --sc-ivory: #FAF8F4;          /* default page background */
  --sc-cream: #F3EADC;          /* alt section background */
  --sc-white: #FFFFFF;          /* card / product surface */
  --sc-body: #5F6B6D;           /* primary body copy (teal-grey, not black) */
  --sc-muted: #647578;          /* secondary / muted copy */
  --sc-cream-text: #FBF7EF;     /* light cream text on dark teal grounds */
  --sc-hairline: #E8E1D8;       /* dividers, card borders */
  --sc-teal-link: #1E5F5D;      /* links / accents on light backgrounds */

  /* Base: gold (CTA) */
  --sc-gold: #D7B66A;           /* CTA fill */
  --sc-gold-text: #C99A4A;      /* gold used as text / icon color */

  /* Base: product-line accents (not used on Dr. Smile, kept for parity) */
  --sc-solace-accent: #2E8986;
  --sc-solace-tint: #EEF7F6;
  --sc-solace-deep: #06272D;
  --sc-ascend-accent: #56479D;
  --sc-ascend-tint: #F3F1FA;
  --sc-ascend-deep: #3F337D;

  /* Concern-category accents (from CATS in the source data model) */
  --cat-daily-care: #0B746F;
  --cat-sensitivity: #8B7BB5;
  --cat-powered-brushing: #2B5EA8;
  --cat-fresh-breath: #38A7B4;
  --cat-oral-beauty: #9BA7B4;
  --cat-travel: #242629;

  /* Semantic aliases */
  --surface-page: var(--sc-ivory);
  --surface-alt: var(--sc-cream);
  --surface-card: var(--sc-white);
  --surface-dark: var(--sc-teal-dark);
  --surface-darkest: var(--sc-teal-darkest);

  --text-heading: var(--sc-teal-dark);
  --text-body: var(--sc-body);
  --text-muted: var(--sc-muted);
  --text-on-dark: var(--sc-cream-text);
  --text-link: var(--sc-teal-link);

  --border-hairline: var(--sc-hairline);

  --cta-fill: var(--sc-gold);
  --cta-text: var(--sc-teal-dark);
  --accent-gold-text: var(--sc-gold-text);
}

/* ---- Typography tokens ---- */
:root {
  --font-serif-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans-ui: "Avenir Next Sub", "Montserrat", -apple-system, sans-serif;

  --text-h1-size: 60px;
  --text-h1-weight: 600;
  --text-h1-tracking: -2.7px;
  --text-h1-family: var(--font-serif-display);

  --text-h2-size: 50px;
  --text-h2-weight: 600;
  --text-h2-tracking: -2.25px;
  --text-h2-family: var(--font-serif-display);

  /* H3 breaks the serif rhythm on purpose — heavy sans, brand signature device */
  --text-h3-size: 32px;
  --text-h3-weight: 850;
  --text-h3-tracking: normal;
  --text-h3-family: var(--font-sans-ui);

  --text-h4-size: 24px;
  --text-h4-weight: 600;
  --text-h4-tracking: normal;
  --text-h4-family: var(--font-serif-display);

  --text-body-size: 18px;
  --text-body-weight: 400;
  --text-body-family: var(--font-sans-ui);

  --text-small-size: 16px;
  --text-small-weight: 400;
  --text-small-family: var(--font-sans-ui);

  --text-eyebrow-size: 13px;
  --text-eyebrow-weight: 600;
  --text-eyebrow-tracking: 2px;
  --text-eyebrow-family: var(--font-sans-ui);

  --text-button-size: 15px;
  --text-button-tracking: 1px;
  --text-button-family: var(--font-sans-ui);

  --line-height-display: 1.05;
  --line-height-body: 1.6;
}

/* ---- Spacing, radius, shadow, motion tokens ---- */
:root {
  --space-1: 2px;  --space-2: 4px;  --space-3: 8px;  --space-4: 12px; --space-5: 16px;
  --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 64px; --space-10: 96px;

  --radius-pill: 999px;   /* hero CTAs */
  --radius-button: 6px;   /* secondary / non-hero buttons */
  --radius-card: 4px;
  --radius-input: 2px;
  --radius-badge: 2px;

  --shadow-sm: 0 1px 3px rgba(2, 27, 32, 0.06);
  --shadow-md: 0 4px 12px rgba(2, 27, 32, 0.08);
  --shadow-lg: 0 8px 32px rgba(2, 27, 32, 0.10);

  --motion-micro: 120ms;
  --motion-component: 280ms;
  --motion-page: 480ms;
  --motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
}