/* ============================================================
   BoxPoint Self Storage — Color & Type Foundations
   Brand: white · graphite/black · orange (CTA accent)
   Tone: premium, clean, trustworthy, local (Brzeg, PL)
   ============================================================ */

/* ---- Font (self-hosted — RODO/DSGVO compliant, NO Google CDN) ----
   Single brand typeface: PLUS JAKARTA SANS, used for both display and body.
   Files live in fonts/ (latin + latin-ext = full Polish diacritics).
   Self-hosting avoids sending visitor IPs to Google (LG München 3 O 17493/20)
   so the site stays RODO/DSGVO compliant. See README "Typografia". */
@import url('fonts/plus-jakarta-sans.css');

:root {
  /* ---------------------------------------------------------
     BRAND — Orange (primary CTA accent, sampled from logo cube)
     --------------------------------------------------------- */
  --orange-50:  #FDF1E8;
  --orange-100: #FADFC9;
  --orange-200: #F4BD94;
  --orange-300: #EF9A5E;
  --orange-400: #EC7F36;
  --orange-500: #E9661E;   /* ★ brand primary — buttons, links, accents */
  --orange-600: #CF5616;   /* hover */
  --orange-700: #AD4611;   /* active / press */
  --orange-800: #8A370E;

  /* ---------------------------------------------------------
     INK — warm graphite / near-black (sampled from logo type)
     --------------------------------------------------------- */
  --graphite-900: #1A1816; /* darkest — dark sections / footer bg */
  --graphite-800: #211F1D; /* ★ primary ink — headings, logo black */
  --graphite-700: #2E2B28;
  --graphite-600: #423E39;

  /* ---------------------------------------------------------
     NEUTRALS — warm grays (paper-leaning, premium)
     --------------------------------------------------------- */
  --ink:        #211F1D;   /* default text */
  --ink-soft:   #56514B;   /* secondary text */
  --ink-muted:  #847D74;   /* captions, meta, placeholders */
  --line:       #E8E3DC;   /* hairline borders */
  --line-strong:#D7D0C7;   /* stronger dividers / input borders */
  --surface:    #FFFFFF;   /* cards, panels */
  --paper:      #FAF7F2;   /* page background (warm off-white) */
  --paper-2:    #F3EEE7;   /* alternating section background */

  /* ---------------------------------------------------------
     SEMANTIC
     --------------------------------------------------------- */
  --available:    #1F9D55; /* "wolne boksy" availability dot */
  --available-bg: #E8F6EE;
  --warning:      #C98A14;
  --info:         #2C6CC9;

  /* On-color text */
  --on-orange: #FFFFFF;
  --on-dark:   #FAF7F2;

  /* ---------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------- */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Type scale (mobile-first, rem @ 16px root) */
  --text-xs:   0.75rem;   /* 12 — legal, meta */
  --text-sm:   0.875rem;  /* 14 — captions, labels */
  --text-base: 1rem;      /* 16 — body */
  --text-lg:   1.125rem;  /* 18 — lead body */
  --text-xl:   1.375rem;  /* 22 — small headings */
  --text-2xl:  1.75rem;   /* 28 — h3 */
  --text-3xl:  2.25rem;   /* 36 — h2 */
  --text-4xl:  3rem;      /* 48 — h1 (mobile) */
  --text-5xl:  4rem;      /* 64 — hero (desktop) */
  --text-6xl:  5rem;      /* 80 — display */

  --leading-tight: 1.08;
  --leading-snug:  1.22;
  --leading-normal:1.55;
  --leading-relaxed:1.7;

  --tracking-tight:-0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.12em;  /* uppercase eyebrows / SELF STORAGE feel */

  /* ---------------------------------------------------------
     RADII — soft, premium; pill for primary CTA (echoes logo)
     --------------------------------------------------------- */
  --r-sm:  8px;
  --r-md:  12px;   /* inputs, small cards */
  --r-lg:  18px;   /* cards */
  --r-xl:  26px;   /* large feature cards */
  --r-pill:999px;  /* primary CTA, chips */

  /* ---------------------------------------------------------
     SHADOWS — soft, warm-tinted, low opacity
     --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(26,24,22,.06);
  --shadow-sm: 0 2px 8px -2px rgba(26,24,22,.10);
  --shadow-md: 0 10px 28px -10px rgba(26,24,22,.16);
  --shadow-lg: 0 28px 64px -20px rgba(26,24,22,.22);
  --shadow-cta:0 10px 24px -8px rgba(233,102,30,.45);

  /* ---------------------------------------------------------
     SPACING — 4px base
     --------------------------------------------------------- */
  --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;

  --container: 1180px;
  --container-narrow: 760px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .16s;
  --dur: .28s;
  --dur-slow: .5s;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
.bp-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--orange-600);
}
.bp-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.bp-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.bp-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
}
.bp-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}
.bp-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink-soft);
}
.bp-meta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

@media (min-width: 768px) {
  .bp-h1 { font-size: var(--text-5xl); }
  .bp-h2 { font-size: var(--text-4xl); }
}