/* ============================================================
   Siäpro Machining — Design Tokens
   Drop-in CSS variables for color, type, spacing, motion, etc.
   Load Google Fonts before this file:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Saira:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ----- BRAND ----- */
  --brand-blue:        #257FC1;   /* sampled from logo wordmark      */
  --brand-blue-700:    #1A6BA8;
  --brand-blue-800:    #145589;
  --brand-blue-300:    #6FAEDB;
  --brand-blue-100:    #DBEAF6;

  --signal-orange:     #E8702A;   /* secondary signal — status only  */

  /* ----- ANTHRACITE / NEUTRAL SCALE -----
     Tuned around the logo's #3C3C3C (sits at -700) */
  --anthracite-1000:   #0E0F11;
  --anthracite-900:    #16181B;
  --anthracite-800:    #22252A;
  --anthracite-700:    #3C3C3C;   /* logo "MACHINING" gray           */
  --anthracite-600:    #50545A;
  --anthracite-500:    #6A6E76;
  --anthracite-400:    #8A8E96;
  --anthracite-300:    #B4B7BD;
  --anthracite-200:    #D6D8DC;
  --anthracite-100:    #E9EBEE;
  --anthracite-50:     #F4F5F7;
  --paper:             #FAFAFA;
  --white:             #FFFFFF;

  /* ----- SEMANTIC ----- */
  --success:           #3F8F5F;
  --warning:           #C99327;
  --danger:            #C0392B;
  --info:              var(--brand-blue);

  /* ----- SURFACES ----- */
  --bg-anthracite:     var(--anthracite-1000);
  --bg-anthracite-2:   var(--anthracite-900);
  --bg-paper:          var(--paper);
  --bg-paper-2:        var(--anthracite-50);
  --surface-card-light:var(--white);
  --surface-card-dark: var(--anthracite-900);

  /* ----- FOREGROUNDS ----- */
  --fg-1:              var(--anthracite-1000);   /* primary on light */
  --fg-2:              var(--anthracite-700);    /* secondary        */
  --fg-3:              var(--anthracite-500);    /* tertiary / meta  */
  --fg-disabled:       var(--anthracite-300);

  --fg-on-dark-1:      #F4F5F7;
  --fg-on-dark-2:      #B4B7BD;
  --fg-on-dark-3:      #8A8E96;

  --fg-accent:         var(--brand-blue);
  --fg-link:           var(--brand-blue-700);

  /* ----- BORDERS ----- */
  --border-hairline:   rgba(14,15,17,.10);
  --border-strong:     rgba(14,15,17,.18);
  --border-on-dark:    rgba(255,255,255,.10);
  --border-accent:     var(--brand-blue);

  /* ----- TYPE FAMILIES ----- */
  --font-display: "Saira", "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ----- TYPE WEIGHTS ----- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;

  /* ----- TYPE SCALE (fluid) ----- */
  --fs-eyebrow: .75rem;            /* 12 — uppercase labels    */
  --fs-meta:    .8125rem;          /* 13                       */
  --fs-body-s:  .875rem;           /* 14                       */
  --fs-body:    1rem;              /* 16 — base                */
  --fs-body-l:  1.125rem;          /* 18                       */
  --fs-h6:      1.125rem;          /* 18                       */
  --fs-h5:      1.25rem;           /* 20                       */
  --fs-h4:      1.5rem;            /* 24                       */
  --fs-h3:      clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);  /* 28-36 */
  --fs-h2:      clamp(2rem, 1.4rem + 2.4vw, 2.75rem);      /* 32-44 */
  --fs-h1:      clamp(3rem, 1.6rem + 5vw, 6rem);           /* 48-96 */

  /* ----- LINE-HEIGHTS ----- */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-base:    1.5;
  --lh-loose:   1.65;

  /* ----- TRACKING ----- */
  --tr-display: -0.01em;
  --tr-eyebrow: 0.10em;
  --tr-button:  0;

  /* ----- SPACING (8-pt) ----- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  192px;

  /* ----- LAYOUT ----- */
  --content-max:      1280px;
  --gutter-desktop:   80px;
  --gutter-mobile:    20px;
  --section-y:        var(--space-10);
  --nav-h:            72px;

  /* ----- RADII ----- */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;

  /* ----- SHADOWS ----- */
  --shadow-1: 0 1px 2px rgba(14,15,17,.06);
  --shadow-2: 0 8px 24px -8px rgba(14,15,17,.18);
  --shadow-3: 0 24px 48px -12px rgba(14,15,17,.28);

  /* ----- MOTION ----- */
  --ease-precision: cubic-bezier(.2,.7,.2,1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* ----- THE ANGLED CUT (signature motif) ----- */
  --skew-cut:    -6deg;
  --clip-cut-tl: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px);
}

/* ============================================================
   Base reset for design previews
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
[hidden]              { display: none !important; }
html, body            { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }

/* ============================================================
   Semantic typography classes
   ============================================================ */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
.h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
.h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
.h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
.h5, h5 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

p, .body { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg-2); margin: 0; }
.body-l  { font-size: var(--fs-body-l); line-height: var(--lh-loose); }
.body-s  { font-size: var(--fs-body-s); line-height: var(--lh-base); }
.meta    { font-size: var(--fs-meta); color: var(--fg-3); }

.mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; }
.spec    { font-family: var(--font-mono); font-size: var(--fs-body-s); color: var(--fg-1); font-variant-numeric: tabular-nums lining-nums; }

a, .link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-precision);
}
a:hover, .link:hover { border-bottom-color: currentColor; }

/* ============================================================
   Dark sections invert foregrounds
   ============================================================ */
.on-dark {
  background: var(--bg-anthracite);
  color: var(--fg-on-dark-1);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5 { color: var(--fg-on-dark-1); }
.on-dark p, .on-dark .body { color: var(--fg-on-dark-2); }
.on-dark .meta             { color: var(--fg-on-dark-3); }
.on-dark .eyebrow          { color: var(--fg-on-dark-2); }
.on-dark a, .on-dark .link { color: #8FBCE4; }