/**
 * tokens.css
 * CSS custom property design tokens for In Touch Media.
 * All values derive from the locked design brief.
 * Light mode only — no prefers-color-scheme dark block.
 * Import order: tokens → base → layout → motion → components.
 */

/* TODO: self-host woff2 files or upgrade to licensed PP Neue Montreal.
   Current font source: fonts.google.com (Space Grotesk + Open Sans) */

:root {

  /* --------------------------------------------------------------------------
   * Colour palette
   * -------------------------------------------------------------------------- */

  --color-brand-green:        #6FB43A;
  --color-brand-green-hover:  #5FA02F;
  --color-brand-green-soft:   #EAF3DE;

  --color-brand-ink:          #2A2A2A;
  --color-ink-900:            #14140F;
  --color-ink-700:            #2E2E28;
  --color-ink-500:            #5C5C55;
  --color-ink-300:            #8C8C82;

  --color-bg:                 #F6F3EC;
  --color-surface:            #FBFAF5;
  --color-surface-alt:        #EFEBE1;

  --color-hairline:           #D9D4C6;
  --color-hairline-strong:    #B8B2A1;

  /* Dark spread section */
  --color-spread-bg:          #1A1A17;
  --color-spread-text:        #EFEBE1;
  --color-spread-muted:       #9C9689;
  --color-spread-hairline:    #3A3934;

  /* Semantic / status */
  --color-success:            #4E8F2A;
  --color-warning:            #B8791F;
  --color-error:              #B4321F;
  --color-info:               #2F5C8F;

  /* Focus ring */
  --color-focus-ring:         #6FB43A;

  /* --------------------------------------------------------------------------
   * Typography
   * -------------------------------------------------------------------------- */

  --font-sans:  'Space Grotesk', system-ui, -apple-system, sans-serif;

  /* Secondary UI face — used for eyebrows, meta labels, contact details, CTAs.
     Historically a monospace; now Open Sans. Token name kept so the ~20
     existing references stay valid. */
  --font-mono:  'Open Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* Type scale */
  --text-h1:       clamp(48px, 6vw, 88px);
  --text-h2:       clamp(36px, 4.5vw, 60px);
  --text-h3:       clamp(24px, 2.4vw, 32px);
  --text-h4:       clamp(18px, 1.6vw, 22px);
  --text-h5:       clamp(16px, 1.3vw, 18px);
  --text-h6:       14px;
  --text-body-lg:  clamp(18px, 1.4vw, 20px);
  --text-body:     clamp(16px, 1.2vw, 17px);
  --text-body-sm:  clamp(14px, 1vw, 15px);
  --text-meta:     clamp(12px, 0.9vw, 13px);
  --text-eyebrow:  clamp(12px, 0.9vw, 13px);
  --text-mono:     clamp(14px, 1vw, 15px);

  /* Line heights */
  --lh-h1:         1.02;
  --lh-h2:         1.06;
  --lh-h3:         1.15;
  --lh-h4:         1.25;
  --lh-h5:         1.3;
  --lh-body-lg:    1.55;
  --lh-body:       1.6;
  --lh-body-sm:    1.55;
  --lh-meta:       1.4;

  /* Letter spacing */
  --ls-h1:         -0.02em;
  --ls-h2:         -0.015em;
  --ls-h3:         -0.01em;
  --ls-nav:         0.01em;
  --ls-eyebrow:     0.14em;
  --ls-h6:          0.02em;

  /* --------------------------------------------------------------------------
   * Spacing scale (px-based for reference, use as rem in CSS)
   * 4 8 12 16 20 24 32 40 48 64 80 96 120 160
   * -------------------------------------------------------------------------- */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-30:  120px;
  --space-40:  160px;

  /* Section vertical padding */
  --section-py:   clamp(80px, 10vw, 120px);
  --hero-pt:      clamp(96px, 14vw, 160px);
  --hero-pb:      clamp(80px, 10vw, 120px);

  /* --------------------------------------------------------------------------
   * Layout
   * -------------------------------------------------------------------------- */

  --container-max:   1240px;
  --container-pad:   clamp(20px, 4vw, 48px);

  /* Grid */
  --grid-cols-12: repeat(12, 1fr);
  --grid-cols-6:  repeat(6, 1fr);
  --grid-gap:     var(--space-8);

  /* Corner radius */
  --radius-none:  0px;
  --radius-btn:   2px;   /* Primary CTA button only */

  /* --------------------------------------------------------------------------
   * Component heights
   * -------------------------------------------------------------------------- */

  --topbar-height-desktop:   40px;
  --topbar-height-mobile:    44px;
  --header-height-desktop:   88px;
  --header-height-mobile:    72px;
  --tabs-height:             56px;
  --footer-copyright-height: 56px;

  /* --------------------------------------------------------------------------
   * Motion tokens
   * -------------------------------------------------------------------------- */

  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;

  /* --------------------------------------------------------------------------
   * Borders
   * -------------------------------------------------------------------------- */

  --border-width: 1px;
  --border-hairline:        var(--border-width) solid var(--color-hairline);
  --border-hairline-strong: var(--border-width) solid var(--color-hairline-strong);
  --border-green:           var(--border-width) solid var(--color-brand-green);

  /* --------------------------------------------------------------------------
   * Shadows (used sparingly — flat design)
   * -------------------------------------------------------------------------- */

  --shadow-none: none;

}