/* ─────────────────────────────────────────────────────────────────
   AirSync Design Tokens
   Source: airsync-app/lib/theme.ts + .brandwiki/wiki/bb-design/*
   ───────────────────────────────────────────────────────────────── */

/* ─── Fonts ────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800;900&family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ─── Type stack ────────────────────────────────────────────── */
  /* Japanese-first; latin glyphs fall through to Geist when present */
  --font-jp: "Noto Sans JP", "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-latin: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Weights — keep body at 400, never bold body copy */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type scale (px). Japanese is denser; sizes lean small, line-heights generous. */
  --fs-caption: 11px;     /* タイムスタンプ・補助 */
  --fs-caption-md: 12px;
  --fs-body-sm: 13px;
  --fs-body: 14px;        /* default UI body */
  --fs-body-lg: 15px;     /* chat bubbles, comfortable reading */
  --fs-h3: 16px;          /* card titles */
  --fs-h2: 18px;          /* section headings */
  --fs-h1: 20px;          /* page titles */
  --fs-h1-xl: 24px;       /* dashboard hero / large titles */
  --fs-display: 28px;     /* LP / marketing hero */
  --fs-display-xl: 40px;  /* LP hero only */

  /* Line heights — Japanese needs 1.6–1.8x */
  --lh-tight: 1.4;        /* numbers, captions */
  --lh-base: 1.6;         /* default body */
  --lh-relaxed: 1.75;     /* long-form Japanese */

  /* Letter spacing — Japanese reads better at 0; latin caps want a touch */
  --tracking-base: 0;
  --tracking-caps: 0.04em;

  /* ─── Color — Primary (藍色 / Gemini blue) ───────────────────── */
  /* Calm intelligence. Used for CTA, links, focus, brand. */
  --color-primary-50:  #EEF2FF;
  --color-primary-100: #E0E7FF;
  --color-primary-200: #C7D2FE;
  --color-primary-300: #A5B4FC;
  --color-primary-400: #818CF8;
  --color-primary-500: #6366F1;  /* mobile app primary */
  --color-primary-600: #4F46E5;
  --color-primary-700: #4338CA;
  --color-primary:     var(--color-primary-500);
  --color-primary-hover: var(--color-primary-600);

  /* Brandwiki "Gemini blue" — used in dashboard / LP for calmer dark surfaces */
  --color-brand-blue: #4F8EF7;
  --color-brand-blue-dark: #3570D4;

  /* ─── Color — AI accent (翡翠 / jade-teal) ─────────────────── */
  /* AI features: draft generated, sparkles tag, AI-touched surfaces. */
  --color-ai-50:  #F0FDFA;
  --color-ai-100: #CCFBF1;
  --color-ai-300: #5EEAD4;
  --color-ai-400: #2DD4BF;
  --color-ai-500: #14B8A6;
  --color-ai-600: #0D9488;
  --color-ai-700: #0F766E;
  --color-ai: var(--color-ai-500);

  /* ─── Color — Semantic ──────────────────────────────────────── */
  --color-success-50: #F0FDF4;
  --color-success-500: #22C55E;
  --color-success-600: #16A34A;

  --color-warning-50: #FFFBEB;
  --color-warning-500: #F59E0B;
  --color-warning-600: #D97706;

  --color-danger-50: #FEF2F2;
  --color-danger-500: #EF4444;
  --color-danger-600: #DC2626;

  --color-info-500: #60A5FA;

  /* Trigger colors — proactive messages */
  --color-checkin: #22C55E;     /* pre-checkin proactive */
  --color-checkout: #A855F7;    /* post-checkout proactive */
  --color-pending: #FF9500;     /* awaiting reply */

  /* LINE green — channel-locked. Use only in chat bubbles. */
  --color-line: #06C755;

  /* ─── Color — Neutral (墨色 / sumi ink) ─────────────────────── */
  --color-gray-50:  #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E5E5E5;
  --color-gray-300: #D4D4D4;
  --color-gray-400: #A3A3A3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;
  --color-gray-950: #0A0A0A;
  --color-white:    #FFFFFF;
  --color-black:    #000000;

  /* ─── Theme — Light (warm paper) ───────────────────────────── */
  /* Mobile app uses #FFFDF9 — a faint cream that reads as paper, not screen. */
  --light-bg:        #F7F6F3;
  --light-surface:   #FFFDF9;
  --light-elevated:  #FFFFFF;
  --light-border:    rgba(140, 120, 90, 0.08);
  --light-divider:   var(--color-gray-100);
  --light-text:      var(--color-gray-900);
  --light-text-2:    var(--color-gray-500);
  --light-text-3:    var(--color-gray-400);
  --light-input-bg:  var(--color-gray-50);

  /* ─── Theme — Dark (default for dashboard) ─────────────────── */
  /* Brandwiki: #111317 page / #1A1D23 surface. Mobile app: #111110. */
  --dark-bg:         #111317;
  --dark-surface:    #1A1D23;
  --dark-elevated:   rgba(255, 245, 230, 0.06);
  --dark-card:       rgba(255, 245, 230, 0.04);
  --dark-border:     #2C3140;
  --dark-divider:    rgba(255, 245, 230, 0.04);
  --dark-text:       #F0F2F5;
  --dark-text-2:     #8A92A0;
  --dark-text-3:     #706B66;

  /* ─── Spacing — 4px base ───────────────────────────────────── */
  --space-2xs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;
  --space-5xl: 64px;

  /* ─── Radius ───────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;     /* card default */
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-bubble: 18px; /* chat bubble */
  --radius-bubble-tail: 4px;
  --radius-full: 9999px;

  /* ─── Shadow ───────────────────────────────────────────────── */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 3px 12px rgba(26, 21, 16, 0.07);
  --shadow-lg: 0 6px 20px rgba(26, 21, 16, 0.10);
  --shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.18);

  /* Borders — left-accent for typed cards */
  --border-accent-w: 3px;

  /* ─── Motion ───────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}

/* ─── Default body type ─────────────────────────────────────── */
html, body {
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Code, PINs, API keys, tokens — always mono */
code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}