/* =========================================================================
   TechnoConn DMCC — Brand & Design System v0.1
   Direction: "Field & Datasheet"
   Dark graphite field sections interleaved with light datasheet sections.
   Warm ochre-dust neutrals (not cold navy). One hot accent: flare amber.
   ========================================================================= */

:root{
  /* --- Core surfaces: the field (dark) --- */
  --ink:        #0A0D10;   /* graphite black — primary field surface        */
  --ink-2:      #121619;   /* panel                                          */
  --ink-3:      #171E24;   /* raised panel / input                           */
  --rule:       #262B30;   /* hairline on dark                               */
  --rule-hi:    #3B434A;   /* hairline, emphasised                           */

  /* --- Core surfaces: the datasheet (light) --- */
  --paper:      #EFEDE7;   /* warm off-white, dust-tinted (not cream)        */
  --paper-2:    #E5E2DA;   /* recessed light surface                         */
  --paper-rule: #D2CEC3;   /* hairline on paper                              */

  /* --- Text --- */
  --dust:       #9C968A;   /* muted ochre-grey — secondary on dark           */
  --dust-hi:    #DAD5C9;   /* body on dark                                   */
  --ink-text:   #10151A;   /* body on paper                                  */
  --ink-mute:   #5E625F;   /* secondary on paper                             */

  /* --- Accent (palette A: the flare — brass/amber, not safety orange) --- */
  --accent:     #E9A227;
  --accent-hot: #FFC85C;
  --accent-dim: #7A5714;

  /* Fire is always fire. --flare drives the burner flame in every palette. */
  --flare:      #E9A227;
  --glow:       rgba(233,162,39,.10);

  /* Legacy names kept so every component keeps resolving through the accent. */
  --amber:      var(--accent);
  --amber-hot:  var(--accent-hot);
  --amber-dim:  var(--accent-dim);

  /* --- Status: used ONLY for live/in-service indicators --- */
  --live:       #57C98A;

  /* --- Role tokens ---------------------------------------------------
     These exist because three colours were each doing two different jobs,
     which is fine in one theme and breaks the moment there are two.
       --text-strong  headline weight on the current field surface
       --accent-ink   the accent used as TEXT on the page surface
       --on-accent    text/marks sitting ON an accent fill - always dark,
                      because amber is a light colour in every theme
       --scrim        the wash over a photograph - always dark, because the
                      photographs are dark and a light wash reads as a bug
     ------------------------------------------------------------------- */
  --text-strong: #FFFFFF;
  --accent-ink:  var(--accent);
  --on-accent:   #0A0D10;
  --scrim:       #0A0D10;
  --util-bg:     color-mix(in srgb, #0A0D10 70%, #000);
  --shadow:      rgba(0,0,0,.9);

  color-scheme: dark;

  /* --- Type --- */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --arabic:  "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;

  /* --- Scale (4px base) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Machined, not soft. 2px is the maximum radius in this system. */
  --radius: 2px;
  --shell: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* ============================ base ============================ */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--dust-hi);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  font-feature-settings:"tnum" 0;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; }
a{ color:inherit; }

:focus-visible{
  /* --accent-ink, not --accent: the bright amber is ~2:1 on the light
     surface, which makes keyboard focus effectively invisible there. */
  outline:2px solid var(--accent-ink);
  outline-offset:3px;
}

/* ============================ layout ============================ */

.shell{
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ padding-block:clamp(56px,9vw,120px); }
/* sticky nav clearance for in-page anchors */
[id]{ scroll-margin-top:96px; }
.section--tight{ padding-block:clamp(40px,6vw,72px); }

/* The two worlds this system alternates between */
.field{ background:var(--ink);   color:var(--dust-hi); }
.field-2{ background:var(--ink-2); color:var(--dust-hi); }
.sheet{ background:var(--paper); color:var(--ink-text); }
.sheet-2{ background:var(--paper-2); color:var(--ink-text); }

.sheet a, .sheet-2 a{ color:var(--ink-text); }

/* ============================ type ============================ */

.display{
  font-family:var(--display);
  font-weight:800;
  font-stretch:112%;           /* Archivo variable width axis */
  letter-spacing:-0.03em;
  line-height:0.94;
  margin:0;
  text-wrap:balance;
}
.display--xl{ font-size:clamp(2.35rem, 5.1vw, 4.5rem); }
.display--l { font-size:clamp(2rem, 4vw, 3.4rem); }
.display--m { font-size:clamp(1.5rem, 2.6vw, 2.2rem); font-stretch:105%; letter-spacing:-0.02em; }

.eyebrow{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-ink);
  margin:0 0 var(--s4);
  display:flex; align-items:center; gap:var(--s3);
}
.eyebrow::after{
  content:""; flex:1; height:1px; background:currentColor; opacity:.28;
}
.sheet .eyebrow, .sheet-2 .eyebrow{ color:var(--amber-dim); }

.lede{
  font-size:clamp(1.0625rem,1.5vw,1.25rem);
  line-height:1.6;
  color:var(--dust-hi);
  max-width:62ch;
}
.sheet .lede, .sheet-2 .lede{ color:var(--ink-mute); }

p{ text-wrap:pretty; }

/* Equipment tags, pressures, ratings — the vernacular of this industry */
.tag{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--accent-ink);
  font-feature-settings:"tnum";
}
.tag--mute{ color:var(--dust); }
.sheet .tag--mute, .sheet-2 .tag--mute{ color:var(--ink-mute); }

.num{ font-family:var(--mono); font-feature-settings:"tnum"; letter-spacing:-.01em; }

.hint{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dust);
}
.sheet .hint, .sheet-2 .hint{ color:var(--ink-mute); }

/* ============================ panel ============================ */
/* Registration marks from engineering drawings — not rounded cards. */

.panel{
  position:relative;
  background:var(--ink-2);
  border:1px solid var(--rule);
  padding:var(--s5);
}
.panel::before,
.panel::after{
  content:"";
  position:absolute;
  width:12px; height:12px;
  border:1px solid var(--amber);
  opacity:.7;
  pointer-events:none;
}
.panel::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.panel::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

.sheet .panel, .sheet-2 .panel{
  background:transparent;
  border-color:var(--paper-rule);
}
.sheet .panel::before, .sheet .panel::after,
.sheet-2 .panel::before, .sheet-2 .panel::after{ border-color:var(--amber-dim); opacity:.55; }

/* ============================ buttons ============================ */

.btn{
  display:inline-flex; align-items:center; gap:var(--s3);
  font-family:var(--mono);
  font-size:.75rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none;
  padding:14px 22px;
  border:1px solid var(--amber);
  color:var(--on-accent);
  background:var(--amber);
  border-radius:var(--radius);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{ background:var(--amber-hot); border-color:var(--amber-hot); }

.btn--ghost{
  background:transparent;
  color:var(--dust-hi);
  border-color:var(--rule-hi);
}
.btn--ghost:hover{ background:transparent; border-color:var(--accent-ink); color:var(--accent-ink); }
.sheet .btn--ghost, .sheet-2 .btn--ghost{ color:var(--ink-text); border-color:var(--paper-rule); }
.sheet .btn--ghost:hover, .sheet-2 .btn--ghost:hover{ border-color:var(--amber-dim); color:var(--amber-dim); }

/* ============================ spec table ============================ */
/* Data density is the credibility signal for this audience. */

.spec{
  width:100%;
  border-collapse:collapse;
  font-size:.875rem;
}
.spec th{
  text-align:start;
  font-family:var(--mono);
  font-size:.625rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dust);
  padding:0 var(--s4) var(--s2) 0;
  border-bottom:1px solid var(--rule);
}
.spec td{
  padding:12px var(--s4) 12px 0;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.spec td:last-child, .spec th:last-child{ padding-right:0; }
.spec .v{ font-family:var(--mono); font-feature-settings:"tnum"; color:var(--dust-hi); white-space:nowrap; }

.sheet .spec th, .sheet-2 .spec th{ color:var(--ink-mute); border-color:var(--paper-rule); }
.sheet .spec td, .sheet-2 .spec td{ border-color:var(--paper-rule); }
.sheet .spec .v, .sheet-2 .spec .v{ color:var(--ink-text); }

/* ============================ status dot ============================ */

.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--live);
  display:inline-block;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent);
}

/* ============================ grid helpers ============================ */

.grid{ display:grid; gap:var(--s5); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){
  .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
}

.stack > * + *{ margin-top:var(--s4); }

/* ============================ RTL ============================ */
/* Arabic is a first-class citizen, not a retrofit. */

[dir="rtl"]{ font-family:var(--arabic); }
[dir="rtl"] .display{ font-family:var(--arabic); font-weight:700; letter-spacing:0; line-height:1.2; }
[dir="rtl"] .eyebrow,
[dir="rtl"] .tag,
[dir="rtl"] .hint{ letter-spacing:0; }
[dir="rtl"] .eyebrow::after{ /* rule flips automatically via flex + logical props */ }

/* =========================================================================
   PALETTE B — "Blueprint"
   Anchored on TechnoConn's existing brand blue #365E92. Same structure,
   same type, same components — only the colour family changes.
   The accent does the work the amber did; --flare stays warm because a
   flare is warm, and it is the ONLY warm mark in this palette.
   ========================================================================= */
:root[data-palette="b"]{
  --ink:        #0B1420;
  --ink-2:      #111C2B;
  --ink-3:      #17253A;
  --rule:       #23324A;
  --rule-hi:    #38496A;

  --paper:      #EBEEF2;
  --paper-2:    #E0E5EC;
  --paper-rule: #C7CFDA;

  --dust:       #93A2B8;
  --dust-hi:    #D6DEE9;
  --ink-text:   #0E1826;
  --ink-mute:   #4E5B6E;

  --accent:     #5C93DB;   /* #365E92 lifted for legibility on dark  — 5.9:1 */
  --accent-hot: #7FB0EE;
  --accent-dim: #2C5286;   /* the brand blue's weight on paper       — 6.8:1 */

  --glow:       rgba(92,147,219,.12);

  --live:       #4FC3A1;
}

/* =========================================================================
   LIGHT THEME
   Applied when the visitor's OS asks for light and they have not chosen
   otherwise, and whenever they pick light explicitly. The dark values in
   :root stay the base, so anything not listed here simply keeps working.

   Two things deliberately do NOT flip:
     - the flare amber fill, because it is the brand mark
     - the wash over the photographs, because both photographs are dusk
       shots and a light wash over a dark image reads as a rendering fault
   ========================================================================= */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  /* Surfaces invert in weight but keep the rhythm: the field becomes the
     open, near-white page and the datasheet becomes the tinted interruption.
     Same alternation, same section order, no markup changes. */
  --ink:        #FBFAF7;
  --ink-2:      #F2F0EA;
  --ink-3:      #EAE7DF;
  --rule:       #DFDACE;
  --rule-hi:    #B0A692;

  --paper:      #EFEDE7;
  --paper-2:    #E5E2DA;
  --paper-rule: #D2CEC3;

  --dust:       #6B6558;   /* 5.5:1 on the field surface  */
  --dust-hi:    #14181C;   /* body text                    */
  --ink-text:   #10151A;
  --ink-mute:   #5E625F;

  /* The fill stays brand amber. Only the accent-as-text darkens, because
     #E9A227 on a near-white page is about 2:1 and unreadable. */
  --accent-hot: #C9871A;   /* hover goes DARKER on light, not lighter */
  --accent-ink: #8A5E12;   /* 5.45:1 on the field surface - rich brass, not mud */

  --live:       #1F8A57;
  --glow:       rgba(233,162,39,.16);

  --text-strong: #0D1114;
  --util-bg:     #EAE7DF;
  --shadow:      rgba(31,26,14,.22);

  color-scheme: light;
  }
}

:root[data-theme="light"] {
  /* Surfaces invert in weight but keep the rhythm: the field becomes the
     open, near-white page and the datasheet becomes the tinted interruption.
     Same alternation, same section order, no markup changes. */
  --ink:        #FBFAF7;
  --ink-2:      #F2F0EA;
  --ink-3:      #EAE7DF;
  --rule:       #DFDACE;
  --rule-hi:    #B0A692;

  --paper:      #EFEDE7;
  --paper-2:    #E5E2DA;
  --paper-rule: #D2CEC3;

  --dust:       #6B6558;   /* 5.5:1 on the field surface  */
  --dust-hi:    #14181C;   /* body text                    */
  --ink-text:   #10151A;
  --ink-mute:   #5E625F;

  /* The fill stays brand amber. Only the accent-as-text darkens, because
     #E9A227 on a near-white page is about 2:1 and unreadable. */
  --accent-hot: #C9871A;   /* hover goes DARKER on light, not lighter */
  --accent-ink: #8A5E12;   /* 5.45:1 on the field surface - rich brass, not mud */

  --live:       #1F8A57;
  --glow:       rgba(233,162,39,.16);

  --text-strong: #0D1114;
  --util-bg:     #EAE7DF;
  --shadow:      rgba(31,26,14,.22);

  color-scheme: light;
}

/* A photograph keeps its dark treatment in both themes. */
.on-photo{ color:#EFEDE7; }

/* Theme toggle - lives in the utility bar next to the language switch. */
.theme-toggle{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:1px solid var(--rule-hi); border-radius:var(--radius);
  color:inherit; font:inherit; font-family:var(--mono); font-size:.6875rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding:2px 9px; cursor:pointer; line-height:1.6;
  transition:border-color .18s ease, color .18s ease;
}
.theme-toggle:hover{ border-color:var(--accent-ink); color:var(--accent-ink); }
.theme-toggle svg{ width:13px; height:13px; display:block; fill:none;
  stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* The icon shows the theme you would switch TO: sun while dark, moon while light. */
.theme-toggle .i-sun{ display:block; }
.theme-toggle .i-moon{ display:none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .i-sun{ display:none; }
  :root:not([data-theme="dark"]) .theme-toggle .i-moon{ display:block; }
}
:root[data-theme="light"] .theme-toggle .i-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .i-moon{ display:block; }
:root[data-theme="dark"] .theme-toggle .i-sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .i-moon{ display:none; }