/* ============================================================================
   Skopyra Design System — tokens
   Source of truth: Skopyra Design System package (colors, typography, spacing,
   radius, shadows, fonts). Values copied verbatim from the bound design system.
   Graphite & mint. Space Grotesk · IBM Plex Sans · IBM Plex Mono.
   ========================================================================== */

/* ---- Fonts (fully self-hosted, first-party ../fonts/*.woff2, SIL OFL) ------
   No third-party requests: all 9 faces ship in this repo under /fonts.
   Space Grotesk 400/500/600/700 · IBM Plex Sans 400/500/600 · IBM Plex Mono 400/500. */
/* Space Grotesk — display / wordmark / headings */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/space-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); }
/* IBM Plex Sans — UI / body */
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
/* IBM Plex Mono — micro-labels / kickers */
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  /* ---- Colour — base palette ---- */
  --sk-graphite: #2B2F33;
  --sk-ink: #17191C;
  --sk-mint: #A6D6C8;
  --sk-mint-deep: #3A9B7E;   /* accessible mint for text/icons on light */
  --sk-slate: #7A7F87;
  --sk-mist: #F5F7F6;
  --sk-white: #FFFFFF;

  /* Graphite scale (cool grey ramp) */
  --sk-gray-950: #17191C;
  --sk-gray-900: #1F2226;
  --sk-gray-800: #2B2F33;
  --sk-gray-700: #3A3F44;
  --sk-gray-600: #565B61;
  --sk-gray-500: #7A7F87;
  --sk-gray-400: #9BA1A5;
  --sk-gray-300: #C4CBC7;
  --sk-gray-200: #E3E7E4;
  --sk-gray-100: #EEF1EF;
  --sk-gray-50:  #F5F7F6;

  /* Mint scale */
  --sk-mint-700: #2F7E66;
  --sk-mint-600: #3A9B7E;
  --sk-mint-500: #6FBFA6;
  --sk-mint-400: #A6D6C8;
  --sk-mint-200: #D2EAE1;
  --sk-mint-100: #EAF5F0;

  /* Semantic — text */
  --text-strong: var(--sk-gray-800);
  --text-body: var(--sk-gray-600);
  --text-muted: var(--sk-gray-500);
  --text-subtle: var(--sk-gray-400);
  --text-on-dark: #F1F4F2;
  --text-on-dark-muted: #9BA1A5;
  --text-accent: var(--sk-mint-deep);

  /* Semantic — surface */
  --surface-page: var(--sk-mist);
  --surface-card: var(--sk-white);
  --surface-sunken: var(--sk-mist);
  --surface-dark: var(--sk-ink);
  --surface-dark-raised: var(--sk-gray-900);

  /* Semantic — border */
  --border-subtle: var(--sk-gray-200);
  --border-strong: var(--sk-gray-300);
  --border-dark: #2C3034;

  /* Semantic — accent / interactive */
  --accent: var(--sk-mint-400);
  --accent-strong: var(--sk-mint-deep);
  --accent-contrast: var(--sk-ink);   /* text/icon on a mint fill */
  --focus-ring: var(--sk-mint-deep);

  /* Status */
  --status-positive: #3A9B7E;
  --status-negative: #C05A54;
  --status-warning: #C79A6B;
  --status-info: #6E8BA8;

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 40px;
  --text-5xl: 56px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.15em;   /* wordmark caps */
  --tracking-mono: 0.18em;    /* mono micro-labels / kickers */

  /* ---- Spacing (4px base) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ---- Radius ---- */
  --radius-xs: 5px;
  --radius-sm: 7px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* ---- Shadows (restrained, cool-toned) ---- */
  --shadow-xs: 0 1px 2px rgba(23, 25, 28, 0.05);
  --shadow-sm: 0 1px 3px rgba(23, 25, 28, 0.07);
  --shadow-md: 0 4px 14px rgba(23, 25, 28, 0.08);
  --shadow-lg: 0 12px 32px rgba(23, 25, 28, 0.12);
  --shadow-xl: 0 30px 80px rgba(20, 25, 30, 0.18);
  --shadow-focus: 0 0 0 3px rgba(58, 155, 126, 0.28);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}