/* ==========================================================================
   Bukovel Design System — Colors & Type
   ==========================================================================
   Sourced from /UI/Color and /UI/Typography in the Figma file, plus the
   top-30 color frequency chart in METADATA.md. Weights & sizes from
   Montserrat usage counts (SemiBold 9148×, Regular 6348×, Medium 6225×,
   Bold 1731×).
   ========================================================================== */

/* ---------- Fonts ------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ======================================================================
     1. BRAND / PRIMARY (the Bukovel red — the non-negotiable hero color)
     ====================================================================== */
  --red-900:  #8C1022;      /* deep mulled-wine — only in logo washes */
  --red-700:  #B8132C;      /* hover / pressed state for the primary */
  --red-500:  #E5153E;      /* PRIMARY. The logo red. rgb(229,21,62). Use for CTAs, tags, accents. */
  --red-400:  #DD183E;      /* rgb(221,24,62) — the Frame-card red variant */
  --red-300:  #FF1744;      /* rgb(255,23,68) — a second widely-used red */
  --red-200:  #FF5F7A;      /* soft tint */
  --red-100:  #FFC2CC;      /* used in pink illustration washes */
  --red-050:  #FFF0F3;      /* almost-white pink, for notifications */

  /* ======================================================================
     2. INK / NAVY (the text & structure color)
     ====================================================================== */
  --ink-900:  #091E42;      /* PRIMARY TEXT. rgb(9,30,66). Headings, nav, body. */
  --ink-800:  #172B4D;      /* rgb(23,43,77) — slightly warmer heading navy */
  --ink-700:  #253858;      /* rgb(37,56,88) */
  --ink-600:  #344563;      /* rgb(52,69,99) */
  --ink-500:  #4C5F7C;      /* sub-text navy (logo subtitle) */
  --ink-400:  #5E6C84;      /* rgb(94,108,132) — metadata, captions */
  --ink-300:  #6B778C;      /* rgb(107,119,140) — hint text */
  --ink-200:  #8A96A8;      /* disabled text */
  --ink-100:  #C1C7D0;      /* rgb(193,199,208) — borders when visible */

  /* ======================================================================
     3. TEAL (the secondary accent — "Bukovel Teal")
     ====================================================================== */
  --teal-800: #006B6C;
  --teal-600: #008687;
  --teal-500: #00B1B2;      /* SECONDARY. rgb(0,177,178). Used on subscribe,
                               accent borders, sky washes, rink scene. */
  --teal-400: #00B0B2;      /* rgb(0,176,178) — a near-duplicate variant */
  --teal-300: #2ED9C3;      /* rgb(46,217,195) — mint accent used on cards */
  --teal-200: #99E3E1;      /* rgb(153,227,225) — illustration mid-tone */
  --teal-100: #B7D6E1;      /* rgb(183,214,225) — sky / pale background wash */
  --teal-050: #E6F7F5;

  /* ======================================================================
     4. GREEN (reserved — sustainability / Summer / success)
     ====================================================================== */
  --green-700: #2A6F4A;     /* rgb(42,111,74) — the Sustainable-Development
                               green on the official logo */
  --green-500: #389463;     /* rgb(56,148,99) — success affirmations */
  --green-050: #EAF5EE;

  /* ======================================================================
     5. ORANGE / YELLOW (tertiary warm accent — Summer)
     ====================================================================== */
  --orange-600: #F39325;    /* rgb(243,147,37) — summer card border */
  --orange-500: #FF991F;    /* rgb(255,153,31) — promo tag */
  --orange-050: #FFF4E3;

  /* ======================================================================
     6. UTILITY BLUE (Apple-default CTA blue — used sparingly)
     ====================================================================== */
  --blue-500:   #007AFF;    /* rgb(0,122,255) — linking in long-form content */
  --blue-050:   #EAF3FF;

  /* ======================================================================
     7. NEUTRALS / SURFACE
     ====================================================================== */
  --bg-white:   #FFFFFF;    /* page background — overwhelmingly the default */
  --bg-offwhite:#FAFBFC;
  --bg-snow:    #F4F5F7;    /* rgb(244,245,247) — section alt background */
  --bg-mist:    #EBECF0;    /* rgb(235,236,240) — subtle panel */
  --border:     #DFE1E6;    /* rgb(223,225,230) — 1px rule */
  --border-soft:#EBECF0;

  /* ======================================================================
     8. SEMANTIC
     ====================================================================== */
  --success:    var(--green-500);
  --success-bg: var(--green-050);
  --warning:    var(--orange-500);
  --warning-bg: var(--orange-050);
  --danger:     var(--red-500);
  --danger-bg:  var(--red-050);
  --info:       var(--teal-500);
  --info-bg:    var(--teal-050);

  /* ======================================================================
     9. SHORT-HAND FOREGROUND / BACKGROUND ROLES
     ====================================================================== */
  --fg-1: var(--ink-900);           /* primary text */
  --fg-2: var(--ink-700);           /* secondary text */
  --fg-3: var(--ink-400);           /* tertiary / metadata */
  --fg-4: var(--ink-300);           /* hint / placeholder */
  --fg-on-brand: #FFFFFF;           /* text that sits on red / teal blocks */
  --fg-link:     var(--teal-500);   /* in-product link color (Link style) */
  --fg-link-hover: var(--teal-600);

  --bg-0: var(--bg-white);
  --bg-1: var(--bg-snow);
  --bg-2: var(--bg-mist);

  /* ======================================================================
     10. TYPE — FAMILIES & WEIGHTS
     ====================================================================== */
  --font-sans:       'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                     Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-ui:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                     Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display:    'Montserrat', sans-serif;   /* Bold / ExtraBold for heroes */

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-xbold:   800;

  /* ======================================================================
     11. TYPE SCALE (from /UI/Typography H090…H1000 scale)
     ====================================================================== */
  --fs-h1000: 54px;  --lh-h1000: 1.1;   /* hero display */
  --fs-h900:  40px;  --lh-h900:  1.15;
  --fs-h800:  32px;  --lh-h800:  1.2;
  --fs-h700:  28px;  --lh-h700:  1.2;
  --fs-h600:  24px;  --lh-h600:  1.25;
  --fs-h500:  20px;  --lh-h500:  1.3;
  --fs-h450:  18px;  --lh-h450:  1.35;
  --fs-h400:  16px;  --lh-h400:  1.5;   /* body default */
  --fs-h300:  15px;  --lh-h300:  1.45;
  --fs-h200:  14px;  --lh-h200:  1.45;  /* UI text default — most common */
  --fs-h100:  13px;  --lh-h100:  1.4;   /* help / metadata */
  --fs-h090:  12px;  --lh-h090:  1.4;   /* small / footnote */

  /* ======================================================================
     12. RADIUS
     ====================================================================== */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;      /* default — cards, inputs */
  --r-lg:  12px;     /* large cards, modals */
  --r-xl:  20px;     /* rounded image frames */
  --r-2xl: 28px;     /* promo panels */
  --r-pill: 999px;   /* pills, avatars, round buttons */

  /* ======================================================================
     13. SPACING (4-pt base grid)
     ====================================================================== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ======================================================================
     14. ELEVATION
     ====================================================================== */
  --shadow-xs: 0 1px 2px rgba(9, 30, 66, 0.04);
  --shadow-sm: 0 2px 4px rgba(9, 30, 66, 0.06), 0 1px 2px rgba(9, 30, 66, 0.04);
  --shadow-md: 0 4px 8px rgba(9, 30, 66, 0.08), 0 1px 3px rgba(9, 30, 66, 0.06);
  --shadow-lg: 0 12px 24px rgba(9, 30, 66, 0.10), 0 4px 8px rgba(9, 30, 66, 0.06);
  --shadow-xl: 0 24px 48px rgba(9, 30, 66, 0.14);
  --shadow-brand: 0 8px 24px rgba(229, 21, 62, 0.24);  /* red button hover */

  /* ======================================================================
     15. DURATION / EASING
     ====================================================================== */
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
  --ease-std:  cubic-bezier(0.2, 0, 0, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Semantic type classes — drop-in replacements for the Figma text styles
   ========================================================================== */
.t-h1000, h1.display { font: var(--w-bold) var(--fs-h1000)/var(--lh-h1000) var(--font-display); color: var(--fg-1); letter-spacing: -0.02em; }
.t-h900,  h1        { font: var(--w-bold) var(--fs-h900)/var(--lh-h900)  var(--font-sans);    color: var(--fg-1); letter-spacing: -0.015em; }
.t-h800,  h2        { font: var(--w-bold) var(--fs-h800)/var(--lh-h800)  var(--font-sans);    color: var(--fg-1); letter-spacing: -0.01em; }
.t-h700,  h3        { font: var(--w-semi) var(--fs-h700)/var(--lh-h700)  var(--font-sans);    color: var(--fg-1); }
.t-h600,  h4        { font: var(--w-semi) var(--fs-h600)/var(--lh-h600)  var(--font-sans);    color: var(--fg-1); }
.t-h500,  h5        { font: var(--w-semi) var(--fs-h500)/var(--lh-h500)  var(--font-sans);    color: var(--fg-1); }
.t-h450             { font: var(--w-semi) var(--fs-h450)/var(--lh-h450)  var(--font-sans);    color: var(--fg-1); }
.t-h400, .t-body    { font: var(--w-regular) var(--fs-h400)/var(--lh-h400) var(--font-sans); color: var(--fg-2); }
.t-h300             { font: var(--w-regular) var(--fs-h300)/var(--lh-h300) var(--font-sans); color: var(--fg-2); }
.t-h200, .t-ui      { font: var(--w-medium) var(--fs-h200)/var(--lh-h200) var(--font-sans);  color: var(--fg-1); }
.t-h100, .t-help    { font: var(--w-regular) var(--fs-h100)/var(--lh-h100) var(--font-sans); color: var(--fg-3); }
.t-h090, .t-small   { font: var(--w-regular) var(--fs-h090)/var(--lh-h090) var(--font-sans); color: var(--fg-3); }

/* Caps-label — used on ski-pass cards, section tags, promo frames */
.t-caps-700         { font: var(--w-bold) 13px/1.2 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-1); }
.t-caps-500         { font: var(--w-semi) 11px/1.2 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }

.t-link             { color: var(--fg-link); text-decoration: none; }
.t-link:hover       { color: var(--fg-link-hover); text-decoration: underline; }

.t-price            { font: var(--w-xbold) var(--fs-h800)/1 var(--font-sans); color: var(--fg-1); }
.t-price-old        { font: var(--w-regular) var(--fs-h300)/1 var(--font-sans); color: var(--fg-3); text-decoration: line-through; }

/* Base reset — scoped so it plays nicely inside previews */
html { color: var(--fg-1); font-family: var(--font-sans); font-size: 16px; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--bg-0); }