/* ============================================================
   STERLING HARTWELL — DESIGN TOKENS
   Version 2: Dark tonal, modern merchant bank aesthetic
   ============================================================ */

:root {
  /* Colors — Dark tonal palette */
  --bg-deep:     #201F1E;  /* deepest layer */
  --bg:          #3A3A38;  /* primary surface, dominant field */
  --bg-alt:      #47443F;  /* secondary surface, cards */
  --bg-hover:    #524E48;  /* hover state for cards */

  --text:        #C4C4C0;  /* primary text on dark */
  --text-dim:    #8C8B87;  /* muted text, large/caption only */
  --text-accent: #8CA8B8;  /* the one accent, interactive states only */

  --border:      #55534E;  /* hairline dividers */

  --focus:       #8CA8B8;  /* focus outline */

  /* Semantic aliases */
  --accent:      var(--text-accent);
  --success:     #6B8E6B;
  --error:       #B86B6B;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* Fluid type scale */
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.375rem;  /* 22px */
  --fs-2xl:  1.75rem;   /* 28px */
  --fs-3xl:  2.5rem;    /* 40px */
  --fs-4xl:  3.5rem;    /* 56px */
  --fs-5xl:  5rem;      /* 80px */

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.2em;

  /* Spacing */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-8:  3rem;     /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-12: 5rem;     /* 80px */
  --space-16: 8rem;     /* 128px */

  /* Layout */
  --container-max: 1100px;
  --container-padding: var(--space-6);
  --header-height: 80px;

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index */
  --z-header: 100;
  --z-modal: 200;
  --z-toast: 300;
}