/* =========================================================================
   Rakiety Camps — Design Tokens
   Colors and typography (foundational + semantic)
   ========================================================================= */

/* Webfonts ----------------------------------------------------------------
   Bricolage Grotesque — display / headlines (characterful, sporty, modern)
   Loaded from the licensed variable TTF in /fonts/.
   Manrope — body / UI (clean, friendly, full Polish glyph coverage).
   Manrope is OFL-licensed; self-hosted (was Google Fonts CSS @import + woff2,
   which added 500 ms to LCP per PSI: extra DNS + 3-deep request chain). The
   variable font ships in one woff2 per unicode-range — we serve only latin +
   latin-ext (covers Polish), all 5 weights derive from the variable axis. */
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope/manrope-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/BricolageGrotesque-VariableFont_opsz_wdth_wght.ttf") format("truetype-variations"),
       url("/fonts/BricolageGrotesque-VariableFont_opsz_wdth_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------------------
     COLORS — primitives (raw palette)
     --------------------------------------------------------------------- */

  /* Brand — extracted directly from logo SVG */
  --rk-yellow-500: #FFC700; /* primary brand yellow — sand, sunshine */
  --rk-navy-900:   #211C43; /* primary brand navy — deep sea, night sky */
  --rk-white:      #FFFFFF;

  /* Yellow scale (sand / sun) */
  --rk-yellow-50:  #FFFBEB;
  --rk-yellow-100: #FFF3C2;
  --rk-yellow-200: #FFE890;
  --rk-yellow-300: #FFDB5C;
  --rk-yellow-400: #FFD12E;
  --rk-yellow-500: #FFC700; /* base */
  --rk-yellow-600: #E5A800;
  --rk-yellow-700: #B07F00;
  --rk-yellow-800: #7A5800;

  /* Navy scale (sea / sky at night) */
  --rk-navy-50:  #F2F1F8;
  --rk-navy-100: #DCD9EA;
  --rk-navy-200: #B8B2D5;
  --rk-navy-300: #8E86B5;
  --rk-navy-400: #5D5485;
  --rk-navy-500: #3A325F;
  --rk-navy-700: #2A234D;
  --rk-navy-900: #211C43; /* base */
  --rk-navy-950: #14102A;

  /* Sea — bright daytime blue (sky, ocean) */
  --rk-sea-50:  #ECF7FE;
  --rk-sea-100: #CFEAFC;
  --rk-sea-200: #9FD5F8;
  --rk-sea-300: #5FBAF1;
  --rk-sea-400: #2D9FE2;
  --rk-sea-500: #1284C8; /* base sea */
  --rk-sea-600: #0E69A3;
  --rk-sea-700: #0E5380;

  /* Palm — tropical leaf greens */
  --rk-palm-50:  #ECF7EE;
  --rk-palm-100: #CFEAD3;
  --rk-palm-200: #9CD3A6;
  --rk-palm-300: #62B574;
  --rk-palm-400: #2E944A;
  --rk-palm-500: #157A35; /* base palm */
  --rk-palm-700: #0F5B27;

  /* Coral — accent / sunset (use sparingly for promos, "early bird" tags) */
  --rk-coral-300: #FF9A7A;
  --rk-coral-500: #FF6F4D;
  --rk-coral-600: #E04A26;

  /* Neutral grayscale — warm-tinted to play nice with sand/navy */
  --rk-gray-0:    #FFFFFF;
  --rk-gray-50:   #FAFAF7;
  --rk-gray-100:  #F2F1EC;
  --rk-gray-200:  #E5E3DC;
  --rk-gray-300:  #CCC9BF;
  --rk-gray-400:  #9D9A8F;
  --rk-gray-500:  #6E6B62;
  --rk-gray-700:  #3F3D38;
  --rk-gray-900:  #1A1916;

  /* ---------------------------------------------------------------------
     COLORS — semantic (use these in components, not the primitives)
     --------------------------------------------------------------------- */

  /* Backgrounds */
  --rk-bg:           var(--rk-gray-50);   /* default page bg — warm off-white */
  --rk-bg-elevated:  var(--rk-white);     /* cards, surfaces */
  --rk-bg-sand:      var(--rk-yellow-50); /* warm sand wash sections */
  --rk-bg-night:     var(--rk-navy-900);  /* hero / footer / dark sections */
  --rk-bg-sea:       var(--rk-sea-500);   /* daytime blue sections */

  /* Foregrounds */
  --rk-fg:           var(--rk-navy-900);  /* default text on light bg */
  --rk-fg-muted:     var(--rk-navy-500);  /* secondary text */
  --rk-fg-subtle:    var(--rk-gray-500);  /* tertiary / captions */
  --rk-fg-on-dark:   var(--rk-white);     /* text on navy/sea backgrounds */
  --rk-fg-on-yellow: var(--rk-navy-900);  /* text on yellow — always navy, never white */

  /* Brand accents */
  --rk-accent:       var(--rk-yellow-500);
  --rk-accent-fg:    var(--rk-navy-900);  /* foreground on accent */
  --rk-accent-hover: var(--rk-yellow-400);

  /* Borders / dividers */
  --rk-border:        var(--rk-gray-200);
  --rk-border-strong: var(--rk-gray-300);
  --rk-border-on-dark: rgba(255,255,255,0.16);

  /* Status (functional) */
  --rk-success: var(--rk-palm-500);
  --rk-info:    var(--rk-sea-500);
  --rk-warning: var(--rk-yellow-600);
  --rk-danger:  var(--rk-coral-600);

  /* Promo / sale (early-bird ribbons, discount pills) */
  --rk-promo-bg: var(--rk-coral-500);
  --rk-promo-fg: var(--rk-white);

  /* ---------------------------------------------------------------------
     TYPOGRAPHY — primitives
     --------------------------------------------------------------------- */
  --rk-font-display: "Bricolage Grotesque", "Archivo", system-ui, -apple-system, sans-serif;
  --rk-font-sans:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rk-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — tightly packed, modular ratio ~1.22 */
  --rk-text-xs:   0.75rem;   /* 12 */
  --rk-text-sm:   0.875rem;  /* 14 */
  --rk-text-base: 1rem;      /* 16 */
  --rk-text-md:   1.125rem;  /* 18 */
  --rk-text-lg:   1.375rem;  /* 22 */
  --rk-text-xl:   1.75rem;   /* 28 */
  --rk-text-2xl:  2.25rem;   /* 36 */
  --rk-text-3xl:  3rem;      /* 48 */
  --rk-text-4xl:  4rem;      /* 64 */
  --rk-text-5xl:  5.5rem;    /* 88 — hero display */

  /* Weights */
  --rk-fw-regular:  400;
  --rk-fw-medium:   500;
  --rk-fw-semibold: 600;
  --rk-fw-bold:     700;
  --rk-fw-extra:    800;

  /* Line heights */
  --rk-lh-tight:   1.05;
  --rk-lh-snug:    1.18;
  --rk-lh-normal:  1.45;
  --rk-lh-relaxed: 1.6;

  /* Letter spacing */
  --rk-tracking-tight:  -0.02em;
  --rk-tracking-normal: 0;
  --rk-tracking-wide:   0.04em;
  --rk-tracking-caps:   0.12em;

  /* ---------------------------------------------------------------------
     SPACING / RADII / SHADOWS / MOTION
     --------------------------------------------------------------------- */
  --rk-space-1: 4px;
  --rk-space-2: 8px;
  --rk-space-3: 12px;
  --rk-space-4: 16px;
  --rk-space-5: 24px;
  --rk-space-6: 32px;
  --rk-space-7: 48px;
  --rk-space-8: 64px;
  --rk-space-9: 96px;
  --rk-space-10: 128px;

  --rk-radius-sm:   8px;
  --rk-radius-md:   14px;
  --rk-radius-lg:   22px;
  --rk-radius-xl:   32px;
  --rk-radius-pill: 999px;

  /* Shadows — soft, warm, never harsh */
  --rk-shadow-sm: 0 1px 2px rgba(33,28,67,0.06), 0 1px 1px rgba(33,28,67,0.04);
  --rk-shadow-md: 0 6px 16px rgba(33,28,67,0.08), 0 2px 4px rgba(33,28,67,0.06);
  --rk-shadow-lg: 0 18px 40px rgba(33,28,67,0.14), 0 4px 10px rgba(33,28,67,0.06);
  --rk-shadow-yellow: 0 8px 24px rgba(255,199,0,0.45);

  /* Motion */
  --rk-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --rk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --rk-dur-fast:   140ms;
  --rk-dur-base:   220ms;
  --rk-dur-slow:   400ms;
}

/* =========================================================================
   SEMANTIC TYPE STYLES — ready to apply or @extend
   ========================================================================= */

.rk-display,
.rk-h1,
.rk-h2,
.rk-h3,
.rk-h4,
.rk-eyebrow {
  font-family: var(--rk-font-display);
  color: var(--rk-fg);
  margin: 0;
  text-wrap: balance;
}

.rk-display {
  font-size: clamp(3rem, 6vw + 1rem, var(--rk-text-5xl));
  font-weight: var(--rk-fw-extra);
  line-height: var(--rk-lh-tight);
  letter-spacing: var(--rk-tracking-tight);
}
.rk-h1 {
  font-size: clamp(2rem, 4vw + 0.5rem, var(--rk-text-4xl));
  font-weight: var(--rk-fw-bold);
  line-height: var(--rk-lh-tight);
  letter-spacing: var(--rk-tracking-tight);
}
.rk-h2 {
  font-size: var(--rk-text-3xl);
  font-weight: var(--rk-fw-bold);
  line-height: var(--rk-lh-snug);
  letter-spacing: var(--rk-tracking-tight);
}
.rk-h3 {
  font-size: var(--rk-text-2xl);
  font-weight: var(--rk-fw-semibold);
  line-height: var(--rk-lh-snug);
}
.rk-h4 {
  font-size: var(--rk-text-xl);
  font-weight: var(--rk-fw-semibold);
  line-height: var(--rk-lh-snug);
}
.rk-eyebrow {
  font-family: var(--rk-font-sans);
  font-size: var(--rk-text-xs);
  font-weight: var(--rk-fw-bold);
  line-height: 1;
  letter-spacing: var(--rk-tracking-caps);
  text-transform: uppercase;
  color: var(--rk-fg-muted);
}

.rk-body,
.rk-body-lg,
.rk-body-sm,
.rk-caption,
.rk-mono {
  font-family: var(--rk-font-sans);
  color: var(--rk-fg);
  margin: 0;
  text-wrap: pretty;
}

.rk-body-lg {
  font-size: var(--rk-text-md);
  font-weight: var(--rk-fw-regular);
  line-height: var(--rk-lh-relaxed);
}
.rk-body {
  font-size: var(--rk-text-base);
  font-weight: var(--rk-fw-regular);
  line-height: var(--rk-lh-normal);
}
.rk-body-sm {
  font-size: var(--rk-text-sm);
  font-weight: var(--rk-fw-regular);
  line-height: var(--rk-lh-normal);
  color: var(--rk-fg-muted);
}
.rk-caption {
  font-size: var(--rk-text-xs);
  font-weight: var(--rk-fw-medium);
  line-height: 1.4;
  color: var(--rk-fg-subtle);
}
.rk-mono {
  font-family: var(--rk-font-mono);
  font-size: var(--rk-text-sm);
}

/* Price tag — distinctive numeric display, used for trip prices */
.rk-price {
  font-family: var(--rk-font-display);
  font-weight: var(--rk-fw-extra);
  font-size: var(--rk-text-2xl);
  letter-spacing: var(--rk-tracking-tight);
  color: var(--rk-fg);
  font-feature-settings: "tnum";
}
.rk-price-strike {
  font-family: var(--rk-font-sans);
  font-weight: var(--rk-fw-medium);
  font-size: var(--rk-text-md);
  text-decoration: line-through;
  color: var(--rk-fg-subtle);
  margin-right: 8px;
}

/* ===== Native HTML mappings — drop this stylesheet in and h1..p just work */
body {
  font-family: var(--rk-font-sans);
  color: var(--rk-fg);
  background: var(--rk-bg);
  font-size: var(--rk-text-base);
  line-height: var(--rk-lh-normal);
  -webkit-font-smoothing: antialiased;
}
h1 { font: var(--rk-fw-bold) var(--rk-text-4xl)/var(--rk-lh-tight) var(--rk-font-display); letter-spacing: var(--rk-tracking-tight); margin: 0; }
h2 { font: var(--rk-fw-bold) var(--rk-text-3xl)/var(--rk-lh-snug) var(--rk-font-display); letter-spacing: var(--rk-tracking-tight); margin: 0; }
h3 { font: var(--rk-fw-semibold) var(--rk-text-2xl)/var(--rk-lh-snug) var(--rk-font-display); margin: 0; }
h4 { font: var(--rk-fw-semibold) var(--rk-text-xl)/var(--rk-lh-snug) var(--rk-font-display); margin: 0; }
p  { font: var(--rk-fw-regular) var(--rk-text-base)/var(--rk-lh-normal) var(--rk-font-sans); color: var(--rk-fg); margin: 0; }
small { font-size: var(--rk-text-sm); color: var(--rk-fg-muted); }
code, kbd, samp { font-family: var(--rk-font-mono); font-size: 0.92em; }