/* ============================================
   DESIGN TOKENS — Editorial / Minimal
   ============================================ */

/* Satoshi variable font — one file covers the full 300–900 weight range,
   so every --weight-* token below renders as a true static weight
   (not a browser-synthesized fake bold). */
@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/Satoshi-Variable.woff2') format('woff2-variations'),
       url('../assets/fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/Satoshi-VariableItalic.woff2') format('woff2-variations'),
       url('../assets/fonts/Satoshi-VariableItalic.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- Color Tokens --- */
  --color-black: #1A1A1A;
  --color-black-soft: #2C2C2C;
  --color-gray-900: #333333;
  --color-gray-800: #444444;
  --color-gray-700: #555555;
  --color-gray-600: #777777;
  --color-gray-500: #999999;
  --color-gray-400: #AAAAAA;
  --color-gray-300: #C4C4C4;
  --color-gray-200: #DCDCDC;
  --color-gray-100: #ECECEC;
  --color-gray-50: #FAFAFA;
  --color-white: #FFFFFF;
  --color-pure-white: #FFFFFF;
  --color-accent: #C8553A;

  /* Semantic */
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-gray-50);
  --color-text: var(--color-black);
  --color-text-secondary: #767676;
  --color-text-tertiary: var(--color-gray-400);
  --color-border: var(--color-gray-200);
  --color-border-light: var(--color-gray-100);

  /* --- Typography Tokens --- */
  --font-heading: 'Satoshi', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Satoshi', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  /* Scale — modular */
  --text-xs: 1rem;         /* 16px — unified body text size */
  --text-sm: 1rem;         /* 16px — unified body text size */
  --text-base: 1rem;       /* 16px — unified body text size */
  --text-lg: 1rem;         /* 16px — unified body text size */
  --text-xl: 1.375rem;     /* 22px */
  --text-2xl: 1.75rem;     /* 28px */
  --text-3xl: 2.25rem;     /* 36px */
  --text-4xl: 3rem;        /* 48px */
  --text-5xl: 4rem;        /* 64px */
  --text-6xl: 5.5rem;      /* 88px */
  --text-7xl: 7.5rem;      /* 120px */

  /* Semantic type styles */
  --type-display-size:    clamp(100px, 14vw, 220px);
  --type-display-leading: 0.95;
  --type-display-tracking: -0.02em;

  --type-h1-size:    clamp(40px, 5vw, 64px);
  --type-h1-leading: 1;
  --type-h1-tracking: -0.015em;

  --type-h2-size:    clamp(24px, 3vw, 32px);
  --type-h2-leading: 1.2;

  --type-body-size:    16px;
  --type-body-leading: 1.5;

  --type-label-size:    12px;
  --type-label-leading: 1.4;
  --type-label-tracking: 0.04em;

  /* Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line height */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Tracking */
  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.14em;

  /* --- Spacing (numeric scale) --- */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* --- Spacing (semantic scale) --- */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  120px;
  --space-xxl: 200px;

  /* --- Border --- */
  --radius-none: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --border-hairline: 1px solid var(--color-border);
  --border-dark: 1px solid var(--color-black);

  /* --- Shadow (minimal) --- */
  --shadow-subtle: 0 1px 3px rgba(0,0,0,0.04);

  /* --- Transitions --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;

  /* --- Layout --- */
  --header-height: 45px; /* 12px + nav text (~21px) + 12px, measured */
  --header-height-mobile: 64px;
  --container-max: none;                              /* full width */
  --container-narrow: 900px;
  --grid-gutter: clamp(1.25rem, 2vw, 2rem);           /* 20 → 32px */
  --page-margin: 12px;

  /* --- Z-index --- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}