/* =========================================================
   TOKENS : Design primitives — ScaleXReach identity
   Cool-fintech system: deep-slate ink, electric indigo
   accent, gold highlight, editorial Playfair serif.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Palette — ScaleXReach brand (logo pink → coral) */
  --bg:        #FFFFFF;
  --surface:   #FBF7F9;
  --surface-2: #F5EEF2;
  --border:    #F0E4EA;
  --ink:       #14101A;
  --mist:      #6B6478;
  --signal:    #E11A60;    /* brand pink (readable) — primary accent */
  --signal-rgb: 225, 26, 96;
  --signal-bright: #FF2D74;/* vivid logo pink — fills, gradients */
  --ember:     #C2185B;    /* deep pink — hover/active */
  --coral:     #FF8A6B;    /* logo coral end */
  --gold:      #FF8A86;    /* secondary highlight (coral) */
  --gold-rgb:  255, 138, 134;
  --moss:      #3A0E2A;    /* deep plum tile */
  --stone:     #160910;    /* near-black plum — footer / inverted */
  --ink-rgb:   20, 16, 26;
  --muted-dark: #C7AEBB;   /* secondary text on dark surfaces */

  /* Typography families */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', Helvetica, Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;

  /* Type scale */
  --fs-hero:    clamp(2.25rem, 4.5vw, 3.75rem);
  --fs-h1:      clamp(1.75rem, 3vw, 2.5rem);
  --fs-h2:      clamp(1.375rem, 2.2vw, 1.75rem);
  --fs-h3:      1.125rem;
  --fs-body-l:  1.0625rem;
  --fs-body:    0.9375rem;
  --fs-small:   0.8125rem;
  --fs-micro:   0.6875rem;

  /* Leading */
  --lh-hero:  1.04;
  --lh-h:     1.2;
  --lh-body:  1.6;
  --lh-micro: 1.4;

  /* Spacing */
  --gutter:      24px;
  --gutter-m:    16px;
  --container:   1280px;
  --site-max:    1280px;
  --tile-gap:    12px;
  --tile-radius: 24px;
  --tile-pad:    32px;
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;

  /* Elevation scale (cool slate shadows) */
  --shadow-1: 0 1px 2px rgba(20,16,26,0.04), 0 1px 3px rgba(20,16,26,0.06);
  --shadow-2: 0 4px 12px rgba(20,16,26,0.06), 0 2px 6px rgba(20,16,26,0.04);
  --shadow-3: 0 14px 44px rgba(20,16,26,0.10), 0 4px 12px rgba(20,16,26,0.06);
  --shadow-accent: 0 18px 48px rgba(225,26,96,0.18), 0 4px 14px rgba(225,26,96,0.12);

  /* Transitions */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-mid:  280ms;
  --dur-slow: 600ms;

  /* Z layers */
  --z-topbar: 110;
  --z-header: 100;
  --z-overlay: 200;
  --z-cursor:  9999;

  /* Grain */
  --grain-opacity: 0.04;
}

@media (max-width: 768px) {
  :root {
    --gutter: var(--gutter-m);
    --tile-pad: 24px;
  }
}