/**
 * 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 for performance and privacy.
   Current font source: fonts.google.com (Manrope + 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: #F5F6F5;
   --color-surface: #FFFFFF;
   --color-surface-alt: #ECEFEC;

   --color-hairline: #D8DCD9;
   --color-hairline-strong: #B8BDBA;

   /* Dark spread section */
   --color-spread-bg: #1B1D1C;
   --color-spread-text: #F1F3F1;
   --color-spread-muted: #9BA19D;
   --color-spread-hairline: #3A3F3C;

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

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

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

   --font-sans: 'Manrope', 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;

}