/* =========================================================================
   Innovation Rental Solutions — Design Tokens
   Source of truth: "Innovation Rental Solutions — Visual Brand Book &
   Website Foundation" (official brand kit PDF).

   Load alongside:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   ========================================================================= */

:root {
  /* ---------- Official brand palette ---------- */
  --navy:            #0B2341;   /* Primary Navy — headings, dark surfaces */
  --navy-deep:       #071A33;   /* depth: footer, hover on navy */
  --navy-bright:     #1D4271;   /* lighter navy — accents on dark */
  --navy-wash:       #EEF2F7;   /* faint navy tint — soft surfaces */

  --gold:            #C49A56;   /* Brand Gold — buttons & accents */
  --gold-dark:       #A87E3E;   /* gold hover / press */
  --gold-bright:     #DDB97E;   /* gold on navy surfaces */
  --gold-soft:       #F7F0E3;   /* soft gold wash */

  --off-white:       #F7F7F5;   /* Off White — page background */
  --paper:           #FFFFFF;   /* cards & surfaces */
  --charcoal:        #222222;   /* Charcoal — primary body text */
  --slate:           #7A8793;   /* Slate Gray — secondary text, captions */
  --slate-2:         #5C6873;   /* slate darkened for small text contrast */

  /* ---------- Borders ---------- */
  --border:          #E3E5E8;
  --border-soft:     #EDEEF0;
  --border-navy:     rgba(11, 35, 65, 0.14);

  /* ---------- Semantic ---------- */
  --success:         #1F7A4D;
  --success-soft:    #E7F3EC;
  --danger:          #C0392B;

  /* ---------- Radii ---------- */
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       16px;
  --radius-xl:       22px;
  --radius-pill:     9999px;

  /* ---------- Spacing (8pt grid) ---------- */
  --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;

  /* ---------- Shadows ---------- */
  --shadow-card:   0 1px 2px rgba(11,35,65,0.06), 0 10px 30px -18px rgba(11,35,65,0.18);
  --shadow-lift:   0 2px 4px rgba(11,35,65,0.08), 0 22px 48px -22px rgba(11,35,65,0.30);
  --shadow-gold:   0 12px 28px -12px rgba(196,154,86,0.55);
  --shadow-navy:   0 14px 32px -14px rgba(11,35,65,0.45);

  /* ---------- Motion ---------- */
  --ease-out:      cubic-bezier(0.22, 0.8, 0.26, 0.99);
  --dur-hover:     160ms;
  --dur-state:     260ms;
  --dur-entry:     650ms;

  /* ---------- Type families (per brand kit) ---------- */
  --font-heading:  "Montserrat", "Poppins", -apple-system, "Segoe UI", sans-serif;
  --font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---------- Type scale ---------- */
  --t-hero:    clamp(38px, 5.4vw, 64px);
  --t-display: clamp(30px, 3.8vw, 46px);
  --t-h3:      clamp(20px, 2vw, 24px);
  --t-h4:      18px;
  --t-lead:    clamp(17px, 1.5vw, 19.5px);
  --t-body:    16px;
  --t-small:   14px;
  --t-caption: 13px;
  --t-eyebrow: 12.5px;
}

/* =========================================================================
   Base element styles
   ========================================================================= */

html, body {
  background: var(--off-white);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-display); }
h3 { font-size: var(--t-h3); letter-spacing: -0.01em; }
h4 { font-size: var(--t-h4); letter-spacing: 0; }

p { margin: 0 0 1em; max-width: 64ch; }

small, .caption { font-size: var(--t-caption); color: var(--slate); }

a { color: var(--navy); text-decoration: none; transition: color var(--dur-hover) var(--ease-out); }
a:hover { color: var(--gold-dark); }

::selection { background: var(--navy); color: #fff; }

.num, .price, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}