/* James Travel Planner — Design Tokens */

:root {
  /* ── Color: Surfaces (cool, slightly tinted) ─────────────────── */
  --surface-0: #f7f9fb;        /* app background */
  --surface-1: #ffffff;        /* cards */
  --surface-2: #f1f4f8;        /* subtle panels, hover */
  --surface-3: #e6ebf1;        /* dividers, inputs */
  --surface-inset: #eef2f6;    /* code/data insets */

  /* ── Color: Text ──────────────────────────────────────────────── */
  --text-primary: #0b1b2b;     /* near-black navy */
  --text-secondary: #425062;   /* muted body */
  --text-tertiary: #6b7a8c;    /* meta, captions */
  --text-disabled: #9ba7b5;
  --text-inverse: #ffffff;

  /* ── Color: Borders ──────────────────────────────────────────── */
  --border-subtle: #e6ebf1;
  --border-default: #d8dfe7;
  --border-strong: #b6c1cd;
  --border-focus: #1a6b8a;

  /* ── Color: Brand (deep ocean navy) ──────────────────────────── */
  --brand-50:  #eaf4f9;
  --brand-100: #c8e1ec;
  --brand-200: #95c3d7;
  --brand-300: #5ea1bc;
  --brand-400: #2f81a2;
  --brand-500: #1a6b8a;        /* primary */
  --brand-600: #12556e;
  --brand-700: #0d4256;
  --brand-800: #0a3242;
  --brand-900: #071e28;

  /* ── Color: Accent (teal) ────────────────────────────────────── */
  --accent-50:  #e6f7f5;
  --accent-100: #c2ebe6;
  --accent-200: #8ed8cf;
  --accent-300: #55bfb2;
  --accent-400: #24a393;
  --accent-500: #0e8576;       /* accent */
  --accent-600: #0a6a5e;
  --accent-700: #075048;

  /* ── Color: Warm highlight (sand — used sparingly) ──────────── */
  --sand-50:  #faf6ef;
  --sand-100: #f1e8d3;
  --sand-200: #e3d2a8;
  --sand-300: #c9b079;
  --sand-500: #a07e3f;

  /* ── Color: Semantic ─────────────────────────────────────────── */
  --success-50: #e8f6ed;
  --success-500: #1e8a4a;
  --success-700: #0f5e30;

  --warning-50: #fef5e6;
  --warning-500: #c47d1a;
  --warning-700: #8a5610;

  --danger-50: #fdecec;
  --danger-500: #c83c3c;
  --danger-700: #8a2525;

  --info-50: #eaf2fb;
  --info-500: #2d6cbf;
  --info-700: #1a4a85;

  /* ── Typography ──────────────────────────────────────────────── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* font sizes (modular scale ~1.2) */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;
  --text-6xl:  64px;
  --text-7xl:  84px;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.08em;

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

  /* ── Spacing (4px base) ─────────────────────────────────────── */
  --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;

  /* ── Radii ──────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 999px;

  /* ── Shadows (soft, layered) ────────────────────────────────── */
  --shadow-xs: 0 1px 0 rgba(11, 27, 43, 0.04);
  --shadow-sm: 0 1px 2px rgba(11, 27, 43, 0.06), 0 1px 1px rgba(11, 27, 43, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 27, 43, 0.08), 0 1px 3px rgba(11, 27, 43, 0.04);
  --shadow-lg: 0 12px 32px rgba(11, 27, 43, 0.10), 0 2px 6px rgba(11, 27, 43, 0.05);
  --shadow-xl: 0 24px 56px rgba(11, 27, 43, 0.14), 0 4px 12px rgba(11, 27, 43, 0.06);

  --ring-focus: 0 0 0 3px rgba(26, 107, 138, 0.25);
  --ring-danger: 0 0 0 3px rgba(200, 60, 60, 0.20);

  /* ── Motion ─────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 380ms;

  /* ── Layout ─────────────────────────────────────────────────── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
}

/* ── Base reset / typographic defaults ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
button { font-family: inherit; }
a { color: var(--brand-500); text-decoration: none; }
a:hover { color: var(--brand-600); }

::selection { background: var(--brand-100); color: var(--brand-800); }

/* ── Utility: Mono data ─────────────────────────────────────── */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
}