/* ==========================================================================
   variables.css — Design tokens
   Law Offices of Jennifer S.F. Lim
   Change a value here and it updates everywhere on the site.
   ========================================================================== */

:root {
  /* ---------- Brand colour palette ---------------------------------------- */
  --color-primary: #0a0e16;        /* Near-black navy — primary surface       */
  --color-primary-800: #101724;    /* Raised dark surface                     */
  --color-primary-600: #1b2433;    /* Card / border on dark                   */
  --color-primary-400: #384459;    /* Muted dark text                         */

  --color-secondary: #f6f2ea;      /* Warm ivory — primary light surface      */
  --color-secondary-alt: #ece6da;  /* Deeper ivory for banding                */
  --color-light: #ffffff;

  --color-accent: #b99b5e;         /* Muted gold                              */
  --color-accent-light: #d9c08a;   /* Champagne                               */
  --color-accent-dark: #8f7440;    /* Bronze                                  */

  --color-text: #171c25;           /* Body text on light                      */
  --color-text-muted: #5b6472;     /* Secondary text on light                 */
  --color-text-invert: #ece8e0;    /* Body text on dark                       */
  --color-text-invert-muted: #9aa3b1;

  --color-line: rgba(23, 28, 37, 0.14);      /* Hairline on light             */
  --color-line-invert: rgba(246, 242, 234, 0.14); /* Hairline on dark         */

  /* ---------- Typography --------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-eyebrow: clamp(0.688rem, 0.62rem + 0.16vw, 0.78rem);
  --fs-small: clamp(0.813rem, 0.78rem + 0.14vw, 0.875rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --fs-body-lg: clamp(1.075rem, 1rem + 0.4vw, 1.25rem);
  --fs-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-h4: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
  --fs-h3: clamp(1.6rem, 1.3rem + 1.3vw, 2.35rem);
  --fs-h2: clamp(2.3rem, 1.6rem + 3vw, 4.15rem);
  --fs-h1: clamp(2.9rem, 1.7rem + 5.4vw, 6.25rem);
  --fs-display: clamp(3.4rem, 1.6rem + 8vw, 9rem);

  --lh-tight: 1.02;
  --lh-heading: 1.08;
  --lh-snug: 1.35;
  --lh-body: 1.72;

  --ls-eyebrow: 0.26em;
  --ls-caps: 0.14em;
  --ls-tight: -0.02em;

  /* ---------- Spacing scale ------------------------------------------------ */
  --space-2xs: 0.375rem;
  --space-xs: 0.75rem;
  --space-sm: 1.125rem;
  --space-md: 1.75rem;
  --space-lg: 2.75rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --section-padding: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);

  /* ---------- Layout ------------------------------------------------------- */
  --container-width: 1280px;
  --container-wide: 1520px;
  --container-narrow: 780px;
  --header-height: 92px;
  --header-height-compact: 74px;

  /* ---------- Radius, borders, shadows ------------------------------------- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --border-hairline: 1px solid var(--color-line);
  --border-hairline-invert: 1px solid var(--color-line-invert);

  --shadow-sm: 0 2px 10px rgba(10, 14, 22, 0.06);
  --shadow-md: 0 18px 40px -20px rgba(10, 14, 22, 0.35);
  --shadow-lg: 0 40px 90px -40px rgba(10, 14, 22, 0.55);
  --shadow-gold: 0 24px 60px -30px rgba(185, 155, 94, 0.55);

  /* ---------- Motion ------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-med: 420ms;
  --dur-slow: 760ms;

  /* ---------- Z-index ------------------------------------------------------ */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
}