/* =========================================================
   KOMBU OWNERS 2027 — Core tokens
   海で、こんぶを育てよう。
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- COLOR: base ---------- */
  --offwhite:      #F4F1EA;   /* 紙・砂 off-white paper base */
  --offwhite-2:    #EAE5D9;   /* warmer sand */
  --offwhite-3:    #D9D3C4;   /* dune */

  --ink:           #14181C;   /* near-black ink */
  --graphite:      #2A2F35;   /* dark grey */
  --smoke:         #6B7178;   /* mid grey */
  --mist:          #A9AFB4;   /* light grey */

  --deepsea:       #0B2A3B;   /* deep ocean blue — primary dark */
  --sea:           #12405A;   /* mid ocean */
  --tide:          #4A7A93;   /* dusk tide */
  --sky-pale:      #C7D6DE;   /* pale sky wash */

  /* ---------- COLOR: accent ---------- */
  --kombu:         #3E5B3A;   /* seaweed green — primary accent */
  --kombu-deep:    #24371F;   /* dark kombu */
  --moss:          #6B7F52;   /* softer green */
  --sun:           #C58A3B;   /* warm amber — micro accent, use sparingly */

  /* ---------- COLOR: brand system v2 (design unification pass) ----------
     DEEP NAVY / OCEAN BLUE / OFF WHITE / SEAFOAM / KELP GREEN
     Aliases reuse existing values where possible (no regressions);
     OCEAN BLUE + SEAFOAM are new — they fill the missing "vivid marine"
     and "airy aqua" range so the palette isn't all-navy-monochrome. */
  --deep-navy:     var(--deepsea);   /* #0B2A3B */
  --kelp-green:    var(--kombu);     /* #3E5B3A */
  --off-white:     var(--offwhite);  /* #F4F1EA */
  --ocean-blue:    #1B7FA6;   /* vivid mid-ocean blue — new accent, replaces monotone navy-only */
  --ocean-blue-deep: #135A79;
  --seafoam:       #A9DACB;   /* pale aqua-mint — airy accent for badges/tints */
  --seafoam-tint:  #EAF6F1;   /* near-white seafoam wash for section backgrounds */
  --seafoam-deep:  #4E8C77;   /* readable text-on-seafoam variant */

  /* ---------- COLOR: CTA accent (unified conversion color, Prompt5) ----------
     Warm antique brass/gold — deliberately distinct from the navy/ocean-blue/
     seafoam/kelp-green palette above so every CTA reads instantly, without
     resorting to red or discount-orange. Echoes the rope/buoy gold used in
     the kombu growth scene, reinforcing an "OWNERS" membership feel. */
  --cta-gold:      #B8863A;   /* primary CTA fill */
  --cta-gold-deep: #96692A;   /* hover / pressed */
  --cta-gold-tint: #E9CE9B;   /* light gold, for micro-accents on dark surfaces */

  /* ---------- Semantic ---------- */
  --bg:            var(--offwhite);
  --bg-alt:        var(--offwhite-2);
  --bg-dark:       var(--deepsea);
  --fg:            var(--ink);
  --fg-2:          var(--graphite);
  --fg-3:          var(--smoke);
  --fg-inv:        var(--offwhite);
  --rule:          rgba(20, 24, 28, 0.14);
  --rule-strong:   rgba(20, 24, 28, 0.35);
  --rule-inv:      rgba(244, 241, 234, 0.22);
  --accent:        var(--kombu);
  --accent-warm:   var(--sun);

  /* ---------- TYPE families ----------
     Marine-leisure typography system:
     - Headlines / catchcopy (JP):  Zen Kaku Gothic New  (--ff-serif-jp alias kept for
       backward-compat with existing selectors; no serif/mincho used anywhere)
     - Body copy (JP):              Noto Sans JP
     - English headings / numerals / prices / dates: Montserrat
  ---------------------------------------------------------------------- */
  --ff-serif-jp:   'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', system-ui, sans-serif;
  --ff-sans-jp:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', system-ui, sans-serif;
  --ff-en:         'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ff-mono:       ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale (editorial: big JP + tiny EN labels) ---------- */
  --fs-hero:       clamp(64px, 9vw, 168px);   /* 海 で、こ ん ぶ */
  --fs-display:    clamp(48px, 6vw, 96px);
  --fs-h1:         clamp(36px, 4vw, 64px);
  --fs-h2:         28px;
  --fs-h3:         20px;
  --fs-body:       16px;
  --fs-body-lg:    18px;
  --fs-small:      13px;
  --fs-label:      11px;   /* small EN uppercase labels */
  --fs-caption:    12px;

  /* ---------- Line & tracking ---------- */
  --lh-tight:      1.05;
  --lh-jp:         1.55;
  --lh-body:       1.7;
  --tk-label:      0.22em;   /* generous letterspacing for EN labels */
  --tk-tight:      -0.01em;

  /* ---------- Spacing (4pt baseline) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* ---------- Radii — deliberately restrained ---------- */
  --r-0:  0px;
  --r-1:  2px;
  --r-2:  4px;
  --r-pill: 999px;

  /* ---------- Shadow (soft, editorial — no hard drop shadows) ---------- */
  --shadow-1: 0 1px 2px rgba(20,24,28,0.05), 0 2px 8px rgba(20,24,28,0.04);
  --shadow-2: 0 8px 24px rgba(20,24,28,0.08), 0 2px 4px rgba(20,24,28,0.04);
  --shadow-inset-photo: inset 0 0 0 1px rgba(255,255,255,0.06);

  /* ---------- Grid ---------- */
  --grid-max: 1440px;
  --gutter:   24px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 520ms;
}

/* =========================================================
   Semantic role classes
   ========================================================= */

.h-hero {
  font-family: var(--ff-serif-jp);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tk-tight);
  color: var(--fg);
}

.h-display {
  font-family: var(--ff-serif-jp);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: var(--tk-tight);
}

.h-1 {
  font-family: var(--ff-serif-jp);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.15;
}

.h-2 {
  font-family: var(--ff-serif-jp);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.3;
}

.h-3 {
  font-family: var(--ff-sans-jp);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.4;
}

.body {
  font-family: var(--ff-sans-jp);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.body-lg {
  font-family: var(--ff-sans-jp);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-jp);
  color: var(--fg-2);
}

/* Small english labels — the signature editorial detail */
.label-en {
  font-family: var(--ff-en);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--tk-label);
  text-transform: uppercase;
  color: var(--fg-3);
}

.label-en--strong { color: var(--fg); }
.label-en--kombu  { color: var(--kombu); }
.label-en--inv    { color: var(--offwhite); }

.caption {
  font-family: var(--ff-sans-jp);
  font-size: var(--fs-caption);
  color: var(--fg-3);
  line-height: 1.5;
}

.mono {
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--fg-3);
}

/* =========================================================
   Base
   ========================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-sans-jp);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--kombu); color: var(--offwhite); }