/*
  Good Hood River design tokens.
  Colors, type and spacing come from the GHR design system (Good Hood River.html).
  Every color is a token; components never use literal colors.
  Themes: light on :root, dark via prefers-color-scheme (unless data-theme="light"),
  and an explicit data-theme="dark" override.
*/

:root {
  color-scheme: light;

  /* Brand: the badge colors. Identical in both themes. */
  --brand-teal: #1dbdbb;
  --brand-amber: #eaa133;
  --brand-rust: #cf5533;
  --brand-ink: #2f272a;
  --brand-cream: #fff3e1;
  --brand-teal-hover: #1aa6a5; /* teal darkened 12%, primary button hover */

  /* Surfaces and text */
  --surface-000: #ffffff; /* cards */
  --surface-100: #fff3e1; /* page */
  --surface-200: #f6e7cf; /* alternate sections */
  --ink: #2f272a; /* body text on any surface */
  --ink-muted: #6b5d58; /* secondary text on any surface */
  --line: #e6d4b9; /* hairlines, card borders */
  --line-strong: #8a7d75; /* control borders, list dots */
  --line-accent: #a9d8d4; /* card border on hover */

  /* Text accents (contrast-safe on surface-000/100/200) */
  --text-teal: #0e7674;
  --text-amber: #8a5408;
  --text-rust: #a63d1f;

  /* Actions */
  --on-brand: #2f272a; /* text on teal or amber fills */
  --action-strong: #a63d1f;
  --on-strong: #fff3e1;
  --focus: #a63d1f; /* focus ring */
  --band: #2f272a; /* the dark band in the horizon */

  /* On-ink: panels that are always dark (hero, contact, footer) */
  --oi-ground: #2f272a;
  --oi-ground-deep: #241e20;
  --oi-panel: #3b3235;
  --oi-text: #fff3e1;
  --oi-muted: #d9cbbd;
  --oi-subtle: #b9aba0;
  --oi-line: #4a3f42;
  --oi-line-strong: #8f8279;
  --glow-teal: rgb(29 189 187 / 0.18); /* hero and contact glow */
  --glow-amber: rgb(234 161 51 / 0.14);
  --grid-on-ink: rgb(255 243 225 / 0.045); /* dark hero grid lines */
  --grid-on-light: rgb(47 39 42 / 0.045); /* light hero grid lines */

  /* Type */
  --font-display: "Montserrat", "Avenir Next", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; /* facts, figures, code */

  --text-display: clamp(2.375rem, 6vw, 4rem); /* 38px to 64px, line-height 1 */
  --text-h2: clamp(1.75rem, 4vw, 2.75rem); /* 28px to 44px, line-height 1.08 */
  --text-h2-contact: clamp(1.875rem, 4.4vw, 3rem); /* 30px to 48px, line-height 1.05 */
  --text-title-lg: 1.5rem; /* 24px / 30px */
  --text-title: 1.375rem; /* 22px / 28px */
  --text-title-sm: 1.25rem; /* 20px / 26px */
  --text-label: 1.0625rem; /* 17px / 24px, display face */
  --text-lead: 1.125rem; /* 18px / 28px */
  --text-body: 1rem; /* 16px / 24px */
  --text-body-sm: 0.9375rem; /* 15px / 22px */
  --text-small: 0.875rem; /* 14px / 20px */
  --text-caption: 0.8125rem; /* 13px / 18px */
  --text-micro: 0.75rem; /* 12px / 16px */

  /* Spacing: 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --radius-control: 10px; /* buttons and inputs */

  /* Layout */
  --wrap: 1120px;
  --gutter: 16px;
  --control-height: 44px;
  --header-height: 64px;

  /* Elevation: borders do most of the work; shadows are soft and rare */
  --shadow-card: 0 1px 2px rgb(47 39 42 / 0.05), 0 8px 24px -12px rgb(47 39 42 / 0.18);
  --shadow-header: 0 1px 2px rgb(47 39 42 / 0.04), 0 12px 32px -18px rgb(47 39 42 / 0.28);
  --shadow-float: 0 8px 32px -12px rgb(47 39 42 / 0.3);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur-rise: 900ms;

  /* Scene: the Columbia River Gorge under the light hero */
  --scene-sky-top: #ffffff;
  --scene-sky-bottom: #fdf0de;
  --scene-sun: #f2a93b;
  --scene-birds: #5a4d50;
  --scene-far: #d6e7e6;
  --scene-far-2: #bfd9d8;
  --scene-far-peak: #c3dad9;
  --scene-far-snow: #ffffff;
  --scene-peak: #7aa0a7;
  --scene-peak-shade: #5b838c;
  --scene-snow: #ffffff;
  --scene-snow-shade: #d5e3e7;
  --scene-ridge: #5e9f9b;
  --scene-ridge-near: #3b7a77;
  --scene-forest-far: #2e6663;
  --scene-river-far: #a6dfdb;
  --scene-river: #16a6a3;
  --scene-river-light: #ffffff;
  --scene-valley: #f4d394;
  --scene-valley-2: #e8b468;
  --scene-orchard: #7d9a4f;
  --scene-hill: #e3825a;
  --scene-hill-deep: #c4532f;
  --scene-forest: #1f3b3a;
  --scene-sail: #f2a93b;
  --scene-sail-2: #cf5533;
  --scene-board: #2f272a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-000: #241e20;
    --surface-100: #2f272a;
    --surface-200: #3b3235;
    --ink: #fff3e1;
    --ink-muted: #b9aba0;
    --line: #4a3f42;
    --line-strong: #8f8279;
    --line-accent: #2f6663;
    --grid-on-light: rgb(255 243 225 / 0.04);
    --action-strong: #ec8462;
    --on-strong: #2f272a;
    --text-teal: #1dbdbb;
    --text-amber: #eaa133;
    --text-rust: #ec8462;
    --focus: #ec8462;
    --band: #fff3e1;
    --oi-ground: #241e20;
    --oi-ground-deep: #1c1718;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
    --shadow-header: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px -16px rgb(0 0 0 / 0.7);
    --shadow-float: 0 8px 32px -12px rgb(0 0 0 / 0.6);
    --scene-sky-top: #241e20;
    --scene-sky-bottom: #3a2c28;
    --scene-sun: #eaa133;
    --scene-birds: #d9cbbd;
    --scene-far: #3a4544;
    --scene-far-2: #33504e;
    --scene-far-peak: #47605f;
    --scene-far-snow: #cfc8bf;
    --scene-peak: #557a7f;
    --scene-peak-shade: #436469;
    --scene-snow: #efe7dc;
    --scene-snow-shade: #bdb5aa;
    --scene-ridge: #2e6663;
    --scene-ridge-near: #234f4c;
    --scene-forest-far: #1d4644;
    --scene-river-far: #3a5f5c;
    --scene-river: #167f7c;
    --scene-river-light: #ffe2b8;
    --scene-valley: #7a6034;
    --scene-valley-2: #6a522c;
    --scene-orchard: #4f6b3a;
    --scene-hill: #a9532f;
    --scene-hill-deep: #8f3f24;
    --scene-forest: #121c1c;
    --scene-sail: #f2b65a;
    --scene-sail-2: #ec8462;
    --scene-board: #efe7dc;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-000: #241e20;
  --surface-100: #2f272a;
  --surface-200: #3b3235;
  --ink: #fff3e1;
  --ink-muted: #b9aba0;
  --line: #4a3f42;
  --line-strong: #8f8279;
  --line-accent: #2f6663;
  --grid-on-light: rgb(255 243 225 / 0.04);
  --action-strong: #ec8462;
  --on-strong: #2f272a;
  --text-teal: #1dbdbb;
  --text-amber: #eaa133;
  --text-rust: #ec8462;
  --focus: #ec8462;
  --band: #fff3e1;
  --oi-ground: #241e20;
  --oi-ground-deep: #1c1718;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
  --shadow-header: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px -16px rgb(0 0 0 / 0.7);
  --shadow-float: 0 8px 32px -12px rgb(0 0 0 / 0.6);
  --scene-sky-top: #241e20;
  --scene-sky-bottom: #3a2c28;
  --scene-sun: #eaa133;
  --scene-birds: #d9cbbd;
  --scene-far: #3a4544;
  --scene-far-2: #33504e;
  --scene-far-peak: #47605f;
  --scene-far-snow: #cfc8bf;
  --scene-peak: #557a7f;
  --scene-peak-shade: #436469;
  --scene-snow: #efe7dc;
  --scene-snow-shade: #bdb5aa;
  --scene-ridge: #2e6663;
  --scene-ridge-near: #234f4c;
  --scene-forest-far: #1d4644;
  --scene-river-far: #3a5f5c;
  --scene-river: #167f7c;
  --scene-river-light: #ffe2b8;
  --scene-valley: #7a6034;
  --scene-valley-2: #6a522c;
  --scene-orchard: #4f6b3a;
  --scene-hill: #a9532f;
  --scene-hill-deep: #8f3f24;
  --scene-forest: #121c1c;
  --scene-sail: #f2b65a;
  --scene-sail-2: #ec8462;
  --scene-board: #efe7dc;
}