/* =====================================================================
   Frame Complete — Design Tokens
   Aluminium profiel constructies
   ===================================================================== */

/* ---------- Fonts ---------- */
/* Display + body: Hanken Grotesk  (refined professional grotesque)
   Mono: JetBrains Mono (technical specs / dimensions / part numbers)         */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* =========================================================
     COLOR — Brand
     ========================================================= */
  --fc-orange:        #F1592A;   /* primary brand orange (logo) */
  --fc-orange-600:    #D94B1E;   /* hover / press */
  --fc-orange-700:    #B83C14;   /* deeper accent */
  --fc-orange-100:    #FDE4D8;   /* tint — surfaces, hover wash */
  --fc-orange-50:     #FFF3EC;   /* faintest tint */

  /* =========================================================
     COLOR — Neutrals (aluminium-inspired grayscale)
     ========================================================= */
  --fc-black:         #0A0A0A;   /* primary text */
  --fc-ink:           #1A1A1A;   /* near-black, headings */
  --fc-gray-900:      #2B2B2B;
  --fc-gray-700:      #4A4A4A;
  --fc-gray-500:      #818285;   /* logo subtitle gray */
  --fc-gray-400:      #A8A8AA;
  --fc-gray-300:      #D6D6D8;   /* hairline rules */
  --fc-gray-200:      #E8E8EA;   /* borders, dividers */
  --fc-gray-100:      #F3F3F4;   /* subtle surface */
  --fc-gray-50:       #F8F8F8;   /* page-bg alt */
  --fc-white:         #FFFFFF;

  /* =========================================================
     COLOR — Semantic
     ========================================================= */
  --fg-1:             var(--fc-black);     /* primary text */
  --fg-2:             var(--fc-gray-700);  /* secondary text */
  --fg-3:             var(--fc-gray-500);  /* tertiary / meta */
  --fg-on-orange:     #FFFFFF;
  --fg-accent:        var(--fc-orange);

  --bg-1:             #FFFFFF;             /* page bg */
  --bg-2:             var(--fc-gray-50);   /* alt section bg */
  --bg-3:             var(--fc-gray-100);  /* subtle surface */
  --bg-inverse:       var(--fc-black);

  --border-1:         var(--fc-gray-200);  /* default border */
  --border-2:         var(--fc-gray-300);  /* hairline */
  --border-strong:    var(--fc-black);

  --accent:           var(--fc-orange);
  --accent-hover:     var(--fc-orange-600);
  --accent-press:     var(--fc-orange-700);

  /* Status (industrial signage palette) */
  --success:          #1E8E3E;
  --warning:          #E8A317;
  --danger:           #C62828;
  --info:             #2E5BBA;

  /* =========================================================
     TYPE — Families
     ========================================================= */
  --font-display:     'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:        'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* TYPE — Weights */
  --w-regular:        400;   /* @kind font */
  --w-medium:         500;   /* @kind font */
  --w-semibold:       600;   /* @kind font */
  --w-bold:           700;   /* @kind font */
  --w-extrabold:      800;   /* @kind font */
  --w-black:          900;   /* @kind font */

  /* TYPE — Sizes (modular scale, base 16) */
  --fs-xs:            12px;
  --fs-sm:            14px;
  --fs-base:          16px;
  --fs-md:            18px;
  --fs-lg:            22px;
  --fs-xl:            28px;
  --fs-2xl:           36px;
  --fs-3xl:           48px;
  --fs-4xl:           64px;
  --fs-5xl:           84px;

  /* TYPE — Line heights */
  --lh-tight:         1.05;   /* @kind font */
  --lh-snug:          1.2;    /* @kind font */
  --lh-normal:        1.45;   /* @kind font */
  --lh-relaxed:       1.65;   /* @kind font */

  /* TYPE — Tracking */
  --tr-tight:         -0.02em;  /* @kind font */
  --tr-normal:        0;        /* @kind font */
  --tr-wide:          0.04em;   /* @kind font */
  --tr-wider:         0.08em;   /* @kind font */
  --tr-eyebrow:       0.14em;   /* @kind font */

  /* =========================================================
     SPACING — 4px base grid (industrial / modular)
     ========================================================= */
  --sp-1:             4px;
  --sp-2:             8px;
  --sp-3:             12px;
  --sp-4:             16px;
  --sp-5:             24px;
  --sp-6:             32px;
  --sp-7:             48px;
  --sp-8:             64px;
  --sp-9:             96px;
  --sp-10:            128px;

  /* =========================================================
     RADII — Mostly sharp. Slight rounding only where the logo
     hints at it (the orange tile). Buttons/cards stay square-ish.
     ========================================================= */
  --r-none:           0;        /* @kind radius */
  --r-xs:             2px;
  --r-sm:             4px;
  --r-md:             6px;       /* default — buttons, inputs */
  --r-lg:             10px;      /* cards */
  --r-xl:             16px;      /* large surfaces */
  --r-tile:           22%;       /* logo-tile-style rounding (% of side) */
  --r-full:           999px;

  /* =========================================================
     SHADOWS — restrained, technical. Mostly hairlines.
     ========================================================= */
  --shadow-0:         none;
  --shadow-1:         0 1px 2px rgba(10,10,10,0.06), 0 0 0 1px rgba(10,10,10,0.04);
  --shadow-2:         0 2px 6px rgba(10,10,10,0.08), 0 0 0 1px rgba(10,10,10,0.05);
  --shadow-3:         0 8px 24px rgba(10,10,10,0.10), 0 0 0 1px rgba(10,10,10,0.05);
  --shadow-focus:     0 0 0 3px rgba(241,89,42,0.32);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out:         cubic-bezier(.2,.7,.2,1);  /* @kind other */
  --ease-in-out:      cubic-bezier(.4,0,.2,1);   /* @kind other */
  --dur-fast:         120ms;   /* @kind other */
  --dur-base:         200ms;   /* @kind other */
  --dur-slow:         320ms;   /* @kind other */

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container:        1200px;
  --container-wide:   1440px;
  --gutter:           var(--sp-5);
}

/* =====================================================================
   Semantic element styles
   ===================================================================== */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-normal);
  color: var(--fg-1);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fc-orange);
}

p, .p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0;
}

.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

small, .small {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

/* Industrial-spec inline tag — for part numbers, dimensions */
.spec {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  color: var(--fg-1);
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-1);
}

a {
  color: var(--fc-orange);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fc-orange-600); }

::selection { background: var(--fc-orange); color: var(--fg-on-orange); }