/* ==========================================================================
   Design Tokens & Variables — Japan 2027 Dashboard (Sakura Light Theme)
   Based on VPS design system (/root/.claude/DESIGN.md) tailored to Japanese aesthetics
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Color Palette (Sakura & Washi Light Theme) --- */
  --bg-page: #faf7f8;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-subtle: #fdf8fa;
  --bg-card-highlight: #fff1f4;
  --bg-pill: #fcecef;

  /* --- Text & Ink (Sumi-e & Contrast AAA) --- */
  --text-primary: #0f172a;        /* Deep sumi ink — high readability */
  --text-secondary: #334155;      /* Dark slate */
  --text-muted: #64748b;          /* Balanced mid grey */
  --text-light: #94a3b8;          /* Low hierarchy */
  --text-inverted: #ffffff;

  /* --- Sakura Pink Palette --- */
  --sakura-50: #fff1f2;
  --sakura-100: #ffe4e6;
  --sakura-200: #fecdd3;
  --sakura-300: #fda4af;
  --sakura-400: #fb7185;
  --sakura-500: #f43f5e;          /* Core Sakura Accent */
  --sakura-600: #e11d48;          /* Hanko / Seal Crimson */
  --sakura-700: #be123c;
  --sakura-glow: rgba(244, 63, 94, 0.18);
  --sakura-glow-soft: rgba(244, 63, 94, 0.08);

  /* --- Borders & Outlines --- */
  --border-subtle: #f1e4e8;
  --border-card: #ede1e6;
  --border-card-hover: #fda4af;
  --border-active: #f43f5e;

  /* --- Gradients --- */
  --gradient-sakura: linear-gradient(135deg, #e11d48 0%, #f43f5e 55%, #fb7185 100%);
  --gradient-sakura-soft: linear-gradient(135deg, #fff1f2 0%, #fce7f3 100%);
  --gradient-gold: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  --gradient-card: linear-gradient(180deg, #ffffff 0%, #fefbfc 100%);

  /* --- Brand & Airline Colors --- */
  --lot-blue: #0b2545;            /* Official LOT Navy */
  --lot-blue-light: #133a6f;
  --lot-blue-soft: #f0f4f9;
  --lot-blue-border: #cbd9ea;

  /* --- Status Colors --- */
  --green: #10b981;
  --green-bg: #ecfdf5;
  --green-border: #a7f3d0;
  --gold: #d97706;
  --gold-bg: #fef3c7;
  --gold-border: #fde68a;

  /* --- Japanese Aesthetic Tokens --- */
  --hanko-red: #dc2626;
  --hanko-bg: rgba(220, 38, 38, 0.06);
  --hanko-border: #dc2626;

  /* --- Typography --- */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-jp: 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', sans-serif;

  /* --- Spacing Scale (4px Base) --- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* --- Border Radius --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;              /* Design System standard card radius */
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;          /* Pill buttons */

  /* --- Elevation & Shadows --- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 6px -1px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(225, 29, 72, 0.03);
  --shadow-md: 0 6px 18px -3px rgba(15, 23, 42, 0.05), 0 3px 8px -1px rgba(225, 29, 72, 0.04);
  --shadow-card: 0 8px 24px -4px rgba(225, 29, 72, 0.05), 0 2px 8px -1px rgba(15, 23, 42, 0.03);
  --shadow-card-hover: 0 16px 36px -6px rgba(225, 29, 72, 0.12), 0 6px 16px -2px rgba(15, 23, 42, 0.04);
  --shadow-button: 0 4px 14px 0 rgba(244, 63, 94, 0.35);
  --shadow-button-hover: 0 6px 20px 0 rgba(244, 63, 94, 0.45);

  /* --- Motion & Transitions --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.22s;
  --duration-slow: 0.35s;

  /* --- Container Dimensions --- */
  --container-max-w: 1160px;
}