/**
 * muginote Design System Tokens
 * Canonical CSS custom properties extracted from design/tokens.json
 * note.com-inspired Japanese editorial aesthetic + Breadtrip geospatial narrative
 */

:root {
  /* --- Primitive Color Tokens: Surfaces --- */
  --token-color-surface-page: #ffffff;
  --token-color-surface-subtle: #f7f9f9;
  --token-color-surface-soft: #f2f5f4;
  --token-color-surface-dark: #18181b;
  --token-color-surface-dock: rgba(17, 24, 39, 0.92);

  /* --- Primitive Color Tokens: Borders --- */
  --token-color-border-hairline: #e6e8e8;
  --token-color-border-subtle: #e5e7eb;
  --token-color-border-strong: #d1d5db;
  --token-color-border-focus: #222222;

  /* --- Primitive Color Tokens: Text --- */
  --token-color-text-main: #222222;
  --token-color-text-body: #333635;
  --token-color-text-muted: #6b7280;
  --token-color-text-light: #9ca3af;
  --token-color-text-faint: #a1a1aa;
  --token-color-text-inverse: #ffffff;

  /* --- Primitive Color Tokens: Brand Accents --- */
  --token-color-brand-note-green: #2cb696;
  --token-color-brand-note-green-hover: #239b7e;
  --token-color-brand-note-green-tint: #eaf8f4;
  --token-color-brand-note-green-deep: #155e4d;
  --token-color-brand-suki-red: #e11d48;
  --token-color-brand-suki-red-hover: #be123c;
  --token-color-brand-suki-tint: #fff1f2;
  --token-color-brand-gold-accent: #d4af37;
  --token-color-brand-gold-tint: #fef3c7;

  /* --- Primitive Color Tokens: Waypoint Semantics --- */
  --token-color-waypoint-spot: #2cb696;
  --token-color-waypoint-food: #d97706;
  --token-color-waypoint-flight: #2563eb;
  --token-color-waypoint-train: #0d9488;
  --token-color-waypoint-stay: #57534e;
  --token-color-waypoint-note: #222222;

  /* --- Primitive Color Tokens: Feedback & State --- */
  --token-color-feedback-inspect-blue: #2563eb;
  --token-color-feedback-inspect-tint: #eff6ff;
  --token-color-feedback-success: #10b981;
  --token-color-feedback-success-tint: #d1fae5;
  --token-color-feedback-warning: #f59e0b;
  --token-color-feedback-error: #ef4444;

  /* --- Typography Families --- */
  --token-font-sans: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  --token-font-serif: "Noto Serif JP", Georgia, serif;
  --token-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* --- Typography Scale --- */
  --token-font-size-2xs: 11px;
  --token-font-size-xs: 12px;
  --token-font-size-sm: 13.5px;
  --token-font-size-base: 15px;
  --token-font-size-md: 16.5px;
  --token-font-size-lg: 19px;
  --token-font-size-xl: 22px;
  --token-font-size-2xl: 28px;
  --token-font-size-3xl: 34px;

  /* --- Line Heights --- */
  --token-line-height-tight: 1.25;
  --token-line-height-snug: 1.4;
  --token-line-height-normal: 1.6;
  --token-line-height-relaxed: 1.75;

  /* --- Spacing Scale --- */
  --token-space-1: 4px;
  --token-space-2: 8px;
  --token-space-3: 12px;
  --token-space-4: 16px;
  --token-space-5: 20px;
  --token-space-6: 24px;
  --token-space-8: 32px;
  --token-space-10: 40px;
  --token-space-12: 48px;
  --token-space-16: 64px;

  /* --- Border Radii --- */
  --token-radius-xs: 4px;
  --token-radius-sm: 6px;
  --token-radius-md: 10px;
  --token-radius-lg: 14px;
  --token-radius-xl: 20px;
  --token-radius-pill: 9999px;

  /* --- Elevation & Shadows --- */
  --token-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08);
  --token-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --token-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08);
  --token-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.12);
  --token-shadow-popover: 0 18px 40px rgba(0, 0, 0, 0.18);
  --token-shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.18);
  --token-shadow-dock: 0 10px 30px rgba(0, 0, 0, 0.25);

  /* =========================================================
     Semantic Custom Properties (Directly usable in stylesheets)
     ========================================================= */

  /* Surfaces */
  --bg-page: var(--token-color-surface-page);
  --bg-subtle: var(--token-color-surface-subtle);
  --bg-soft: var(--token-color-surface-soft);
  --bg-dark: var(--token-color-surface-dark);
  --bg-dock: var(--token-color-surface-dock);

  /* Borders */
  --border-hairline: var(--token-color-border-hairline);
  --border-subtle: var(--token-color-border-subtle);
  --border-strong: var(--token-color-border-strong);
  --border-focus: var(--token-color-border-focus);

  /* Text */
  --text-main: var(--token-color-text-main);
  --text-body: var(--token-color-text-body);
  --text-muted: var(--token-color-text-muted);
  --text-light: var(--token-color-text-light);
  --text-faint: var(--token-color-text-faint);
  --text-inverse: var(--token-color-text-inverse);

  /* Brand Accents */
  --note-green: var(--token-color-brand-note-green);
  --note-green-hover: var(--token-color-brand-note-green-hover);
  --note-green-tint: var(--token-color-brand-note-green-tint);
  --note-green-deep: var(--token-color-brand-note-green-deep);
  --suki-red: var(--token-color-brand-suki-red);
  --suki-red-hover: var(--token-color-brand-suki-red-hover);
  --suki-tint: var(--token-color-brand-suki-tint);
  --gold-accent: var(--token-color-brand-gold-accent);
  --gold-tint: var(--token-color-brand-gold-tint);

  /* Waypoint Semantics */
  --wp-spot: var(--token-color-waypoint-spot);
  --wp-food: var(--token-color-waypoint-food);
  --wp-flight: var(--token-color-waypoint-flight);
  --wp-train: var(--token-color-waypoint-train);
  --wp-stay: var(--token-color-waypoint-stay);
  --wp-note: var(--token-color-waypoint-note);

  /* Feedback & UI States */
  --inspect-blue: var(--token-color-feedback-inspect-blue);
  --inspect-tint: var(--token-color-feedback-inspect-tint);
  --success: var(--token-color-feedback-success);
  --success-tint: var(--token-color-feedback-success-tint);
  --warning: var(--token-color-feedback-warning);
  --error: var(--token-color-feedback-error);

  /* Fonts */
  --font-sans: var(--token-font-sans);
  --font-serif: var(--token-font-serif);
  --font-mono: var(--token-font-mono);

  /* Type Scale */
  --font-size-2xs: var(--token-font-size-2xs);
  --font-size-xs: var(--token-font-size-xs);
  --font-size-sm: var(--token-font-size-sm);
  --font-size-base: var(--token-font-size-base);
  --font-size-md: var(--token-font-size-md);
  --font-size-lg: var(--token-font-size-lg);
  --font-size-xl: var(--token-font-size-xl);
  --font-size-2xl: var(--token-font-size-2xl);
  --font-size-3xl: var(--token-font-size-3xl);

  /* Line Heights */
  --line-height-tight: var(--token-line-height-tight);
  --line-height-snug: var(--token-line-height-snug);
  --line-height-normal: var(--token-line-height-normal);
  --line-height-relaxed: var(--token-line-height-relaxed);

  /* Spacing */
  --space-1: var(--token-space-1);
  --space-2: var(--token-space-2);
  --space-3: var(--token-space-3);
  --space-4: var(--token-space-4);
  --space-5: var(--token-space-5);
  --space-6: var(--token-space-6);
  --space-8: var(--token-space-8);
  --space-10: var(--token-space-10);
  --space-12: var(--token-space-12);
  --space-16: var(--token-space-16);

  /* Radii */
  --radius-xs: var(--token-radius-xs);
  --radius-sm: var(--token-radius-sm);
  --radius-md: var(--token-radius-md);
  --radius-lg: var(--token-radius-lg);
  --radius-xl: var(--token-radius-xl);
  --radius-pill: var(--token-radius-pill);

  /* Shadows */
  --shadow-xs: var(--token-shadow-xs);
  --shadow-sm: var(--token-shadow-sm);
  --shadow-md: var(--token-shadow-md);
  --shadow-lg: var(--token-shadow-lg);
  --shadow-popover: var(--token-shadow-popover);
  --shadow-modal: var(--token-shadow-modal);
  --shadow-dock: var(--token-shadow-dock);
}