/* ============================================================
   ELITE MED REP — Design Tokens
   Colors, typography, spacing, elevation, motion
   ============================================================ */

/* ---------- Webfont declarations -----------------------------
   Display: Cormorant Garamond — high-contrast premium serif used
            for "ELITE" wordmark feel and editorial display.
   Sans:    Inter substitute? No — we use Montserrat for the wide
            letterspaced caps that match the brand sheet, and a
            neutral humanist sans for body. We use Manrope for body.
   Mono:    JetBrains Mono for any data / cert numbers.
   NOTE: Substituting Google Fonts for the brand sheet's lettering
   (which appears to be a custom luxe sans). Flag to user.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600;700;800&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     COLORS — Brand palette
     Premium dark-mode-first palette. Gold is the hero accent;
     silver/platinum is the secondary; navy/obsidian carries depth.
     ============================================================ */

  /* Core neutrals — obsidian to bone */
  --emr-obsidian:   #0A0E14;   /* deepest background, pure stage */
  --emr-midnight:   #10151D;   /* primary surface */
  --emr-graphite:   #1A2230;   /* raised surface, cards */
  --emr-slate:      #2A3344;   /* borders on dark, hover surface */
  --emr-steel:      #4A5568;   /* muted ink on dark */
  --emr-fog:        #8A92A0;   /* secondary ink */
  --emr-mist:       #C7CCD4;   /* tertiary ink */
  --emr-bone:       #F4F1EA;   /* warm off-white background */
  --emr-paper:      #FFFFFF;   /* pure white */

  /* Gold — primary brand accent (champagne→deep) */
  --emr-gold-100:   #F8E9C2;
  --emr-gold-200:   #EDD49A;
  --emr-gold-300:   #DCB873;   /* champagne */
  --emr-gold-400:   #C99B4F;   /* signature gold (logo) */
  --emr-gold-500:   #B8862E;   /* deep gold */
  --emr-gold-600:   #8E6620;
  --emr-gold-700:   #5E4314;

  /* Platinum — secondary metallic */
  --emr-platinum-100: #EFF1F4;
  --emr-platinum-200: #D8DCE2;
  --emr-platinum-300: #B8BEC8;   /* signature silver */
  --emr-platinum-400: #8C95A2;
  --emr-platinum-500: #6A7280;

  /* Navy — supportive deep accent */
  --emr-navy-300:   #5276B0;
  --emr-navy-500:   #1F3A6B;
  --emr-navy-700:   #0E1F3D;

  /* Semantic — used sparingly. Aligned to the brand temperature. */
  --emr-success:    #6BA56B;   /* muted sage, not neon green */
  --emr-warning:    #DCB873;   /* champagne (reuse gold-300) */
  --emr-danger:     #B85C4A;   /* terracotta, not fire-red */
  --emr-info:       #5276B0;   /* navy-300 */

  /* Signature gradient — gold leaf finish (used very sparingly) */
  --emr-grad-gold: linear-gradient(135deg, #DCB873 0%, #C99B4F 35%, #8E6620 70%, #DCB873 100%);
  --emr-grad-gold-soft: linear-gradient(180deg, #EDD49A 0%, #C99B4F 100%);
  --emr-grad-platinum: linear-gradient(135deg, #EFF1F4 0%, #B8BEC8 50%, #8C95A2 100%);
  --emr-grad-obsidian: linear-gradient(180deg, #10151D 0%, #0A0E14 100%);
  --emr-grad-spotlight: radial-gradient(ellipse at top, #1A2230 0%, #0A0E14 70%);

  /* ============================================================
     SEMANTIC COLOR ROLES
     Use these in components, not the raw palette where possible.
     The system is dark-mode-first; light surfaces are accents.
     ============================================================ */

  /* Default (dark) surface roles */
  --bg:             var(--emr-obsidian);
  --bg-raised:      var(--emr-midnight);
  --bg-elevated:    var(--emr-graphite);
  --bg-overlay:     rgba(10, 14, 20, 0.72);

  --fg:             var(--emr-bone);
  --fg-muted:       var(--emr-mist);
  --fg-subtle:      var(--emr-fog);
  --fg-disabled:    var(--emr-steel);

  --accent:         var(--emr-gold-400);
  --accent-hover:   var(--emr-gold-300);
  --accent-press:   var(--emr-gold-500);
  --accent-ink:     var(--emr-obsidian);   /* text on gold */

  --border:         rgba(199, 204, 212, 0.10);   /* hairline on dark */
  --border-strong:  rgba(199, 204, 212, 0.18);
  --border-gold:    rgba(201, 155, 79, 0.40);

  /* ============================================================
     TYPOGRAPHY
     Display:  wide-letterspaced uppercase for headlines (Montserrat 300)
     Editorial: Cormorant Garamond for prestige callouts
     Body:     Manrope, friendly humanist
     Mono:     JetBrains Mono
     ============================================================ */

  --font-display:   'Montserrat', 'Helvetica Neue', sans-serif;
  --font-editorial: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:      'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Type scale — modular, tuned for editorial/luxury feel */
  --fs-eyebrow:     11px;
  --fs-caption:     12px;
  --fs-small:       13px;
  --fs-body:        15px;
  --fs-body-lg:     17px;
  --fs-h6:          18px;
  --fs-h5:          22px;
  --fs-h4:          28px;
  --fs-h3:          36px;
  --fs-h2:          48px;
  --fs-h1:          64px;
  --fs-display:     88px;
  --fs-mega:        120px;

  --lh-tight:       1.05;
  --lh-snug:        1.2;
  --lh-normal:      1.5;
  --lh-relaxed:     1.7;

  --ls-tightest:    -0.03em;
  --ls-tight:       -0.01em;
  --ls-normal:      0;
  --ls-wide:        0.08em;
  --ls-wider:       0.16em;
  --ls-widest:      0.28em;   /* signature spacing for "COACH. CONNECT. ELEVATE." */

  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-black:       800;

  /* ============================================================
     SPACING — 4pt base
     ============================================================ */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;

  /* ============================================================
     RADII
     Restrained — premium feels squarer. No pills except for chips.
     ============================================================ */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-xl:    12px;
  --radius-2xl:   18px;
  --radius-pill:  999px;

  /* ============================================================
     ELEVATION — Shadows
     Two systems: dark-mode (glow + key) and light-mode (lift).
     ============================================================ */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 12px rgba(0,0,0,0.5);
  --shadow-3: 0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 32px rgba(0,0,0,0.6);
  --shadow-4: 0 1px 0 rgba(255,255,255,0.08) inset, 0 24px 60px rgba(0,0,0,0.7);
  --shadow-gold-glow: 0 0 0 1px rgba(201,155,79,0.35), 0 8px 24px rgba(201,155,79,0.20);
  --shadow-inset-hairline: inset 0 0 0 1px rgba(255,255,255,0.06);

  /* Light-surface shadows (used in light-mode contexts only) */
  --shadow-light-1: 0 1px 2px rgba(10,14,20,0.06), 0 1px 1px rgba(10,14,20,0.04);
  --shadow-light-2: 0 4px 12px rgba(10,14,20,0.08);
  --shadow-light-3: 0 16px 40px rgba(10,14,20,0.14);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasis: cubic-bezier(0.2, 0.6, 0.0, 1.0);
  --ease-exit:     cubic-bezier(0.4, 0.0, 1.0, 1.0);

  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
  --dur-slower:  600ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-narrow: 720px;
  --container-base:   1080px;
  --container-wide:   1280px;
  --container-xl:     1440px;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these in components rather than raw font props.
   ============================================================ */

.emr-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--accent);
}

.emr-display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

.emr-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.emr-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.emr-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.emr-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.emr-h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
}

.emr-editorial {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.emr-quote {
  font-family: var(--font-editorial);
  font-weight: var(--fw-medium);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

.emr-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

.emr-body-lg {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}

.emr-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
}

.emr-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-normal);
}

.emr-tagline {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}

/* ============================================================
   GLOBAL RESET (scoped — opt-in)
   Add class="emr-root" to a container to enable defaults.
   ============================================================ */
.emr-root {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.emr-root * { box-sizing: border-box; }

.emr-root h1 { @extend .emr-h1; }