/* ============================================
   KIVI public site — design tokens ("Fresh Cut")
   Owner of colour, type, spacing, radius, motion and layering decisions for
   every public page that loads css/site/*. The light "paper" palette is the
   default; data-theme="dark" switches to the night palette (legacy saved
   themes render light). Section tones (.tone-ink, .tone-forest, .tone-flesh, .tone-paper, .tone-plate)
   re-scope the same tokens so components adapt inside coloured slices.
   ============================================ */

:root {
  color-scheme: light;

  /* Typography */
  --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --font-accent: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --fs-hero: clamp(2.6rem, 6.1vw, 7rem);
  --fs-display: clamp(2.1rem, 5vw, 4.8rem);
  --fs-h2: clamp(2rem, 4.4vw, 4.2rem);
  --fs-h3: clamp(1.25rem, 1.9vw, 1.7rem);
  --fs-lead: clamp(1.05rem, 1.35vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Fruit colours (theme-independent) */
  --kiwi-flesh: #8fcf3c;
  --kiwi-flesh-deep: #2f5a12;
  --kiwi-core: #f8f4d6;
  --kiwi-skin: #7a5532;
  --kiwi-seed: #150e08;
  --kiwi-ink: #11160c;
  --kiwi-paper: #f3eee1;

  /* Palette — paper (default) */
  --color-bg: #f3eee1;
  --color-bg-elevated: #ebe4d2;
  --color-surface: #fffbf1;
  --color-surface-2: #f6f0e1;
  --color-surface-glass: rgba(255, 251, 241, 0.8);
  --color-line: rgba(30, 34, 14, 0.12);
  --color-line-strong: rgba(30, 34, 14, 0.24);
  --color-text: #11160c;
  --color-text-muted: #4d5540;
  --color-text-faint: #646d55;
  --color-accent: #8fcf3c;
  --color-accent-strong: #a6e05a;
  --color-accent-text: #3b6a0c;
  --color-accent-ink: #11160c;
  --color-accent-soft: rgba(120, 180, 40, 0.14);
  --color-flesh: #7fbf2a;
  --color-skin: #7a5532;
  --color-cream: #f8f4d6;
  --color-seed: #150e08;
  --color-danger: #b8321f;
  --color-success: #3f7a0c;
  --color-focus: #2f6400;
  --kiwi-glow: rgba(0, 0, 0, 0);
  --kiwi-shadow: rgba(70, 50, 20, 0);
  --grain-opacity: 0.05;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-section: clamp(5rem, 11vw, 10rem);

  /* Radius */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 30px 60px -36px rgba(50, 40, 15, 0.35);
  --shadow-pop: 0 24px 70px -28px rgba(50, 40, 15, 0.45);
  --shadow-accent: 0 18px 50px -18px rgba(95, 154, 23, 0.55);

  /* Motion */
  --t-fast: 160ms;
  --t-base: 320ms;
  --t-slow: 700ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layering */
  --z-base: 1;
  --z-raised: 10;
  --z-header: 50;
  --z-menu: 80;
  --z-grain: 90;
  --z-cursor: 100;

  /* Layout */
  --container-max: 1320px;
  --container-wide: 1520px;
  --container-gutter: clamp(16px, 4vw, 48px);
  --header-height: 76px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0c120b;
  --color-bg-elevated: #121a10;
  --color-surface: #151e12;
  --color-surface-2: #1b2617;
  --color-surface-glass: rgba(21, 30, 18, 0.78);
  --color-line: rgba(214, 255, 150, 0.1);
  --color-line-strong: rgba(214, 255, 150, 0.22);
  --color-text: #f1f3e6;
  --color-text-muted: #a8b29b;
  --color-text-faint: #7d8872;
  --color-accent: #a6e05a;
  --color-accent-strong: #bdef78;
  --color-accent-text: #b4e86c;
  --color-accent-ink: #0d1208;
  --color-accent-soft: rgba(166, 224, 90, 0.13);
  --color-danger: #ff7a66;
  --color-success: #9be15d;
  --color-focus: #c8f58a;
  --kiwi-glow: rgba(0, 0, 0, 0);
  --kiwi-shadow: rgba(0, 0, 0, 0);
  --hero-underline: rgba(248, 244, 214, 0.32);
  --grain-opacity: 0.06;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 24px 80px -24px rgba(0, 0, 0, 0.75);
  --shadow-accent: 0 18px 50px -18px rgba(166, 224, 90, 0.45);
}

/* ---- Section tones: coloured "slices" that re-scope the palette ---- */

.tone-ink {
  color-scheme: dark;
  --color-bg: #11160c;
  --color-bg-elevated: #182012;
  --color-surface: #1a2314;
  --color-surface-2: #212c1a;
  --color-surface-glass: rgba(26, 35, 20, 0.8);
  --color-line: rgba(230, 255, 180, 0.11);
  --color-line-strong: rgba(230, 255, 180, 0.24);
  --color-text: #f3eee1;
  --color-text-muted: #b3b9a3;
  --color-text-faint: #8a937c;
  --color-accent: #a6e05a;
  --color-accent-text: #b4e86c;
  --color-accent-soft: rgba(166, 224, 90, 0.13);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .tone-ink {
  --color-bg: #070b06;
  --color-surface: #11180e;
  --color-surface-2: #172013;
}

.tone-forest {
  color-scheme: dark;
  --color-bg: #1d3510;
  --color-bg-elevated: #24411a;
  --color-surface: #24411a;
  --color-surface-2: #2c4d1f;
  --color-surface-glass: rgba(36, 65, 26, 0.8);
  --color-line: rgba(230, 255, 180, 0.14);
  --color-line-strong: rgba(230, 255, 180, 0.28);
  --color-text: #f3eee1;
  --color-text-muted: #c2cbb0;
  --color-text-faint: #9fac8c;
  --color-accent: #a6e05a;
  --color-accent-text: #bdef78;
  --color-accent-soft: rgba(166, 224, 90, 0.14);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}

.tone-flesh {
  color-scheme: light;
  --color-bg: #8fcf3c;
  --color-bg-elevated: #84c434;
  --color-surface: #f8f4d6;
  --color-surface-2: #a3da55;
  --color-surface-glass: rgba(248, 244, 214, 0.75);
  --color-line: rgba(17, 22, 12, 0.16);
  --color-line-strong: rgba(17, 22, 12, 0.32);
  --color-text: #11160c;
  --color-text-muted: #24330f;
  --color-text-faint: #2c3d13;
  --color-accent: #11160c;
  --color-accent-strong: #26301a;
  --color-accent-text: #11160c;
  --color-accent-ink: #f3eee1;
  --color-accent-soft: rgba(17, 22, 12, 0.08);
  --color-focus: #11160c;
  --shadow-card: 0 30px 60px -36px rgba(30, 60, 0, 0.5);
}

/* A paper plate (mounted specimen) inside any section, in either theme. */
.tone-plate {
  color-scheme: light;
  --color-bg: #f6f1e4;
  --color-surface: #fffbf1;
  --color-surface-2: #efe8d6;
  --color-line: rgba(30, 34, 14, 0.14);
  --color-line-strong: rgba(30, 34, 14, 0.28);
  --color-text: #11160c;
  --color-text-muted: #4d5540;
  --color-text-faint: #5d664e;
  --color-accent: #8fcf3c;
  --color-accent-text: #3b6a0c;
  --color-accent-soft: rgba(120, 180, 40, 0.14);
  --color-focus: #2f6400;
}

.tone-ink,
.tone-forest,
.tone-flesh,
.tone-plate,
.tone-paper {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* A slice is a full-bleed coloured section with a straight edge. */
.slice {
  position: relative;
  z-index: var(--z-base);
}