/* =========================================================
   小王子 Design System · colors_and_type.css
   "溫暖有質感" — warm, textured, storybook
   ========================================================= */

/* -------- Webfonts --------
   Brand is Japanese-primary, serif (明朝体), with light English support.

   日本語 display+body:  Shippori Mincho — modern 明朝 with warm terminals;
                        nostalgic, literary, full kanji coverage.
   English display+body: Fraunces — humanist serif that pairs with Shippori
                        (shared contrast, warm terminals).
   Brush / hand accent:  Klee One — brush-ish 楷書 hand for signatures, notes.
   UI micro labels:      Plus Jakarta Sans — used sparingly on small labels.
-------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Klee+One:wght@400;600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ============================================================
     COLOR — pulled from the cinematic key art
     ============================================================ */

  /* --- Warm paper (backgrounds) ---
     Cream tones inspired by aged book pages + sun-washed interior */
  --paper-00: #FBF5EC;   /* lightest — page */
  --paper-10: #F6EDDD;   /* default warm bg */
  --paper-20: #EFE1CA;   /* card hover / subtle wash */
  --paper-30: #E5D2B3;   /* divider fills */
  --paper-40: #C9B08B;   /* sandy midtone */

  /* --- Ink (foregrounds) ---
     Warm near-black, never pure black — vintage print feel */
  --ink-00: #2A1E14;   /* headlines, body emphasized */
  --ink-10: #3C2E22;   /* body */
  --ink-20: #5E4B3A;   /* secondary text */
  --ink-30: #8A7761;   /* tertiary / captions */
  --ink-40: #B5A890;   /* disabled / hairlines */

  /* --- Prince Blue (the coat + the sea) ---
     Primary action color — deep, slightly desaturated */
  --prince-00: #E7EEF3;
  --prince-10: #B8CCDB;
  --prince-20: #7397B4;
  --prince-30: #3E6A8E;   /* PRIMARY */
  --prince-40: #2B4E6C;
  --prince-50: #1C3448;

  /* --- Fox Amber (the fox's fur + the prince's hair) ---
     Warm secondary — glow, highlights, accents */
  --fox-00: #FBEFD8;
  --fox-10: #F3D59A;
  --fox-20: #E6A757;
  --fox-30: #D48534;   /* SECONDARY */
  --fox-40: #A85F1E;
  --fox-50: #6E3D12;

  /* --- Moss / Scarf Green ---
     The green scarf — muted sage, quiet third accent */
  --moss-00: #E8EAD9;
  --moss-10: #C8CEA9;
  --moss-20: #8E9A6A;
  --moss-30: #5E6E45;   /* TERTIARY */
  --moss-40: #3F4C2E;

  /* --- Rose / House Coral (the pink & red beach houses) ---
     Warm coral, sparingly for tags and illustrative bits */
  --rose-00: #FBE6DC;
  --rose-10: #F4BFA8;
  --rose-20: #E48869;
  --rose-30: #B65A3D;

  /* --- Sky (window light) --- */
  --sky-00: #EAF4FA;
  --sky-10: #BBDCEC;
  --sky-20: #7FB6D2;

  /* ============================================================
     SEMANTIC TOKENS — use these in components
     ============================================================ */

  /* Background */
  --bg: var(--paper-10);
  --bg-elevated: var(--paper-00);
  --bg-sunken: var(--paper-20);
  --bg-inverse: var(--ink-00);

  /* Foreground */
  --fg: var(--ink-10);
  --fg-strong: var(--ink-00);
  --fg-muted: var(--ink-20);
  --fg-subtle: var(--ink-30);
  --fg-disabled: var(--ink-40);
  --fg-on-dark: var(--paper-00);
  --fg-on-accent: var(--paper-00);

  /* Brand roles */
  --accent: var(--prince-30);
  --accent-hover: var(--prince-40);
  --accent-press: var(--prince-50);
  --accent-soft: var(--prince-00);

  --accent-warm: var(--fox-30);
  --accent-warm-hover: var(--fox-40);
  --accent-warm-soft: var(--fox-00);

  --accent-quiet: var(--moss-30);

  /* Borders & hairlines */
  --border: rgba(62, 46, 34, 0.12);     /* ink-10 at 12% */
  --border-strong: rgba(62, 46, 34, 0.22);
  --border-on-dark: rgba(251, 245, 236, 0.18);

  /* Semantic status */
  --success: var(--moss-30);
  --success-bg: var(--moss-00);
  --warning: var(--fox-30);
  --warning-bg: var(--fox-00);
  --danger: var(--rose-30);
  --danger-bg: var(--rose-00);
  --info: var(--prince-30);
  --info-bg: var(--prince-00);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  /* Japanese-primary: Shippori Mincho leads, Fraunces matches for EN */
  --font-serif: 'Shippori Mincho', 'Fraunces', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  --font-serif-en: 'Fraunces', 'Shippori Mincho', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', 'Hiragino Sans', 'Yu Gothic', -apple-system, system-ui, sans-serif;
  --font-hand: 'Klee One', 'Shippori Mincho', cursive;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* Type scale — generous, serif-forward, warm */
  --fs-display:  clamp(56px, 7vw, 96px);
  --fs-h1:       clamp(40px, 5vw, 64px);
  --fs-h2:       clamp(30px, 3.4vw, 44px);
  --fs-h3:       clamp(22px, 2.2vw, 28px);
  --fs-h4:       20px;
  --fs-lead:     19px;
  --fs-body:     17px;
  --fs-small:    15px;
  --fs-caption:  13px;
  --fs-micro:    11px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.6;
  --lh-loose: 1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-xwide:  0.16em;

  /* ============================================================
     SPACING — 4px base, warm generous scale
     ============================================================ */
  --sp-0:  0;
  --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;

  /* ============================================================
     RADII — soft, never sharp. Like thumbed book corners.
     ============================================================ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* ============================================================
     SHADOWS — warm-tinted, soft, never cool grey
     ============================================================ */
  --shadow-xs:  0 1px 2px  rgba(62, 46, 34, 0.06);
  --shadow-sm:  0 2px 6px  rgba(62, 46, 34, 0.08);
  --shadow-md:  0 8px 20px rgba(62, 46, 34, 0.10), 0 2px 6px rgba(62, 46, 34, 0.05);
  --shadow-lg:  0 20px 50px rgba(62, 46, 34, 0.14), 0 4px 12px rgba(62, 46, 34, 0.06);
  --shadow-xl:  0 40px 80px rgba(62, 46, 34, 0.18);
  --shadow-inset: inset 0 1px 2px rgba(62, 46, 34, 0.06);

  /* Golden-hour glow for hero imagery */
  --glow-warm: 0 0 60px rgba(212, 133, 52, 0.25);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --dur-fast: 150ms;
  --dur-med:  280ms;
  --dur-slow: 520ms;
  --dur-tide: 900ms;  /* long drift, for ambient hover */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-sm: 640px;
  --container-md: 860px;
  --container-lg: 1120px;
  --container-xl: 1320px;
}

/* =============================================================
   GLOBAL BASE — safe to import on any page
   ============================================================= */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: 'ss01', 'ss02', 'kern';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Paper grain — very faint warm noise */
body.paper {
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(212, 133, 52, 0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(62, 106, 142, 0.06), transparent 60%),
    var(--paper-10);
}

/* =============================================================
   SEMANTIC TYPE CLASSES
   ============================================================= */

.t-display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}

.t-h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}

.t-h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}

.t-h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

.t-lead {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.t-body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg);
}

.t-small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.t-micro {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.t-hand {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  color: var(--accent-warm);
  transform: rotate(-2deg);
  display: inline-block;
}

.t-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.35;
  font-weight: 400;
  color: var(--fg-strong);
  letter-spacing: var(--tracking-tight);
}

/* Element defaults — opt-in by wrapping content in .prose */
.prose h1 { @extend .t-h1; }
.prose h1, .prose h2, .prose h3, .prose h4 {
  font-family: var(--font-serif);
  color: var(--fg-strong);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-4);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.prose h1 { font-size: var(--fs-h1); font-weight: 500; }
.prose h2 { font-size: var(--fs-h2); font-weight: 500; }
.prose h3 { font-size: var(--fs-h3); font-weight: 600; }
.prose p  { margin: 0 0 var(--sp-4); max-width: 68ch; }
.prose a  { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-hover); }
.prose em { font-style: italic; }
.prose strong { font-weight: 600; color: var(--fg-strong); }
.prose blockquote {
  border-left: 3px solid var(--accent-warm);
  padding: var(--sp-2) var(--sp-5);
  margin: var(--sp-5) 0;
  font-style: italic;
  color: var(--fg-muted);
  font-size: var(--fs-lead);
}