/* =============================================================================
   PRIMITIVE TOKENS — eMTe Theme 2026
   Foundation design tokens: font faces, families, scale, spacing, radius, etc.
   Consumed by colours.css → style.css.
   ============================================================================= */

/* ── Font Faces ────────────────────────────────────────────────────────────── */
/*
  src order: WOFF2 first (best compression, iOS 13+, Android 5+, all modern
  browsers), TTF as fallback for older environments. iOS Safari requires WOFF2
  to reliably load custom fonts — TTF-only declarations silently fall back to
  system fonts on some iOS/iPadOS versions.

  IBM Plex Sans filenames contain commas (variable font axis notation). These
  are safe inside quoted url() strings per the CSS spec and resolve correctly
  on the server with the literal comma in the path.
*/

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('assets/fonts/IBM_Plex_Sans/IBMPlexSans-VariableFont_wdth,wght.woff2') format('woff2'),
       url('assets/fonts/IBM_Plex_Sans/IBMPlexSans-VariableFont_wdth,wght.ttf')   format('truetype');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic-VariableFont_wdth,wght.woff2') format('woff2'),
       url('assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic-VariableFont_wdth,wght.ttf')   format('truetype');
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.woff2') format('woff2'),
       url('assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf')   format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.woff2') format('woff2'),
       url('assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf')   format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.woff2') format('woff2'),
       url('assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf')   format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.woff2') format('woff2'),
       url('assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf')   format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.woff2') format('woff2'),
       url('assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf')   format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('assets/fonts/Roboto_Slab/RobotoSlab-VariableFont_wght.woff2') format('woff2'),
       url('assets/fonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf')   format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Root Tokens ────────────────────────────────────────────────────────────── */
:root {

  /* ── Font Families ── */
  --font-family-display: 'Roboto Slab', Georgia, Cambria, 'Times New Roman', serif;
  --font-family-sans:    'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-serif:   'Roboto Slab', Georgia, Cambria, 'Times New Roman', serif;
  --font-family-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* ── Semantic Type Roles ──
     Use these aliases in component styles to signal intent rather than typeface.
     --type-heading  → Roboto Slab   — all headings, display text, page titles, post titles
     --type-body     → IBM Plex Sans — paragraphs, lists, body copy, UI controls
     --type-mono     → IBM Plex Mono — captions, dates, metadata, code, small labels
  */
  --type-heading: var(--font-family-display);
  --type-body:    var(--font-family-sans);
  --type-mono:    var(--font-family-mono);

  /* ── Font Sizes ── */
  --font-size-3xs: 0.625rem;  /* 10px */
  --font-size-2xs: 0.75rem;   /* 12px */
  --font-size-xs:  0.875rem;  /* 14px */
  --font-size-sm:  1rem;      /* 16px */
  --font-size-md:  1.125rem;  /* 18px */
  --font-size-lg:  1.25rem;   /* 20px */
  --font-size-xl:  1.5rem;    /* 24px */
  --font-size-2xl: 1.875rem;  /* 30px */
  --font-size-3xl: 2.25rem;   /* 36px */
  --font-size-4xl: 3rem;      /* 48px */
  --font-size-5xl: 3.75rem;   /* 60px */
  --font-size-6xl: 4.5rem;    /* 72px */

  /* ── Line Heights ── */
  --line-height-2xs: 1;
  --line-height-xs:  1.1;
  --line-height-sm:  1.2;
  --line-height-md:  1.4;
  --line-height-lg:  1.5;
  --line-height-xl:  1.6;
  --line-height-2xl: 1.8;

  /* ── Letter Spacing ── */
  --letter-spacing-tight:   -0.03em;
  --letter-spacing-snug:    -0.015em;
  --letter-spacing-normal:   0;
  --letter-spacing-wide:     0.015em;
  --letter-spacing-wider:    0.03em;
  --letter-spacing-widest:   0.06em;

  /* ── Font Weights ── */
  --font-weight-thin:        100;
  --font-weight-extra-light: 200;
  --font-weight-light:       300;
  --font-weight-regular:     400;
  --font-weight-medium:      500;
  --font-weight-semi-bold:   600;
  --font-weight-bold:        700;
  --font-weight-extra-bold:  800;
  --font-weight-black:       900;

  /* ── Spacing ── */
  --space-3xs: 0.125rem;  /* 2px  */
  --space-2xs: 0.25rem;   /* 4px  */
  --space-xs:  0.5rem;    /* 8px  */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */
  --space-5xl: 8rem;      /* 128px */

  /* ── Size (width / height / icons) ── */
  --size-3xs: 0.5rem;    /* 8px  */
  --size-2xs: 0.75rem;   /* 12px */
  --size-xs:  1rem;      /* 16px */
  --size-sm:  1.5rem;    /* 24px */
  --size-md:  2rem;      /* 32px */
  --size-lg:  2.5rem;    /* 40px */
  --size-xl:  3rem;      /* 48px */
  --size-2xl: 4rem;      /* 64px */
  --size-3xl: 6rem;      /* 96px */
  --size-4xl: 8rem;      /* 128px */
  --size-5xl: 12rem;     /* 192px */

  /* ── Border Radius ── */
  --radius-none: 0;
  --radius-2xs:  0.125rem;  /* 2px  */
  --radius-xs:   0.25rem;   /* 4px  */
  --radius-sm:   0.375rem;  /* 6px  */
  --radius-md:   0.5rem;    /* 8px  */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ── Border Widths ── */
  --border-width-none: 0;
  --border-width-xs:   1px;
  --border-width-sm:   2px;
  --border-width-md:   3px;
  --border-width-lg:   4px;

  /* ── Container / Layout ── */
  --container-2xs:  20rem;   /* 320px  */
  --container-xs:   24rem;   /* 384px  */
  --container-sm:   30rem;   /* 480px  */
  --container-md:   40rem;   /* 640px  */
  --container-lg:   48rem;   /* 768px  */
  --container-xl:   64rem;   /* 1024px */
  --container-2xl:  80rem;   /* 1280px */
  --container-full: 100%;

  /* ── Z-Index ── */
  --z-base:     0;
  --z-above:    1;
  --z-header:   100;
  --z-dropdown: 200;
  --z-sticky:   300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;
  --z-tooltip:  700;
  --z-max:      999999;  /* skip link and absolutely-topmost layers */

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(26, 25, 24, 0.06);
  --shadow-md: 0 2px 8px rgba(26, 25, 24, 0.08);
  --shadow-lg: 0 4px 24px rgba(26, 25, 24, 0.10);
  --shadow-xl: 0 8px 40px rgba(26, 25, 24, 0.12);

  /* ── Motion ── */
  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-normal:  200ms;
  --duration-slow:    300ms;
  --duration-slower:  400ms;

  --easing-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --easing-emphasised: cubic-bezier(0.2, 0, 0, 1.2);
  --easing-decelerate: cubic-bezier(0, 0, 0, 1);
  --easing-accelerate: cubic-bezier(0.3, 0, 1, 1);
}