/* ============================================================
   MASHINA STUDIO — Design Tokens
   Palette: "Workshop" — industrial, honest, zero purple.
   ============================================================ */

/* --- Local font declarations for instant zero-FOUT rendering --- */
/* Archivo (Headlines 800-900) */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800 900;
  font-display: block;
  src: url('/fonts/archivo-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800 900;
  font-display: block;
  src: url('/fonts/archivo-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Sarabun 400 (Body) */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/fonts/sarabun-400-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/fonts/sarabun-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Sarabun 600 (Semi-bold / strong) */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('/fonts/sarabun-600-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('/fonts/sarabun-600-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 400 (Spec labels, tickers) */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/fonts/ibm-plex-mono-400-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/fonts/ibm-plex-mono-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 500 (Medium mono) */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('/fonts/ibm-plex-mono-500-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('/fonts/ibm-plex-mono-500-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Color: Palette --- */
  --paper:  #F4F1EA;  /* warm off-white background */
  --white:  #FFFFFF;  /* pure white — signal button text */
  --ink:    #141312;  /* near-black text */
  --signal: #C8102E;  /* industrial crimson accent */
  --metal:  #8A8F98;  /* muted steel gray secondary */
  --deep:   #1E1C1A;  /* charcoal for footer/dark sections */

  /* tints & shades derived from palette */
  --paper-2:    #EAE5DA;  /* pressed paper — hover/alt background */
  --ink-2:      #3A3835;  /* softened ink — secondary text */
  --signal-ink: #A00D24;  /* signal on dark backgrounds */
  --line:       #D6D0C2;  /* hairline borders on paper */
  --line-dark:  #3C3935;  /* hairline borders on deep */

  /* --- Typography --- */
  --font-display: "Archivo", sans-serif;   /* headlines, Black 900 */
  --font-body:    "Sarabun", sans-serif;   /* body copy 400/600 */
  --font-mono:    "IBM Plex Mono", monospace; /* spec labels 400/500 */

  --size-h1: clamp(2.125rem, 6vw, 5.5rem);   /* line-height 1.05 */
  --size-h2: clamp(1.625rem, 4.5vw, 2.25rem);  /* line-height 1.15 */
  --size-h3: 1.5rem;                    /* line-height 1.2 */
  --size-body: 1.0625rem;               /* 17px, line-height 1.65 */
  --size-small: 0.875rem;               /* 14px */
  --size-label: 0.8125rem;               /* 13px mono, line-height 1.4, uppercase */

  --lh-tight: 1.05;
  --lh-snug:  1.15;
  --lh-mid:   1.2;
  --lh-body:  1.65;
  --lh-label: 1.4;

  /* --- Spacing scale: 4/8/12/16/20/24/32/40/48/64/80/96 --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* --- Radii: machined, crisp --- */
  --radius: 2px;        /* inputs, buttons */
  --radius-0: 0px;      /* images, cards sit square by default */

  /* --- Motion --- */
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 300ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* --- Layout --- */
  --max-w: 1200px;
  --gutter: clamp(var(--sp-6), 5vw, var(--sp-12));

  /* --- Z-index scale --- */

  --z-nav: 50;

  /* --- Focus ring: signal, always visible --- */
  --focus-ring: 2px solid var(--signal);
}