/* ============================================================
   BẾN THỜI GIAN — Design tokens
   Ported from "Bến Thời Gian Design System" (Claude Design)
   to keep the corporate landing page visually identical to
   benthoigian.com.
   ============================================================ */

:root {
  /* ---- Base: Navy (brand primary) ---- */
  --color-navy-950: #0c1f38;
  --color-navy-900: #122c4c;
  --color-navy-800: #183e6d; /* exact brand navy from logo file */
  --color-navy-700: #29517f;
  --color-navy-600: #3c6497;
  --color-navy-500: #5580ae;
  --color-navy-400: #7fa0c4;
  --color-navy-300: #aec4dc;
  --color-navy-200: #d3e0ec;
  --color-navy-100: #e9f0f7;
  --color-navy-50: #f3f7fb;

  /* ---- Base: Ink (warm near-black, for text — never pure #000) ---- */
  --color-ink-900: #22201b;
  --color-ink-700: #4b463d;
  --color-ink-500: #7c7568;
  --color-ink-300: #c7bfae;
  --color-ink-200: #e2dbc9;
  --color-ink-100: #efe9da;

  /* ---- Base: Paper (warm cream) ---- */
  --color-paper: #fbf5e9;
  --color-paper-dim: #f3ecdb;
  --color-white: #ffffff;

  /* ---- Accent: decorative only (imagery, dividers, small moments) ---- */
  --color-terracotta: #cf9a68;
  --color-terracotta-tint: #f1decb;
  --color-sage: #93a982;
  --color-sage-tint: #e6ebdc;
  --color-dusty-blue: #9db7c2;
  --color-dusty-blue-tint: #e2edf0;
  --color-lotus-pink: #e6a3ad;
  --color-lotus-pink-tint: #f8e2e5;
  --color-sun-peach: #eba98a;
  --color-sun-peach-tint: #f8e2d5;

  /* ================= Semantic aliases ================= */
  --surface-page: var(--color-paper);
  --surface-page-alt: var(--color-paper-dim);
  --surface-card: var(--color-white);
  --surface-card-alt: var(--color-paper-dim);
  --surface-inverse: var(--color-navy-800);
  --surface-inverse-deep: var(--color-navy-950);
  --surface-overlay: rgba(12, 31, 56, 0.56);

  --text-primary: var(--color-ink-900);
  --text-secondary: var(--color-ink-700);
  --text-muted: var(--color-ink-500);
  --text-on-inverse: var(--color-white);
  --text-on-inverse-muted: var(--color-navy-200);
  --text-brand: var(--color-navy-800);

  --border-subtle: var(--color-ink-200);
  --border-default: var(--color-ink-300);
  --border-inverse: rgba(255, 255, 255, 0.24);
  --border-focus: var(--color-navy-500);

  --brand-primary: var(--color-navy-800);
  --brand-primary-hover: var(--color-navy-700);
  --brand-primary-press: var(--color-navy-900);
  --brand-on-primary: var(--color-white);

  --interactive-secondary: var(--color-paper-dim);
  --interactive-secondary-hover: var(--color-navy-100);
  --interactive-secondary-press: var(--color-navy-200);

  --link: var(--color-navy-700);
  --link-hover: var(--color-navy-800);
  --link-visited: var(--color-navy-900);

  --feedback-success: #6f9b6e;
  --feedback-success-tint: #e7efe2;
  --feedback-warning: #c98a4b;
  --feedback-warning-tint: #f6e6d2;
  --feedback-danger: #b3564a;
  --feedback-danger-tint: #f4dfda;

  --focus-ring: var(--color-navy-500);

  /* ================= Typography ================= */
  --font-display: 'Prata', 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-accent: 'BT Beau Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'BT Beau Sans', -apple-system, 'Segoe UI', sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-md: 1.25rem;
  --text-lg: 1.625rem;
  --text-xl: 2.125rem;
  --text-2xl: 2.875rem;
  --text-3xl: 3.875rem;
  --text-4xl: 5.25rem;

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

  --leading-tight: 1.08;
  --leading-snug: 1.28;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.14em;

  /* ================= Layout ================= */
  --page-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --content-max-width: 1180px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}