/* ============================================================
   NOT A HOTEL — Design Tokens
   ============================================================
   Source of truth: notahotel.com extracted tokens
   (see DESIGN-source.md and design-tokens-source.json)
   ============================================================ */

/*
  ⚠️ FONT NOTES
  The brand uses a stack of Japanese-aware web fonts:
    --font-family-heading       YakuHanJP, Hiragino Sans, Meiryo, Helvetica Neue
    --font-family-english       neue-haas-grotesk-text  (Adobe Fonts)
    --font-family-english-highlight  Manuka Condensed   (custom .woff2)
    --font-family-nft           din-2014               (Adobe Fonts)
    --font-family-mincho        Hiragino Mincho ProN
    --font-family-serif         Times New Roman / Georgia
    Brand display:              Selecta Bold, Reckless Neue Regular  (custom .woff2)

  Adobe Fonts (neue-haas-grotesk-text, din-2014) and the brand's licensed
  Selecta / Manuka Condensed / Reckless Neue cannot be redistributed here.
  Substitutions used (flagged for replacement when licenses are available):
    YakuHanJP                 → Noto Sans JP (Google)        — close JP body match
    neue-haas-grotesk-text    → Inter (Google)               — close grotesk match
    Manuka Condensed          → Oswald (Google)              — condensed display
    din-2014                  → DIN Alternate Bold (uploaded) — very close DIN numerals
    Manuka Condensed          → DIN Condensed Bold (uploaded) — condensed display headlines
    Reckless Neue             → Noto Serif Display (Google)  — display serif
    Selecta                   → Inter Bold + tighter tracking
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@300;400;500;600;700&family=Noto+Serif+Display:ital,wght@0,400;0,500;0,600;1,400&family=Oswald:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Brand DIN fonts (uploaded) ── */
@font-face {
  font-family: 'DIN Alternate';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/DIN Alternate Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'DIN Condensed';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/DIN Condensed Bold.ttf') format('truetype');
}

:root {
  /* ============== COLOR ==============
     Extracted from notahotel.com — light theme, restrained palette.
  */

  /* Brand surfaces */
  --color-bg:            #FFFFFF;   /* primary canvas */
  --color-bg-secondary:  #0B0B0D;   /* dark sections, contrast surfaces */
  --color-bg-subtle:     #F5F5F5;   /* alternating section / muted card bg */

  /* Text */
  --color-text:          #000000;   /* primary text on white */
  --color-text-secondary:#666666;   /* muted, captions */
  --color-text-inverse:  #FFFFFF;   /* on dark surfaces */

  /* Borders */
  --color-border:        #0B0B0D;   /* primary stroke (logo, hairlines on white) */
  --color-border-subtle: #E5E5E5;   /* divider lines on white */

  /* Accent — the single dominant brand blue */
  --color-primary:       #0171E3;   /* CTA bg, link text */
  --color-primary-hover: #0160C5;
  --color-primary-bg:    rgba(1, 113, 227, 0.08);

  /* Aliases used throughout the system */
  --fg-1: var(--color-text);
  --fg-2: var(--color-text-secondary);
  --fg-inverse: var(--color-text-inverse);
  --bg-1: var(--color-bg);
  --bg-2: var(--color-bg-subtle);
  --bg-inverse: var(--color-bg-secondary);
  --hairline: var(--color-border-subtle);

  /* ============== TYPOGRAPHY ==============
     Real --font-family-* variables from the site, with substitutes after.
  */
  --font-family-heading:
    'YakuHanJP', 'Noto Sans JP',
    'Hiragino Sans', Meiryo, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --font-family-text:
    var(--font-family-heading);

  --font-family-english:
    'neue-haas-grotesk-text', 'Inter',
    'SF Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --font-family-english-highlight:
    'Manuka Condensed', 'DIN Condensed', 'Oswald',
    'SF Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --font-family-nft:
    'din-2014', 'DIN Alternate', 'JetBrains Mono', ui-monospace, monospace;

  --font-family-mincho:
    'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP',
    'Times New Roman', Georgia, Times, serif;

  --font-family-serif:
    'Reckless Neue', 'Noto Serif Display',
    'Times New Roman', Georgia, Times, serif;

  /* Type scale (px) — extracted from site */
  --text-display: 100px;   /* full-bleed display */
  --text-h1:       90px;
  --text-h2:       60px;
  --text-h3:       50px;
  --text-h4:       20px;
  --text-body-l:   18px;
  --text-body:     16px;
  --text-sm:       15px;
  --text-xs:       14px;
  --text-caption:  13px;
  --text-tiny:     12px;

  /* Line heights — JP-aware */
  --lh-display:   1.05;
  --lh-heading:   1.4;
  --lh-body-jp:   1.85;   /* 1.7-2.0 sweet spot for JP body */
  --lh-body-en:   1.6;
  --lh-tight:     1.2;

  /* Letter spacing */
  --track-jp:     0.04em;   /* JP body — small breathing room */
  --track-jp-wide:0.08em;
  --track-h3:     0.04em;   /* matches H3 0.8px @ 20px ≈ 0.04em */
  --track-tight: -0.01em;
  --track-en-caps:0.06em;
  --track-display-en: -0.02em;

  /* Weights */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ============== SPACING ============== */
  /* 16px base — the brand's grid */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   6px;
  --space-3:   8px;
  --space-4:   16px;   /* base unit */
  --space-5:   24px;   /* gutter */
  --space-6:   25px;
  --space-7:   30px;
  --space-8:   32px;
  --space-9:   40px;
  --space-10:  48px;
  --space-11:  50px;
  --space-12:  60px;   /* section */
  --space-14:  80px;
  --space-16:  100px;
  --space-20:  120px;
  --space-24:  160px;

  /* ============== LAYOUT ============== */
  --gutter:           24px;
  --width-column-12:  1392px;
  --width-column-10:  1156px;
  --width-column-8:   920px;
  --width-column-6:   684px;
  --width-column-4:   448px;
  --width-column-3:   330px;
  --width-column-2:   212px;
  --width-column-1:   94px;

  --container:        var(--width-column-12);
  --header-h:         72px;
  --tabbar-h:         64px;

  /* ============== RADII ============== */
  --radius-0:     0;
  --radius-subtle:2px;
  --radius-sm:    8px;     /* button, card */
  --radius-md:    10px;
  --radius-lg:    12px;
  --radius-xl:    50px;    /* large card / pill */
  --radius-pill:  999px;   /* CTA pill */

  /* ============== SHADOWS ============== */
  /* Site has essentially one shadow level. */
  --shadow-0: none;
  --shadow-1: rgba(0, 0, 0, 0.25) 0px 0px 12px 0px;   /* dropdowns / popovers */
  --shadow-focus: 0 0 0 2px var(--color-primary), 0 0 0 6px rgba(1,113,227,0.16);

  /* ============== MOTION ============== */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 600ms;
  --dur-cine: 900ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============================================================
   GLOBAL ELEMENT STYLES
   Drop this file into a page and h1/h2/p/etc. look correct.
   ============================================================ */

* { box-sizing: border-box; }

html {
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-family-text);
  font-size: var(--text-body);
  line-height: var(--lh-body-jp);
  letter-spacing: var(--track-jp);
  color: var(--fg-1);
  word-break: normal;
  overflow-wrap: anywhere;
}

/* JP / EN explicit classes */
.jp        { font-family: var(--font-family-text); }
.en        { font-family: var(--font-family-english); }
.en-display{ font-family: var(--font-family-english-highlight); text-transform: uppercase; letter-spacing: var(--track-en-caps); }
.mincho    { font-family: var(--font-family-mincho); }
.nft, .num { font-family: var(--font-family-nft); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* Wordmark — used for "NOT A HOTEL" */
.wordmark {
  font-family: var(--font-family-english-highlight);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-en-caps);
  color: var(--fg-1);
  display: inline-block;
}

/* Display / hero (typically EN, large) */
.display {
  font-family: var(--font-family-english-highlight);
  font-weight: var(--w-bold);
  font-size: clamp(56px, 9vw, var(--text-display));
  line-height: var(--lh-display);
  letter-spacing: var(--track-display-en);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

h1 {
  font-family: var(--font-family-heading);
  font-weight: var(--w-bold);
  font-size: clamp(48px, 7vw, var(--text-h1));
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
}

h2 {
  font-family: var(--font-family-heading);
  font-weight: var(--w-bold);
  font-size: clamp(36px, 5vw, var(--text-h2));
  line-height: var(--lh-heading);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}

h3 {
  font-family: var(--font-family-heading);
  font-weight: var(--w-semibold);
  font-size: var(--text-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-h3);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}

h4 {
  font-family: var(--font-family-heading);
  font-weight: var(--w-bold);
  font-size: var(--text-h4);
  line-height: var(--lh-heading);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

/* Eyebrow / kicker — wide-tracked uppercase, EN */
.eyebrow {
  font-family: var(--font-family-english);
  font-weight: var(--w-medium);
  font-size: var(--text-caption);
  letter-spacing: var(--track-en-caps);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

p {
  margin: 0 0 var(--space-4);
  color: var(--fg-1);
  font-size: var(--text-body);
  line-height: var(--lh-body-jp);
  letter-spacing: var(--track-jp);
}
p.lead { font-size: var(--text-body-l); }
p.muted { color: var(--fg-2); }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard);
}
a:hover { color: var(--color-primary-hover); }
a.subtle { color: var(--fg-1); }
a.subtle:hover { opacity: 0.6; color: var(--fg-1); }
a.inline { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

small, .caption {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  letter-spacing: var(--track-jp);
}

code, .mono {
  font-family: var(--font-family-nft);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}

hr, .hairline {
  border: 0;
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-10) 0;
}

/* Container */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Focus */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-subtle);
}

/* Selection */
::selection { background: var(--color-primary); color: var(--white); }

/* ============================================================
   BUTTONS — extracted from site, named by variant
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-family-heading);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
  text-decoration: none;
}
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.3; cursor: not-allowed; }

/* Primary — pill CTA */
.btn-pill {
  background: var(--color-primary);
  color: #FFFFFF;
  border-radius: var(--radius-pill);
  padding: 18px 24px;
  font-size: var(--text-tiny);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-jp-wide);
}
.btn-pill:hover { background: var(--color-primary-hover); }

/* Filled — white pill on dark, or used as 'card click' */
.btn-filled {
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-xl);
  padding: 14px 24px;
  font-size: var(--text-body);
  font-weight: var(--w-regular);
}
.btn-filled:hover { opacity: 0.85; }

/* Filled-dark */
.btn-filled-dark {
  background: var(--color-bg-secondary);
  color: var(--color-bg);
  border-radius: var(--radius-pill);
  padding: 14px 24px;
  font-size: var(--text-body);
  font-weight: var(--w-medium);
}

/* Ghost — black text, transparent */
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-radius: var(--radius-xl);
  padding: 12px 0;
  font-size: var(--text-body);
  font-weight: var(--w-regular);
}
.btn-ghost:hover { opacity: 0.6; }

/* Ghost — accent text */
.btn-ghost-accent {
  background: transparent;
  color: var(--color-primary);
  padding: 8px 0;
  font-size: var(--text-body-l);
  font-weight: var(--w-medium);
}
.btn-ghost-accent:hover { color: var(--color-primary-hover); }

/* ============================================================
   CARDS — base
   ============================================================ */
.card {
  background: var(--color-bg);
  border-radius: var(--radius-sm);   /* 8px button-radius default */
  overflow: hidden;
}
.card-soft {
  background: var(--color-bg);
  border-radius: var(--radius-xl);   /* 50px card-radius for soft cards */
  overflow: hidden;
}