/* ===== tokens/fonts.css ===== */
/* Webfonts — sourced from Google Fonts CDN.
   No brand font binaries were provided; these are curated substitutions.
   Latin display : Cormorant Garamond (high-contrast old-style serif)
   JP display    : Noto Serif JP (和文明朝)
   JP body/UI    : Noto Sans JP
   Latin label   : Jost (geometric, letterspaced uppercase labels) */
/* フォントの読み込みは index.html の <link> に移動（@import は表示を遅らせるため） */

/* ===== tokens/colors.css ===== */
/* ============================================================
   COLORS — Luxe Lounge
   Black-based canvas, single flat gold accent, warm off-white ink.
   ============================================================ */
:root {
  /* --- Base ink (near-black canvas) --- */
  --black-900: #060606;   /* deepest — page base */
  --black-800: #0a0a0a;   /* primary surface */
  --black-700: #111110;   /* raised surface / cards */
  --black-600: #171614;   /* elevated / hover */
  --black-500: #211f1c;   /* hairline fills, wells */

  /* --- Gold (flat, matte — the single accent) --- */
  --gold-300: #e2c894;    /* light — small highlights, hover text */
  --gold-400: #d9b978;    /* soft gold */
  --gold-500: #c9a24b;    /* PRIMARY accent */
  --gold-600: #a8843a;    /* deep gold — pressed / borders */
  --gold-700: #806129;    /* darkest — subtle rules */

  /* --- Warm neutrals (ink on dark) --- */
  --ivory-50:  #f6f3ec;   /* primary text on dark */
  --ivory-100: #e8e3d8;   /* strong secondary */
  --stone-300: #b7b1a4;   /* secondary text */
  --stone-400: #8f897c;   /* muted / captions */
  --stone-500: #6b665c;   /* faint / disabled */

  /* --- Hairlines & transparencies --- */
  --line-gold:  rgba(201,162,75,0.32);
  --line-gold-strong: rgba(201,162,75,0.55);
  --line-ivory: rgba(246,243,236,0.12);
  --line-ivory-soft: rgba(246,243,236,0.06);
  --veil-dark:  rgba(6,6,6,0.55);      /* photo protection */
  --veil-dark-strong: rgba(6,6,6,0.78);
  --glass:      rgba(10,10,10,0.55);   /* blurred nav */

  /* --- Semantic (used sparingly) --- */
  --ok:   #7d9b6a;
  --warn: #c9a24b;
  --err:  #b4635a;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  --bg-page:        var(--black-900);
  --bg-surface:     var(--black-800);
  --bg-card:        var(--black-700);
  --bg-elevated:    var(--black-600);
  --bg-well:        var(--black-500);

  --text-primary:   var(--ivory-50);
  --text-secondary: var(--stone-300);
  --text-muted:     var(--stone-400);
  --text-faint:     var(--stone-500);
  --text-accent:    var(--gold-500);
  --text-on-gold:   var(--black-900);

  --accent:         var(--gold-500);
  --accent-hover:   var(--gold-400);
  --accent-press:   var(--gold-600);

  --border-hairline: var(--line-ivory);
  --border-accent:   var(--line-gold);
  --border-accent-strong: var(--line-gold-strong);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   TYPOGRAPHY — Luxe Lounge
   ============================================================ */
:root {
  /* --- Families --- */
  --font-display: "Cormorant Garamond", "Noto Serif JP", serif;     /* Latin display / hero numerals */
  --font-serif-jp: "Noto Serif JP", "Cormorant Garamond", serif;    /* 和文見出し */
  --font-body: "Noto Sans JP", system-ui, sans-serif;               /* 本文・UI */
  --font-label: "Jost", "Noto Sans JP", sans-serif;                 /* 欧文ラベル（レタースペース） */

  /* --- Fluid display sizes (clamp: mobile → desktop) --- */
  --fs-hero:    clamp(3rem, 8vw, 7rem);    /* @kind font */
  --fs-display: clamp(2.25rem, 5vw, 4rem);    /* @kind font */
  --fs-h1:      clamp(1.9rem, 3.4vw, 3rem); /* @kind font */
  --fs-h2:      clamp(1.5rem, 2.4vw, 2.125rem); /* @kind font */
  --fs-h3:      clamp(1.2rem, 1.6vw, 1.5rem); /* @kind font */

  /* --- Text sizes --- */
  --fs-lead:  1.25rem;   /* @kind font */
  --fs-body:  1rem;      /* @kind font */
  --fs-sm:    0.875rem;  /* @kind font */
  --fs-xs:    0.75rem;   /* @kind font */

  /* --- Weights --- */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* --- Line heights --- */
  --lh-tight: 1.08;   /* @kind font */
  --lh-snug:  1.3;    /* @kind font */
  --lh-body:  1.9;    /* @kind font */
  --lh-ui:    1.5; /* @kind font */

  /* --- Letter spacing (欧文ラベルは大胆なトラッキング) --- */
  --ls-label: 0.32em; /* @kind font */
  --ls-wide:  0.16em; /* @kind font */
  --ls-head:  0.04em; /* @kind font */
  --ls-jp:    0.08em; /* @kind font */
  --ls-body:  0.02em; /* @kind font */
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   SPACING & LAYOUT — Luxe Lounge
   Bold, generous whitespace. 4px base, large section rhythm.
   ============================================================ */
:root {
  /* --- Base 4px scale --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 180px;   /* section padding — 余白を大胆に */

  /* --- Section vertical rhythm (fluid) --- */
  --section-y: clamp(80px, 12vw, 180px); /* @kind spacing */
  --section-y-sm: clamp(56px, 8vw, 112px); /* @kind spacing */

  /* --- Content widths --- */
  --maxw-page: 1440px;   /* outer frame */
  --maxw-wide: 1200px;
  --maxw-text: 720px;    /* reading measure */
  --maxw-narrow: 560px;

  /* --- Gutters --- */
  --gutter: clamp(20px, 5vw, 80px); /* @kind spacing */
  --gutter-sm: clamp(16px, 4vw, 32px); /* @kind spacing */
}

/* ===== tokens/effects.css ===== */
/* ============================================================
   EFFECTS — radii, borders, shadows, blur, motion
   Luxury = near-square corners, hairline borders, minimal shadow.
   ============================================================ */
:root {
  /* --- Radii (sharp / minimal) --- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* --- Border widths --- */
  --bw-hair: 1px; /* @kind other */
  --bw-med: 2px; /* @kind other */

  /* --- Shadows (subtle; dark canvas relies on borders + veils) --- */
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.4);
  --shadow-md: 0 12px 40px rgba(0,0,0,0.5);
  --shadow-lg: 0 30px 80px rgba(0,0,0,0.6);
  --glow-gold: 0 0 0 1px var(--line-gold-strong), 0 8px 40px rgba(201,162,75,0.14);

  /* --- Blur --- */
  --blur-nav: 16px;
  --blur-glass: 24px;

  /* --- Motion (中程度: fade + slight parallax) --- */
  --ease-lux: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 0.22s; /* @kind other */
  --dur-base: 0.4s; /* @kind other */
  --dur-slow: 0.8s; /* @kind other */
  --dur-reveal: 1.1s; /* @kind other */
}

/* Footer link columns — keep a tidy left-aligned 2-up grid on narrow screens instead of a centre-wrapped orphan column */
@media(max-width:640px){
.ds-footer-cols{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 18px!important;justify-items:start;max-width:340px;margin-left:auto!important;margin-right:auto!important}
.ds-footer-cols>nav{min-width:0!important}
}