/* ============================================
   RENTU — Shared Page Base
   Loaded after common.css for pages using the
   --color-* / --space-* / --text-* token system
   (index, turnover; opt-in via head-common.html)
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul[role='list'], ol[role='list'] { list-style: none; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.15;
  text-wrap: balance;
}

p, li, figcaption {
  max-width: 72ch;
  text-wrap: pretty;
}

::selection {
  color: var(--color-text);
  background: rgba(255, 125, 85, 0.25);
}

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

button {
  cursor: pointer;
  background: none;
  border: none;
}

table {
  width: 100%;
  border-collapse: collapse;
}

a, button, [role='button'], [role='link'], input, textarea, select {
  transition:
    color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    background 180ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   Design Tokens
   ============================================ */
:root {
  /* Brand Colors */
  --color-brand: #FF7D55;
  --color-brand-hover: #FF6B3D;
  --color-brand-active: #E85A2C;
  --color-graphite: #2C3744;
  --color-graphite-light: #3A4856;
  --color-ice: #F1F6FC;
  --color-card-blue: #43536A;
  --color-teal: #0ABAAA;
  --color-teal-dark: #089E90;

  /* Surfaces */
  --color-bg: #fff;
  --color-surface: #fff;
  --color-border: rgba(44, 55, 68, .11);
  --color-text: #2C3744;
  --color-text-muted: #606060;
  --color-text-faint: #8A96A8;
  --color-divider: #E0E0E0;
  --color-surface-ice: #F1F6FC;
  --color-footer-bg: #E8EDF5;

  /* Typography */
  --font-display: 'Comfortaa', 'Nunito', cursive;
  --font-body: 'Montserrat', 'Helvetica Neue', sans-serif;

  /* Type Scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-2xl: 40px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(44, 55, 68, 0.06);
  --shadow-md: 0 6px 20px rgba(44, 55, 68, 0.08);
  --shadow-lg: 0 14px 40px rgba(44, 55, 68, 0.12);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-default: 1200px;
}

[data-theme="dark"] {
  --color-bg: #1C2228;
  --color-text: #F0EBE5;
  --color-text-muted: #B8B0A8;
  --color-text-faint: #7E7870;
  --color-surface-ice: #232D36;
  --color-divider: rgba(255, 248, 243, 0.10);
  --color-brand: #FF9070;
  --color-brand-hover: #FFA080;
  --color-card-blue: #2A3540;
  --color-graphite: #F0EBE5;
  --color-footer-bg: #232D36;
}

/* ============================================
   Base Typography
   ============================================ */
body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); }
h1, h2 { font-family: var(--font-display); font-weight: 700; color: var(--color-text); }
h3 { font-family: var(--font-body); font-weight: 600; }
.text-brand { color: var(--color-brand); }

/* ============================================
   Page Transitions
   ============================================ */
.page { animation: pageFadeIn 0.4s ease both; }

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Buttons (base + brand)
   Page CSS defines additional variants.
   ============================================ */
.btn {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  transition: all 0.2s var(--ease-out);
}
.btn--brand { color: #fff; background: var(--color-brand); border-color: var(--color-brand); }
.btn--brand:hover { background: var(--color-brand-hover); box-shadow: 0 6px 20px rgba(255, 125, 85, 0.35); transform: translateY(-2px); }

/* ============================================
   Section utilities
   ============================================ */
.section { padding: clamp(var(--space-12), 6vw, var(--space-24)) var(--space-5); }
.section--dark { color: #fff; background: var(--color-graphite); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .text-muted { color: rgba(255, 255, 255, 0.65); }
.section--ice { background: var(--color-surface-ice); }
.section--dark .section-subtitle { color: rgba(255, 255, 255, 0.65); }
.container { max-width: var(--content-default); margin: 0 auto; }

/* ============================================
   Hoverable card utility
   Pair with any card class (e.g. `eco-card card--hover`).
   Per-card rules own the `box-shadow` / `background`
   changes on :hover — this utility owns the lift
   and the smooth paired transition.
   ============================================ */
.card--hover {
  transition:
    transform 0.45s cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.card--hover:hover { transform: translateY(-4px); }
.card--hover.reveal-item { transition: opacity 0.6s var(--ease-out), transform 0.45s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.5s cubic-bezier(0.33, 1, 0.68, 1); }

/* ============================================
   Hero shared text — dark-bg product/landing hero
   ============================================ */
.hero__desc { max-width: 640px; margin: 0 auto var(--space-10); font-size: var(--text-base); line-height: 1.7; color: rgba(255, 255, 255, 0.7); }