/* ============================================================
   SENTES-BIR DESIGN SYSTEM — CSS Tokens
   colors_and_type.css
   ============================================================ */

/* ── Fonts ── */
@font-face { font-family:'DIN'; font-weight:700; src:url('_ds/sentes-bir-design-system-019de4ab-36fd-77f1-adff-1eba0815ee5a/fonts/DINBOLD.TTF') format('truetype'); }
@font-face { font-family:'DIN'; font-weight:400; src:url('_ds/sentes-bir-design-system-019de4ab-36fd-77f1-adff-1eba0815ee5a/fonts/DINREGULAR.TTF') format('truetype'); }
@font-face { font-family:'Roboto'; font-weight:300; src:url('_ds/sentes-bir-design-system-019de4ab-36fd-77f1-adff-1eba0815ee5a/fonts/Roboto-Light.ttf') format('truetype'); }
@font-face { font-family:'Roboto'; font-weight:400; src:url('_ds/sentes-bir-design-system-019de4ab-36fd-77f1-adff-1eba0815ee5a/fonts/Roboto-Regular.ttf') format('truetype'); }
@font-face { font-family:'Roboto'; font-weight:500; src:url('_ds/sentes-bir-design-system-019de4ab-36fd-77f1-adff-1eba0815ee5a/fonts/Roboto-Medium.ttf') format('truetype'); }
@font-face { font-family:'Roboto'; font-weight:700; src:url('_ds/sentes-bir-design-system-019de4ab-36fd-77f1-adff-1eba0815ee5a/fonts/Roboto-Bold.ttf') format('truetype'); }

/* ── Base Color Tokens ── */
:root {
  /* Brand primaries */
  --color-primary:       #004F63;   /* Deep teal — primary brand, PURESPHERE */
  --color-primary-dark:  #003547;   /* Darker teal for hover/active */
  --color-primary-light: #006E8A;   /* Lighter teal for subtle fills */
  --color-accent:        #00A7C1;   /* Bright teal — FORTECOAT, secondary CTA */
  --color-accent-dark:   #008BA3;   /* Hover state for accent */
  --color-red:           #E42113;   /* Crimson — FORTEBRAZE, footer, alerts */
  --color-red-dark:      #C01B0F;   /* Hover for red elements */

  /* Neutrals */
  --color-black:         #1D1D1B;   /* Near-black — product cards, SENTES ADDITIVE */
  --color-dark:          #333333;   /* Body text */
  --color-mid:           #666666;   /* Secondary text */
  --color-muted:         #999999;   /* Placeholder, captions */
  --color-border:        #D0D0D0;   /* Borders, dividers */
  --color-surface:       #F5F5F5;   /* Light backgrounds, cards */
  --color-surface-mid:   #E3E3E3;   /* News section background */
  --color-white:         #FFFFFF;

  /* Brand-specific semantic colors */
  --color-puresphere:    #004F63;   /* = primary */
  --color-fortecoat:     #00A7C1;   /* = accent */
  --color-fortebraze:    #E42113;   /* = red */
  --color-additive:      #1D1D1B;   /* = black */

  /* ── Semantic UI Colors ── */
  --color-fg-primary:    var(--color-dark);
  --color-fg-secondary:  var(--color-mid);
  --color-fg-inverted:   var(--color-white);
  --color-bg-page:       var(--color-white);
  --color-bg-surface:    var(--color-surface);
  --color-bg-dark:       var(--color-black);
  --color-bg-primary:    var(--color-primary);
  --color-bg-red:        var(--color-red);
  --color-link:          var(--color-primary);
  --color-link-hover:    var(--color-accent);
  --color-cta:           var(--color-red);
  --color-cta-hover:     var(--color-red-dark);
  --color-focus:         var(--color-accent);

  /* ── Typography ── */
  --font-display:        'DIN', 'Arial Narrow', sans-serif;
  --font-body:           'Roboto', 'Arial', sans-serif;

  /* Font weights */
  --fw-light:   300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-black:   900; /* @kind font */

  /* Type scale — display (DIN) */
  --text-hero:   clamp(48px, 6vw, 80px);
  --text-h1:     clamp(36px, 4.5vw, 56px);
  --text-h2:     clamp(28px, 3.2vw, 40px);
  --text-h3:     clamp(22px, 2.4vw, 30px);
  --text-h4:     clamp(18px, 2vw, 24px);

  /* Type scale — body (Roboto) */
  --text-xl:     20px;
  --text-lg:     18px;
  --text-base:   16px;
  --text-sm:     14px;
  --text-xs:     12px;
  --text-2xs:    11px;

  /* Line heights */
  --lh-tight:    1.15; /* @kind other */
  --lh-heading:  1.2; /* @kind other */
  --lh-snug:     1.4; /* @kind other */
  --lh-body:     1.65; /* @kind other */
  --lh-loose:    1.85; /* @kind other */

  /* Letter spacing */
  --ls-tight:    -0.02em; /* @kind other */
  --ls-normal:   0; /* @kind other */
  --ls-wide:     0.04em; /* @kind other */
  --ls-wider:    0.08em; /* @kind other */
  --ls-widest:   0.12em; /* @kind other */

  /* ── Spacing ── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ── Layout ── */
  --container-max:  1280px; /* @kind other */
  --container-pad:  clamp(16px, 4vw, 64px); /* @kind spacing */
  --section-v:      var(--sp-20); /* @kind spacing */

  /* ── Borders & Radius ── */
  --radius:         0px;    /* Industrial — square corners everywhere @kind radius */
  --radius-sm:      0px; /* @kind radius */
  --border-width:   2px; /* @kind other */
  --border-color:   var(--color-border);
  --border-dark:    2px solid var(--color-dark); /* @kind other */
  --border-red:     2px solid var(--color-red); /* @kind other */
  --border-white:   2px solid var(--color-white); /* @kind other */

  /* ── Shadows ── */
  --shadow-none:    none;
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.12);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.18);

  /* ── Transitions ── */
  --transition-fast:    0.15s ease-out; /* @kind other */
  --transition-base:    0.25s ease-out; /* @kind other */
  --transition-slow:    0.4s ease-out; /* @kind other */

  /* ── Z-index ── */
  --z-base:     1; /* @kind other */
  --z-dropdown: 100; /* @kind other */
  --z-sticky:   200; /* @kind other */
  --z-modal:    1000; /* @kind other */
  --z-overlay:  2000; /* @kind other */
}

/* ── Semantic Type Classes ── */
.type-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

h1, .type-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
}

h2, .type-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
}

h3, .type-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--text-h3);
  line-height: var(--lh-snug);
}

h4, .type-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-h4);
  line-height: var(--lh-snug);
}

p, .type-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-fg-primary);
}

.type-body-lg {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-lg);
  line-height: var(--lh-body);
}

.type-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--color-fg-secondary);
}

.type-label {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

.type-overline {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-fg-secondary);
}

/* ── Utility: Brand Text Colors ── */
.text-primary   { color: var(--color-primary); }
.text-accent    { color: var(--color-accent); }
.text-red       { color: var(--color-red); }
.text-dark      { color: var(--color-dark); }
.text-muted     { color: var(--color-muted); }
.text-white     { color: var(--color-white); }

/* ── Utility: Brand BG Colors ── */
.bg-primary     { background-color: var(--color-primary); }
.bg-accent      { background-color: var(--color-accent); }
.bg-red         { background-color: var(--color-red); }
.bg-dark        { background-color: var(--color-black); }
.bg-surface     { background-color: var(--color-surface); }
.bg-white       { background-color: var(--color-white); }