/* ============================================================
   CAPITOLA PELICAN HOUSE — DESIGN SYSTEM
   01. TOKENS
   Coastal luxury, edged. Source palette: Pelican logo@2x.png
   ============================================================ */

:root {
  /* ---------- 1. BRAND CORE ---------- */
  --cph-ocean:    #54747D;
  --cph-sage:     #94A5A0;
  --cph-sand:     #E1C6A8;
  --cph-sun:      #C6905B;
  --cph-shell:    #F2EDE7;
  --cph-deep-sea: #2F4854;

  /* ---------- 2. EXTENDED RAMPS ---------- */
  /* Deep Sea — anchor, dark sections, headlines */
  --deep-900: #14232B;
  --deep-800: #1E333D;
  --deep-700: #2F4854;   /* base */
  --deep-600: #3C5A68;
  --deep-500: #4A6E7D;

  /* Ocean — primary interactive */
  --ocean-700: #3E5960;
  --ocean-600: #48666E;
  --ocean-500: #54747D;  /* base */
  --ocean-400: #6E8B93;
  --ocean-300: #93A9AF;
  --ocean-200: #C2CFD3;
  --ocean-100: #E4EAEC;

  /* Sage — quiet support, dividers on dark */
  --sage-700: #5F6F69;
  --sage-600: #7A8C86;
  --sage-500: #94A5A0;   /* base */
  --sage-300: #B7C3BF;
  --sage-100: #E5EAE8;

  /* Sand — warm ground, cards, image mats */
  --sand-700: #A78862;
  --sand-600: #C3A480;
  --sand-500: #E1C6A8;   /* base */
  --sand-300: #EEDECA;
  --sand-100: #F8F0E6;

  /* Sun — accent, rules, CTAs, the single gold note */
  --sun-800: #7E552C;
  --sun-700: #9A6C3E;
  --sun-600: #B07D4B;
  --sun-500: #C6905B;    /* base */
  --sun-400: #D5AB80;
  --sun-200: #ECD8BF;

  /* Shell — paper */
  --shell-50:  #FCFAF8;
  --shell-100: #F2EDE7;  /* base */
  --shell-200: #E9E2D9;
  --shell-300: #DBD2C6;

  /* ---------- 3. SEMANTIC SURFACES ---------- */
  --surface-paper:      var(--shell-50);
  --surface-default:    var(--shell-100);
  --surface-raised:     #FFFFFF;
  --surface-warm:       var(--sand-100);
  --surface-inverse:    var(--deep-700);
  --surface-inverse-deep: var(--deep-900);
  --surface-veil:       rgba(47, 72, 84, 0.62);   /* over imagery */
  --surface-veil-soft:  rgba(47, 72, 84, 0.28);

  /* ---------- 4. SEMANTIC INK ---------- */
  --ink-strong:   var(--deep-700);
  --ink-body:     #3F5560;
  --ink-muted:    var(--ocean-400);
  --ink-faint:    var(--ocean-300);
  --ink-accent:   var(--sun-700);
  --ink-on-dark:          var(--shell-100);
  --ink-on-dark-muted:    rgba(242, 237, 231, 0.70);
  --ink-on-dark-faint:    rgba(242, 237, 231, 0.45);

  /* ---------- 5. LINES ---------- */
  --line-hairline:   rgba(47, 72, 84, 0.12);
  --line-soft:       rgba(47, 72, 84, 0.20);
  --line-strong:     rgba(47, 72, 84, 0.42);
  --line-gold:       var(--sun-500);
  --line-on-dark:    rgba(242, 237, 231, 0.22);
  --rule-weight:     1px;

  /* ---------- 6. STATE ---------- */
  --state-focus:   var(--sun-500);
  --state-success: #5C7F6B;
  --state-warning: var(--sun-700);
  --state-danger:  #9C5A4E;
  --state-info:    var(--ocean-500);

  /* ---------- 7. TYPEFACES ---------- */
  --font-display: "Cormorant Garamond", "Cormorant", "Didot", "Times New Roman", serif;
  --font-sans:    "Jost", "Futura", "Avenir Next", -apple-system, "Segoe UI", sans-serif;
  --font-script:  "Parisienne", "Snell Roundhand", "Brush Script MT", cursive;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* ---------- 8. TYPE SCALE (fluid, 1.25 major third) ---------- */
  --step--2: clamp(0.688rem, 0.66rem + 0.14vw, 0.75rem);
  --step--1: clamp(0.813rem, 0.78rem + 0.16vw, 0.875rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.375rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.6vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.55rem + 1vw, 2.25rem);
  --step-4:  clamp(2.1rem, 1.78rem + 1.6vw, 3rem);
  --step-5:  clamp(2.6rem, 2.05rem + 2.75vw, 4.25rem);
  --step-6:  clamp(3.2rem, 2.3rem + 4.5vw, 6rem);
  --step-7:  clamp(3.8rem, 2.3rem + 7.5vw, 8.5rem);

  /* ---------- 9. WEIGHT / TRACKING / LEADING ---------- */
  --w-light: 300;
  --w-book:  400;
  --w-medium: 500;
  --w-semi:  600;

  --track-display: 0.06em;   /* CAPITOLA lockup feel */
  --track-wide:    0.18em;   /* eyebrows, nav, buttons */
  --track-wider:   0.30em;   /* BEACH DAYS  GOOD COMPANY */
  --track-body:    0.005em;

  --leading-tight:  1.04;
  --leading-snug:   1.18;
  --leading-normal: 1.5;
  --leading-relaxed:1.72;

  /* ---------- 10. SPACE (8pt base) ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  --section-y: clamp(4rem, 9vw, 9rem);
  --gutter:    clamp(1.25rem, 4vw, 3.5rem);

  /* ---------- 11. LAYOUT ---------- */
  --measure:        68ch;
  --measure-narrow: 44ch;
  --width-wide:  1440px;
  --width-page:  1200px;
  --width-text:  760px;
  --grid-cols: 12;
  --grid-gap: clamp(1rem, 2.2vw, 2rem);

  /* ---------- 12. RADIUS ---------- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-arch: 50% 50% 0 0 / 34% 34% 0 0;  /* arched imagery */

  /* ---------- 13. ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 35, 43, 0.06);
  --shadow-sm: 0 2px 10px rgba(20, 35, 43, 0.07);
  --shadow-md: 0 12px 32px -12px rgba(20, 35, 43, 0.20);
  --shadow-lg: 0 28px 60px -24px rgba(20, 35, 43, 0.32);
  --shadow-ring: 0 0 0 1px var(--line-hairline);

  /* ---------- 14. MOTION ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-tide: cubic-bezier(0.16, 0.84, 0.28, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 560ms;
  --dur-drift: 1200ms;

  /* ---------- 15. IMAGERY ---------- */
  --img-ratio-hero:  16 / 9;
  --img-ratio-card:  4 / 3;
  --img-ratio-tall:  3 / 4;
  --img-ratio-story: 1 / 1;
  --img-duotone: color-mix(in srgb, var(--deep-700) 22%, transparent);

  /* ---------- 16. Z-INDEX ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Dark-section scope: drop this class on any section to invert ink */
.on-dark {
  --ink-strong: var(--ink-on-dark);
  --ink-body: var(--ink-on-dark-muted);
  --ink-muted: var(--ink-on-dark-muted);
  --ink-faint: var(--ink-on-dark-faint);
  --line-hairline: var(--line-on-dark);
  --line-soft: rgba(242, 237, 231, 0.30);
  color: var(--ink-on-dark);
  background-color: var(--surface-inverse);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-drift: 0ms; }
}