/* =========================================================================
   Re-Ignite Dental — Invisalign Open Day
   Token layer. De-ientes token NAMES are preserved as aliases so the template
   CSS keeps resolving, but every VALUE is remapped to the Re-Ignite system:
   midnight + teal, geometric Jost, Trebuchet-italic one-word accents.
   ========================================================================= */

/* ---------- Webfonts ----------
   Re-Ignite production type is ITC Avant Garde Gothic Pro (paid). Jost is the
   documented open substitute (geometric, similar x-height). Open Sans handles
   fine print; Trebuchet MS Italic is the sparing one-word display accent. */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&family=Open+Sans:wght@400;600;700&display=swap");

:root {
  /* ====================================================================
     RE-IGNITE — canonical tokens (used by the open-day overrides)
     ==================================================================== */
  --rid-midnight:     #121221;
  --rid-midnight-90:  #1d1d2e;
  --rid-midnight-80:  #2a2a3a;
  --rid-ink:          #0a0a16;
  --rid-teal:         #2E93AD;
  --rid-teal-pressed: #256A7B;
  --rid-teal-soft:    #E7F2F5;
  --rid-mint:         #61AE98;
  --rid-mint-soft:    #D7EBE3;
  --rid-aqua-1:       #8BF9D9;
  --rid-aqua-2:       #5FC9C5;
  --rid-aqua-3:       #3298B0;
  --rid-gradient-aqua: linear-gradient(135deg, #8BF9D9 0%, #5FC9C5 45%, #3298B0 100%);
  --rid-white:        #FFFFFF;
  --rid-paper:        #F7F8F9;
  --rid-fog:          #EEF0F2;
  --rid-mist:         #E1E4E8;
  --rid-stone:        #B7BCC2;
  --rid-slate:        #5C6573;
  --rid-graphite:     #2B2F38;

  /* ====================================================================
     DE-IENTES ALIASES → Re-Ignite values (do not rename; templates use these)
     ==================================================================== */
  /* "greens" now carry midnight (dark surfaces) + teal/mint (accents) */
  --green-900: #121221;   /* deepest — dark cards, footer, ink            */
  --green-800: #1d1d2e;   /* dark surface / price-tag ground             */
  --green-700: #2a2a3a;   /* ink-button hover (subtle lighten)           */
  --green-600: #256A7B;   /* teal pressed                                */
  --green-500: #2E93AD;   /* teal                                        */
  --green-400: #2E93AD;   /* teal — primary action                       */
  --green-300: #61AE98;   /* mint                                        */
  --green-200: #8BC9BC;   /* mint tint                                   */
  --green-100: #D7EBE3;   /* mint-soft panel                             */
  --green-050: #E7F2F5;   /* teal-soft — icon chip backgrounds           */

  /* "beige/cream" now cool paper + white */
  --beige-050: #FFFFFF;
  --beige-100: #F4F6F7;   /* near-white text on midnight + light surface */
  --beige-200: #F7F8F9;   /* page background                             */
  --beige-300: #E7EAEE;   /* divider / muted card                        */
  --beige-400: #D4D9DF;

  /* warm neutrals & inks → Re-Ignite cool neutrals */
  --ink-900: #0a0a16;
  --ink-700: #2B2F38;     /* default body text                           */
  --ink-500: #5C6573;     /* secondary                                   */
  --ink-300: #8A909B;     /* tertiary / meta                             */
  --ink-100: #C9CDD4;
  --paper:   #FFFFFF;

  /* accent "gold" → mint (stars, dots, on-dark accents) */
  --gold-500: #61AE98;
  --gold-300: #A7D8CB;

  /* status (urgency badge stays a true red, low-chroma) */
  --error-500: #B53B3B;
  --error-100: #F8DEDE;

  /* ---------- Type — raw -------------------------------------------- */
  --font-the-seasons: "Trebuchet MS", "Jost", system-ui, sans-serif; /* italic accent + quotes */
  --font-poppins:     "Jost", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-ui:          "Open Sans", system-ui, sans-serif;
  --font-accent:      "Trebuchet MS", "Jost", sans-serif;

  --text-13: 13px;  --text-14: 14px;  --text-15: 15px;  --text-16: 16px;
  --text-17: 17px;  --text-18: 18px;  --text-19: 19px;  --text-20: 20px;
  --text-22: 22px;  --text-25: 25px;  --text-32: 32px;  --text-42: 42px;
  --text-56: 56px;  --text-72: 72px;  --text-94: 94px;

  --tracking-neg-1: -1px;
  --tracking-0: 0px;
  --tracking-1: 1px;
  --tracking-2: 2px;

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

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px;
  --radius-xl: 28px; --radius-pill: 999px;

  /* ---------- Elevation — almost flat, midnight-tinted -------------- */
  --shadow-1: 0 1px 2px rgba(18, 18, 33, 0.05);
  --shadow-2: 0 4px 16px rgba(18, 18, 33, 0.08);
  --shadow-3: 0 16px 40px rgba(18, 18, 33, 0.12);
  --shadow-inset-cream: inset 0 0 0 1px var(--beige-300);
  --shadow-cta: 0 8px 24px rgba(46, 147, 173, 0.28);

  /* ---------- Motion ------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;

  /* semantic helpers used by the base thank-you / styles.css ---------- */
  --bg-page: var(--beige-200);
  --bg-deep: var(--green-800);
  --bg-deepest: var(--green-900);
  --bg-card: var(--paper);
  --bg-card-cream: #EEF1F4;
  --green-050b: var(--green-050);
  --jewel: var(--rid-mint);
  --accent-deep: var(--rid-teal);
  --line-soft: rgba(18, 18, 33, 0.10);
  --fg-1: var(--rid-midnight);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
}

/* =========================================================================
   A handful of semantic type classes kept for compatibility.
   ========================================================================= */
.type-eyebrow {
  font-family: var(--font-poppins); font-size: var(--text-13); font-weight: 600;
  letter-spacing: var(--tracking-2); text-transform: uppercase; color: var(--rid-teal);
}
.type-body, .type-body-17 {
  font-family: var(--font-poppins); font-size: var(--text-17); font-weight: 300;
  line-height: 1.6; color: var(--fg-2);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
a { transition: color var(--dur-fast) var(--ease-out); }