/* ==========================================================================
   ARK ELECTRONIC — Design Tokens, Reset & Layout
   Phase 1 prototype. Palette + type scale taken from the approved
   Visual Identity board. RTL is the base direction.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'IRANSansX';
  src: url('../fonts/IRANSansX-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IRANSansX';
  src: url('../fonts/IRANSansX-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IRANSansX';
  src: url('../fonts/IRANSansX-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IRANSansX';
  src: url('../fonts/IRANSansX-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IRANSansX';
  src: url('../fonts/IRANSansX-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Roboto (latin subset) is self-hosted too — Google Fonts is unreliable from
   Iran, and the client must be able to review this without a VPN. */
/* One file, one request. The four weight files were byte-for-byte copies of the same
   variable font (it has a `wght` axis), so a page that used three weights downloaded
   43 KB three times under three names. A weight range on a single face makes the browser
   fetch it once and set the weight from the axis. */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-400.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2190-21BB, U+2212;
}

/* ==========================================================================
   COLOR TOKENS
   Light is the base (bare :root). Dark is redefined twice — once for the
   system preference (unless the user forced light) and once for the explicit
   toggle — so both directions of the manual switch win.
   ========================================================================== */
:root {
  /* surfaces */
  --bg:            #F5F7FA;
  --bg-alt:        #ECEFF4;
  --surface:       #FFFFFF;
  --surface-2:     #F8FAFC;
  --surface-inset: #F1F4F8;
  --border:        #E2E5E9;
  --border-strong: #CFD5DD;

  /* ink — muted/faint are darkened from the board values so they still clear
     WCAG AA (4.5:1) when they sit on --surface-inset rather than pure white */
  --text:          #0D1B2A;
  --text-muted:    #616A77;
  --text-faint:    #67707D;
  --text-on-dark:  #F5F7FA;

  /* brand */
  --accent:        #D62828;   /* primary CTA */
  --accent-hover:  #B71F1F;
  --accent-ink:    #C81A1A;   /* accent as *text* — darker so it clears AA on --accent-soft */
  --accent-soft:   rgba(214, 40, 40, .08);
  --tech:          #1E3A8A;   /* secondary / technical blue */
  --tech-ink:      #1E3A8A;
  --tech-soft:     rgba(30, 58, 138, .08);

  /* dark industrial band (used inside light theme too) */
  --band:          #0D1B2A;
  --band-2:        #16263A;
  --band-border:   #24374E;

  /* status */
  --ok:            #097431;
  --ok-soft:       rgba(21, 128, 61, .10);
  --warn:          #955600;
  --warn-soft:     rgba(161, 98, 7, .10);

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(13, 27, 42, .06);
  --shadow:    0 2px 8px rgba(13, 27, 42, .07), 0 1px 2px rgba(13, 27, 42, .05);
  --shadow-lg: 0 12px 32px rgba(13, 27, 42, .10), 0 2px 8px rgba(13, 27, 42, .06);

  /* geometry */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --container: 1200px;
  --gutter:    24px;

  /* spacing scale (4pt rhythm) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* motion — Precision Motion: short, purposeful */
  --dur-micro: 160ms;
  --dur:       240ms;
  --ease:      cubic-bezier(.22, .61, .36, 1);

  --header-h: 72px;
  color-scheme: light;
}

/* Dark is the site's default; only the switch in the header turns it light. */
:root:not([data-theme="light"]) {
  --bg:            #0B131C;
  --bg-alt:        #0E1822;
  --surface:       #1B212A;
  --surface-2:     #171D26;
  --surface-inset: #141A22;
  --border:        #2B323C;
  --border-strong: #3A424E;

  --text:          #F5F7FA;
  --text-muted:    #8A93A0;
  --text-faint:    #818A96;

  --accent:        #D62828;
  --accent-hover:  #E23A3A;
  --accent-ink:    #F0857D;   /* AA-safe accent text on dark */
  --accent-soft:   rgba(240, 133, 125, .12);
  --tech:          #3B5BC0;
  --tech-ink:      #8FA6E8;
  --tech-soft:     rgba(143, 166, 232, .12);

  --band:          #070E15;
  --band-2:        #111C28;
  --band-border:   #232F3D;

  --ok:            #4ADE80;
  --ok-soft:       rgba(74, 222, 128, .12);
  --warn:          #FBBF24;
  --warn-soft:     rgba(251, 191, 36, .12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow:    0 2px 10px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);

  color-scheme: dark;
}

/* explicit toggle — wins in both directions */
:root[data-theme="dark"] {
  --bg:            #0B131C;
  --bg-alt:        #0E1822;
  --surface:       #1B212A;
  --surface-2:     #171D26;
  --surface-inset: #141A22;
  --border:        #2B323C;
  --border-strong: #3A424E;

  --text:          #F5F7FA;
  --text-muted:    #8A93A0;
  --text-faint:    #818A96;

  --accent:        #D62828;
  --accent-hover:  #E23A3A;
  --accent-ink:    #F0857D;
  --accent-soft:   rgba(240, 133, 125, .12);
  --tech:          #3B5BC0;
  --tech-ink:      #8FA6E8;
  --tech-soft:     rgba(143, 166, 232, .12);

  --band:          #070E15;
  --band-2:        #111C28;
  --band-border:   #232F3D;

  --ok:            #4ADE80;
  --ok-soft:       rgba(74, 222, 128, .12);
  --warn:          #FBBF24;
  --warn-soft:     rgba(251, 191, 36, .12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow:    0 2px 10px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);

  color-scheme: dark;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'IRANSansX', 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

img, picture, svg, video { display: block; max-width: 100%; }

/* Icons ship as bare <svg viewBox="0 0 24 24"> with no width/height, so give
   them a text-relative default. Component rules below override with fixed px. */
svg {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: none;
  display: inline-block;
  vertical-align: -0.16em;
}
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid var(--tech-ink);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--accent); color: #fff; }

/* ==========================================================================
   TYPOGRAPHY — scale from the identity board
   Latin runs (model codes, specs, units) render in Roboto.
   ========================================================================== */
.lat, .spec-value, .metric-value, code, kbd {
  font-family: 'Roboto', 'IRANSansX', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

h1, h2, h3, h4 { line-height: 1.35; font-weight: 700; letter-spacing: -.01em; }

.h-display { font-size: clamp(30px, 4.4vw, 44px); font-weight: 700; line-height: 1.28; }
.h1        { font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; }
.h2        { font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; }
.h3        { font-size: clamp(18px, 1.9vw, 24px); font-weight: 500; }
.h4        { font-size: 20px; font-weight: 500; }
.lead      { font-size: 18px; font-weight: 300; color: var(--text-muted); line-height: 1.85; }
.body      { font-size: 16px; font-weight: 400; }
.small     { font-size: 14px; font-weight: 300; color: var(--text-muted); line-height: 1.7; }
.tiny      { font-size: 13px; color: var(--text-muted); }

.muted  { color: var(--text-muted); }
.faint  { color: var(--text-faint); }
.strong { font-weight: 600; }

/* Section eyebrow — small technical label above a heading */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 13px; font-weight: 500; letter-spacing: .06em;
  color: var(--accent-ink); text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.eyebrow::before {
  content: ''; inline-size: 22px; block-size: 2px;
  background: var(--accent); border-radius: 2px;
}

/* measure control */
.measure    { max-inline-size: 68ch; }
.measure-sm { max-inline-size: 52ch; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (min-width: 1440px) { .container { padding-inline: 0; } }

.section    { padding-block: clamp(48px, 7vw, 96px); }
.section-sm { padding-block: clamp(32px, 4.5vw, 56px); }

.grid { display: grid; gap: var(--gutter); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 960px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
}

.stack   { display: flex; flex-direction: column; gap: var(--s-4); }
.row     { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.center  { text-align: center; }
.mt-auto { margin-block-start: auto; }

.section-head { margin-block-end: var(--s-7); }
.section-head .h2 { margin-block-end: var(--s-3); }

/* dark industrial band, used on light theme for technical sections */
.band {
  background: var(--band);
  color: var(--text-on-dark);
  border-block: 1px solid var(--band-border);
}
.band .muted,
.band .small { color: #9AA9BC; }
.band .eyebrow { color: #F0857D; }

/* screen-reader only */
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* skip link */
.skip {
  position: absolute; inset-block-start: -60px; inset-inline-start: var(--s-4);
  z-index: 1000; background: var(--accent); color: #fff;
  padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600; transition: inset-block-start var(--dur-micro) var(--ease);
}
.skip:focus { inset-block-start: 0; }

/* ==========================================================================
   SCROLL REVEAL — progressive enhancement only.
   Content is visible by default; the hidden state is applied only once JS
   has confirmed it can reveal it again.
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}