/* ============================================================
   Seen Insurance — Design Tokens
   สืบทอดจาก SeenFord Design System (dark / charcoal + electric blue)
   ปรับเพิ่มเฉพาะ token ที่ธุรกิจประกันต้องใช้ (tier colors, trust)
   ============================================================ */

/* ---------- Fonts ---------- */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* ===== Ink ramp — page + surfaces ===== */
  --ink-950: #0A0C10;
  --ink-900: #0F131A;
  --ink-850: #141922;
  --ink-800: #1A2029;
  --ink-750: #212834;
  --ink-700: #2A323F;
  --ink-600: #384252;
  --ink-500: #4A5568;
  --ink-400: #66738A;

  /* ===== Foreground / text ===== */
  --fg-1: #F5F7FA;
  --fg-2: #B4BECC;
  --fg-3: #8B96A8;
  --fg-invert: #0A0C10;

  /* ===== Blue accent ramp ===== */
  --blue-700: #145AD6;
  --blue-600: #1B6FF3;
  --blue-500: #2F80FF;
  --blue-400: #5AA0FF;
  --blue-300: #8FBEFF;
  --blue-100: #DCE9FF;
  --blue-glow: rgba(47, 128, 255, 0.38);

  /* ===== Hazard amber ===== */
  --amber-600: #E08600;
  --amber-500: #F5A524;
  --amber-300: #FFC868;

  /* ===== Status ===== */
  --green-500: #22C55E;
  --green-600: #16A34A;
  --red-500: #EF4444;
  --red-600: #DC2626;

  /* ===== LINE brand ===== */
  --line-green: #06C755;
  --line-green-600: #05B04B;

  --white: #FFFFFF;
  --black: #000000;

  /* ===== Semantic aliases ===== */
  --bg-page: var(--ink-950);
  --bg-page-alt: var(--ink-900);
  --surface-1: var(--ink-850);
  --surface-2: var(--ink-800);
  --surface-3: var(--ink-750);
  --surface-inset: var(--ink-900);

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: var(--blue-500);

  --text-primary: var(--fg-1);
  --text-secondary: var(--fg-2);
  --text-muted: var(--fg-3);
  --text-accent: var(--blue-400);

  --accent: var(--blue-600);
  --accent-hover: var(--blue-500);
  --accent-active: var(--blue-700);
  --accent-contrast: var(--white);
  --accent-soft: rgba(47, 128, 255, 0.12);

  --hazard: var(--amber-500);
  --hazard-soft: rgba(245, 165, 36, 0.14);

  --success: var(--green-500);
  --success-soft: rgba(34, 197, 94, 0.14);
  --danger: var(--red-500);
  --danger-soft: rgba(239, 68, 68, 0.14);

  --focus-ring: var(--blue-500);

  --header-bg: rgba(10, 12, 16, 0.82);
  --hero-glow: rgba(47, 128, 255, 0.18);
  --placeholder-1: var(--ink-800);
  --placeholder-2: var(--ink-850);

  /* ===== Insurance tier accents (เฉพาะโดเมนประกัน) ===== */
  --tier-1: var(--blue-500);      /* ชั้น 1 */
  --tier-2p: #7C4DDA;             /* 2+ */
  --tier-3p: var(--amber-500);    /* 3+ */
  --tier-3: var(--ink-400);       /* ชั้น 3 */
  --tier-cmi: var(--green-500);   /* พ.ร.บ. */

  /* ===== Radius / border / shadow / motion ===== */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --bw-hair: 1px;
  --bw-strong: 2px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 16px 44px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px var(--blue-500), 0 10px 34px var(--blue-glow);
  --shadow-focus: 0 0 0 3px rgba(47, 128, 255, 0.45);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 340ms;

  /* ===== Spacing — 4px grid ===== */
  --space-0: 0;
  --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;
  --space-32: 128px;

  --container-max: 1200px;
  --container-wide: 1360px;
  --gutter: var(--space-6);
  --section-pad-y: var(--space-24);

  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 54px;

  /* ===== Typography ===== */
  --font-sans: "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --text-xs: 12px;  --lh-xs: 18px;
  --text-sm: 14px;  --lh-sm: 22px;
  --text-base: 16px; --lh-base: 27px;
  --text-lg: 18px;  --lh-lg: 30px;
  --text-xl: 20px;  --lh-xl: 32px;
  --text-2xl: 24px; --lh-2xl: 36px;
  --text-3xl: 30px; --lh-3xl: 42px;
  --text-4xl: 38px; --lh-4xl: 50px;
  --text-5xl: 48px; --lh-5xl: 58px;
  --text-6xl: 60px; --lh-6xl: 68px;
  --text-7xl: 76px; --lh-7xl: 82px;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-overline: 0.16em;

  --text-display: var(--fw-bold) var(--text-6xl)/var(--lh-6xl) var(--font-display);
  --text-h1: var(--fw-bold) var(--text-5xl)/var(--lh-5xl) var(--font-display);
  --text-h2: var(--fw-bold) var(--text-4xl)/var(--lh-4xl) var(--font-display);
  --text-h3: var(--fw-semibold) var(--text-2xl)/var(--lh-2xl) var(--font-sans);
  --text-body: var(--fw-regular) var(--text-base)/var(--lh-base) var(--font-sans);
  --text-body-lg: var(--fw-regular) var(--text-lg)/var(--lh-lg) var(--font-sans);
  --text-caption: var(--fw-regular) var(--text-sm)/var(--lh-sm) var(--font-sans);
}

/* ===== Light theme ===== */
[data-theme="light"] {
  --bg-page: #F4F6FA;
  --bg-page-alt: #E9EEF5;
  --surface-1: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-3: #EEF2F8;
  --surface-inset: #EEF2F8;

  --border: rgba(16, 26, 45, 0.10);
  --border-strong: rgba(16, 26, 45, 0.18);

  --text-primary: #101722;
  --text-secondary: #45536A;
  --text-muted: #5B6779;
  --text-accent: var(--blue-700);
  --fg-invert: #101722;

  --accent-soft: rgba(27, 111, 243, 0.10);
  --accent-contrast: #FFFFFF;

  --header-bg: rgba(255, 255, 255, 0.85);
  --hero-glow: rgba(27, 111, 243, 0.12);
  --placeholder-1: #E2E8F1;
  --placeholder-2: #EDF1F7;

  --tier-2p: #7C4DDA;
  --tier-3: #66738A;
}