/* ============================================================
   Personal Asiatic — Design Tokens
   Direction: "Warm Professional" — deep navy + warm amber,
   human, trustworthy, B2B. Light-first with dark anchor sections.
   ============================================================ */

:root {
  /* --- Brand palette --- */
  --c-navy-900: #0a1f33;   /* darkest — footer / hero base */
  --c-navy-800: #0f2a43;   /* primary ink / dark sections */
  --c-navy-700: #163a5a;
  --c-navy-600: #1e4a70;

  --c-accent:   #f2802e;   /* warm coral-amber — primary accent */
  --c-accent-600: #e06f1f;
  --c-accent-300: #ffb15c; /* lighter amber */
  --c-accent-soft: rgba(242, 128, 46, 0.12);
  --c-accent-ring: rgba(242, 128, 46, 0.35);

  --c-surface:   #fbfaf7;  /* warm off-white page bg */
  --c-surface-2: #f4efe7;  /* alt section bg */
  --c-surface-3: #ece5d9;
  --c-white:     #ffffff;

  --c-ink:       #0f2a43;  /* headings on light */
  --c-body:      #37485a;  /* body text on light */
  --c-muted:     #6b7a89;  /* muted / captions */
  --c-on-dark:   #eaf1f8;  /* text on navy */
  --c-on-dark-muted: #9db3c7;

  --c-line:      rgba(15, 42, 67, 0.10);
  --c-line-2:    rgba(15, 42, 67, 0.18);
  --c-line-dark: rgba(234, 241, 248, 0.12);

  --c-success:   #1f9d63;
  --c-success-bg: rgba(31, 157, 99, 0.10);
  --c-error:     #d64545;
  --c-error-bg:  rgba(214, 69, 69, 0.10);

  /* --- Typography --- */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl:  clamp(1.6rem, 1.35rem + 1.1vw, 2.15rem);
  --text-3xl:  clamp(2rem, 1.6rem + 1.9vw, 3rem);
  --text-hero: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  /* --- Spacing --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(4rem, 2.8rem + 5vw, 7.5rem);
  --container: 1200px;
  --container-narrow: 900px;

  /* --- Radius --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- Shadows (warm-tinted) --- */
  --shadow-sm: 0 1px 2px rgba(15, 42, 67, 0.06),
               0 2px 8px rgba(15, 42, 67, 0.05);
  --shadow-md: 0 6px 20px rgba(15, 42, 67, 0.08),
               0 2px 6px rgba(15, 42, 67, 0.06);
  --shadow-lg: 0 20px 50px rgba(15, 42, 67, 0.14),
               0 8px 20px rgba(15, 42, 67, 0.08);
  --shadow-accent: 0 12px 30px rgba(242, 128, 46, 0.32);

  /* --- Motion --- */
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 520ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --header-h: 76px;
}