/* ==========================================================
   SoftwareMX — Design Tokens (Option A)
   Space Grotesk (Display 600/700) + DM Sans (UI 400/500)
   Brand DNA: green structural bar (#25D366) + compact
   geometric monogram + dual-tone dark+green.
   Load this file BEFORE main.css.
   ========================================================== */

/* ----------------------------------------------------------
   @font-face — Local + Google Fonts woff2 fallback
   font-display: swap ensures text remains visible during load.
   Local files: assets/webfonts/*.woff2 (downloaded next step)
   Fallback URLs point to Google Fonts woff2 (fonts.gstatic.com)
   ---------------------------------------------------------- */

/* Space Grotesk — 600 SemiBold */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    local('Space Grotesk SemiBold'),
    local('SpaceGrotesk-SemiBold'),
    url('../webfonts/SpaceGrotesk-600.woff2') format('woff2'),
    url('https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk — 700 Bold */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local('Space Grotesk Bold'),
    local('SpaceGrotesk-Bold'),
    url('../webfonts/SpaceGrotesk-700.woff2') format('woff2'),
    url('https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPbf4C-Q.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Sans — 400 Regular */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local('DM Sans Regular'),
    local('DMSans-Regular'),
    url('../webfonts/DMSans-400.woff2') format('woff2'),
    url('https://fonts.gstatic.com/s/dmsans/v14/rP2Hp2ywxg089UriCZOIHQ.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Sans — 500 Medium */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:
    local('DM Sans Medium'),
    local('DMSans-Medium'),
    url('../webfonts/DMSans-500.woff2') format('woff2'),
    url('https://fonts.gstatic.com/s/dmsans/v14/rP2Cp2ywxg089UriAWCrCBamCw.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------
   CSS Custom Properties — Brand Token System
   ---------------------------------------------------------- */
:root {
  /* Brand — green structural bar DNA */
  --brand: #25D366;
  --brand-600: #1DA851;
  --brand-700: #128C7E;
  --brand-bg: #0D3B21;
  --brand-blue: #2563EB;
  --brand-blue-dark: #1E40AF;
  --brand-blue-light: #93C5FD;
  --brand-blue-glow: 0 0 24px rgba(37, 99, 235, 0.35), 0 0 48px rgba(37, 99, 235, 0.15);

  /* Surfaces (dark theme, Landed base #1C1D26) */
  --surface: #1C1D26;
  --surface-elevated: #232430;
  --surface-overlay: #2A2C3A;

  /* Text + lines */
  --text: #FFFFFF;
  --text-muted: rgba(255, 255, 255, 0.65);
  --text-faint: rgba(255, 255, 255, 0.45);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.18);

  /* Spacing scale (px) */
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  /* Alias for convenience */
  --space-xs: var(--space-4);
  --space-sm: var(--space-8);
  --space-md: var(--space-16);
  --space-lg: var(--space-24);
  --space-xl: var(--space-32);
  --space-2xl: var(--space-48);
  --space-3xl: var(--space-64);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.32), 0 1px 4px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.42), 0 4px 12px rgba(0, 0, 0, 0.28);
  --shadow-glow: 0 0 24px rgba(37, 211, 102, 0.35), 0 0 48px rgba(37, 211, 102, 0.15);

  /* Transitions */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fast: 150ms;
  --base: 250ms;
  --slow: 400ms;

  /* Typography — font stacks */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-ui: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  /* Type scale (fluid where useful) */
  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.25rem;    /* 20px */
  --fs-xl: 1.5rem;     /* 24px */
  --fs-2xl: 1.875rem;  /* 30px */
  --fs-3xl: 2.25rem;   /* 36px */
  --fs-4xl: 3rem;      /* 48px */
  --fs-display: clamp(2rem, 5vw, 3.5rem);

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;

  /* Letter spacing for display */
  --tracking-display: -0.02em;
  --tracking-ui: -0.01em;
}

/* ----------------------------------------------------------
   Base typography — wired to tokens
   Intended to be loaded before main.css so main.css can rely
   on these variables without redefining font-family.
   ---------------------------------------------------------- */
html {
  color-scheme: dark;
}

body {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.heading-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--text);
}

h1 { font-size: var(--fs-display); font-weight: 700; }
h2 { font-size: var(--fs-3xl); font-weight: 700; }
h3 { font-size: var(--fs-2xl); font-weight: 600; }
h4 { font-size: var(--fs-xl);  font-weight: 600; }
h5 { font-size: var(--fs-lg);  font-weight: 600; }
h6 { font-size: var(--fs-base); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* UI emphasis uses DM Sans Medium */
strong, b, .text-strong {
  font-weight: 500;
  color: var(--text);
}

/* Selection uses brand */
::selection {
  background: var(--brand);
  color: #0D1B12;
}