/* ==========================================================================
   fin.associates — DESIGN TOKENS
   Applied from the "fin. associates Design System" (Claude Design), 2026-08-06.
   Source of truth: guidelines/brand-spec.md + tokens/{colors,typography,spacing}.css
   --------------------------------------------------------------------------
   Both naming schemes are declared:
     --charcoal / --teal / --serif ...   the brand's own names, so component code
                                         copied from the design system works as-is
     --fa-*                              the site's semantic names, aliased onto them
   Change brand values HERE ONLY. site.css references --fa-* and never a literal.
   ========================================================================== */

:root {
  /* === BRAND PALETTE — four colours, no more ============================= */
  --charcoal:   #1F2933;   /* primary text, dark grounds */
  --teal:       #0097A7;   /* the dot, hairlines, arcs, small labels ONLY */
  --grey:       #50555A;   /* secondary text */
  --warm-white: #FAFAF8;   /* dominant background (~62% of any page) */

  --text-primary:        var(--charcoal);
  --text-secondary:      var(--grey);
  --text-accent:         var(--teal);
  --surface-page:        var(--warm-white);
  --surface-dark:        var(--charcoal);
  --text-on-dark:        var(--warm-white);
  --text-on-dark-muted:  rgba(250, 250, 248, 0.75);
  --text-on-dark-faint:  rgba(250, 250, 248, 0.45);

  --hairline:         rgba(31, 41, 51, 0.14);
  --hairline-strong:  rgba(31, 41, 51, 0.15);
  --hairline-on-dark: rgba(250, 250, 248, 0.14);
  --arc-stroke:       rgba(0, 151, 167, 0.3);
  --rule-accent:      var(--teal);
  --image-fade: linear-gradient(90deg, #FAFAF8 0%, rgba(250,250,248,0.92) 22%,
                                rgba(250,250,248,0.4) 48%, rgba(250,250,248,0) 72%);

  /* === TYPOGRAPHY ======================================================== */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: var(--serif);
  --font-body:    var(--sans);

  --wordmark-tracking: 0.26em;
  --label-tracking:    0.24em;

  /* === SPACING — generous, editorial ===================================== */
  --space-xs: 8px;  --space-s: 16px; --space-m: 28px;
  --space-l:  44px; --space-xl: 72px;
  --section-pad-y: 150px;
  --page-margin:   8vw;
  --rule-w-s: 34px; --rule-w-m: 48px; --rule-w-l: 64px; --rule-h: 2px;
  --radius: 0;                                   /* nothing is rounded but the dot */
  --shadow-card:      0 10px 30px rgba(31, 41, 51, 0.08);
  --shadow-card-dark: 0 10px 30px rgba(31, 41, 51, 0.12);

  /* ======================================================================= */
  /* === SEMANTIC ALIASES used by site.css ================================= */
  /* ======================================================================= */

  --fa-ink:          var(--charcoal);
  --fa-ink-strong:   var(--charcoal);   /* charcoal, never black */
  --fa-ink-muted:    var(--grey);
  --fa-ink-inverse:  var(--warm-white);

  --fa-bg:           var(--warm-white);
  --fa-surface:      var(--warm-white);
  --fa-surface-deep: var(--charcoal);
  --fa-line:         var(--hairline);
  --fa-line-strong:  var(--hairline-strong);

  /* Teal is an ACCENT ONLY. It is never a background and never body copy —
     it appears as the dot, hairline rules, arcs, and small tracked labels.
     Primary actions therefore use charcoal, not teal. */
  --fa-accent:       var(--teal);
  --fa-accent-hover: #007A88;
  --fa-accent-ink:   var(--warm-white);
  --fa-action:       var(--charcoal);
  --fa-action-hover: #101820;
  --fa-focus:        var(--teal);

  /* Fluid type. Display 56–120px serif 500 lh 1.1; heading 24–34px;
     body 14–17px sans 300 lh 1.7; labels 11–13px sans 500 tracked 0.24em. */
  --fa-text-xs:   0.75rem;     /* 12px — labels */
  --fa-text-sm:   0.875rem;    /* 14px */
  --fa-text-base: 1rem;        /* 16px — body */
  --fa-text-lg:   1.0625rem;
  --fa-text-xl:   clamp(1.35rem, 1.05rem + 1.1vw, 1.7rem);
  --fa-text-2xl:  clamp(1.6rem, 1.2rem + 1.9vw, 2.125rem);   /* heading 24–34px */
  --fa-text-3xl:  clamp(2rem, 1.3rem + 3.2vw, 2.75rem);
  --fa-text-4xl:  clamp(2.75rem, 1.4rem + 6vw, 6rem);        /* display 56–120px */

  --fa-leading-tight: 1.1;
  --fa-leading-snug:  1.35;
  --fa-leading-body:  1.7;
  --fa-tracking-tight: 0;      /* the serif is NEVER letterspaced */
  --fa-tracking-wide:  var(--label-tracking);

  --fa-weight-display: 500;
  --fa-weight-heading: 500;
  --fa-weight-label:   500;
  --fa-weight-body:    300;

  --fa-space-1: 4px;  --fa-space-2: var(--space-xs); --fa-space-3: 12px;
  --fa-space-4: var(--space-s); --fa-space-5: var(--space-m);
  --fa-space-6: var(--space-l); --fa-space-7: var(--space-xl);
  --fa-space-8: 100px; --fa-space-9: var(--section-pad-y);

  --fa-band-y: clamp(72px, 9vw, var(--section-pad-y));
  --fa-wrap:        1240px;
  --fa-wrap-narrow: 680px;
  --fa-gutter:      var(--page-margin);

  --fa-radius-sm: 0; --fa-radius: 0; --fa-radius-lg: 0;
  --fa-shadow-sm: none;
  --fa-shadow:    var(--shadow-card);
  --fa-shadow-lg: var(--shadow-card-dark);
  --fa-transition: 200ms ease;
}

/* The brand specifies a single light treatment on warm white. No dark-mode
   variant is defined deliberately — inverting it would break the four-colour
   rule and the ~62% warm-white proportion the identity depends on. Dark grounds
   are expressed through charcoal bands, not a theme. */