/* Pars Abr — X-mono design tokens. Drop-in for parsabr.com, radar, cp, meet.
   No brand hue. Hierarchy = luminance + weight + elevation. Colour = status only.
   Theme: <html data-theme="light|dark">; with no attribute it follows the OS. */

@font-face { font-family: "Peyda"; font-weight: 400; font-display: swap; src: url("./fonts/PeydaWeb-Regular.woff2") format("woff2"); }
@font-face { font-family: "Peyda"; font-weight: 500; font-display: swap; src: url("./fonts/PeydaWeb-Medium.woff2") format("woff2"); }
@font-face { font-family: "Peyda"; font-weight: 600; font-display: swap; src: url("./fonts/PeydaWeb-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Peyda"; font-weight: 700; font-display: swap; src: url("./fonts/PeydaWeb-Bold.woff2") format("woff2"); }
@font-face { font-family: "Peyda"; font-weight: 800; font-display: swap; src: url("./fonts/PeydaWeb-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Peyda"; font-weight: 900; font-display: swap; src: url("./fonts/PeydaWeb-Black.woff2") format("woff2"); }

/* ── LIGHT (default) ── */
:root {
  color-scheme: light;
  --paper: #eef1f4;            /* page canvas — never pure white */
  --white: #ffffff;            /* card / surface */
  --input: #e8ecef;
  --line: rgba(15,20,25,.14);  /* hairline */
  --hair-2: rgba(15,20,25,.28);/* stronger hairline, hover/focus */
  --text: #0f1419;
  --text-2: #49555e;           /* secondary text */
  --faint: #98a2ad;
  --strong: #0f1419;           /* prices, key numbers */

  --ok: #15803d;  --warn: #b45309;  --danger: #e11d48;   /* meaning only */

  --btn-grad: linear-gradient(180deg,#30343a,#0f1113);
  --btn-fg: #fff;
  --btn-glow: 0 10px 22px -14px rgba(15,20,25,.5);
  --ghost-bg: linear-gradient(180deg,rgba(15,20,25,.07),rgba(15,20,25,.02));
  --ghost-border: rgba(15,20,25,.13);
  --ghost-inset: inset 0 1px 0 rgba(255,255,255,.85);   /* catch-light */
  --header-glass: rgba(255,255,255,.78);
  --chip-bg: rgba(15,20,25,.06);
  --nav-hover: rgba(15,20,25,.07);
  --sel: rgba(15,20,25,.16);
  --grid-line: rgba(15,20,25,.07);
  --shadow-card: 0 1px 3px rgba(15,20,25,.08);
  --shadow-lift: 0 1px 2px rgba(15,20,25,.05), 0 10px 26px -16px rgba(15,20,25,.18);

  /* ink panels are dark in BOTH themes; their type never flips */
  --ink-bg: linear-gradient(135deg,#1b1b1f,#0c0c0e 55%,#000);
  --text-on-ink: #e7e9ea;
  --text-2-on-ink: #767b85;
  --line-ink: rgba(255,255,255,.10);

  --radius: 1rem;       /* card */
  --radius-sm: .8rem;   /* inner box */
  --radius-input: .75rem;
  --radius-pill: 999px; /* every control */
  --ease: cubic-bezier(.2,.7,.3,1);
  --font: "Peyda", "Vazirmatn", Tahoma, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── DARK ── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #000;  --white: #0a0a0b;  --input: #121214;
  --line: rgba(255,255,255,.10);  --hair-2: rgba(255,255,255,.18);
  --text: #e7e9ea;  --text-2: #767b85;  --faint: #494e56;  --strong: #fff;
  --ok: #4ade80;  --warn: #fbbf24;  --danger: #fb7185;
  --btn-grad: linear-gradient(180deg,#fff,#dfe2e5);
  --btn-fg: #000;
  --btn-glow: 0 0 0 1px rgba(255,255,255,.06), 0 10px 26px -14px rgba(255,255,255,.28);
  --ghost-bg: linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
  --ghost-border: rgba(255,255,255,.14);
  --ghost-inset: inset 0 1px 0 rgba(255,255,255,.12);
  --header-glass: rgba(0,0,0,.65);
  --chip-bg: rgba(255,255,255,.045);
  --nav-hover: rgba(255,255,255,.10);
  --sel: rgba(255,255,255,.18);
  --grid-line: rgba(255,255,255,.045);
  --shadow-card: inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-lift: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 30px -18px rgba(0,0,0,.85);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #000;  --white: #0a0a0b;  --input: #121214;
    --line: rgba(255,255,255,.10);  --hair-2: rgba(255,255,255,.18);
    --text: #e7e9ea;  --text-2: #767b85;  --faint: #494e56;  --strong: #fff;
    --ok: #4ade80;  --warn: #fbbf24;  --danger: #fb7185;
    --btn-grad: linear-gradient(180deg,#fff,#dfe2e5);  --btn-fg: #000;
    --btn-glow: 0 0 0 1px rgba(255,255,255,.06), 0 10px 26px -14px rgba(255,255,255,.28);
    --ghost-bg: linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
    --ghost-border: rgba(255,255,255,.14);
    --ghost-inset: inset 0 1px 0 rgba(255,255,255,.12);
    --header-glass: rgba(0,0,0,.65);  --chip-bg: rgba(255,255,255,.045);
    --nav-hover: rgba(255,255,255,.10);  --sel: rgba(255,255,255,.18);
    --grid-line: rgba(255,255,255,.045);
    --shadow-card: inset 0 1px 0 rgba(255,255,255,.04);
    --shadow-lift: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 30px -18px rgba(0,0,0,.85);
  }
}

/* ── base ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); scroll-behavior: smooth; }
body { font-family: var(--font); background: transparent; color: var(--text);
  line-height: 1.9; font-size: 16px; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
::selection { background: var(--sel); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; }
.container { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }

/* ── buttons: soft-key pills, never outline-only ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border: 0; border-radius: var(--radius-pill);
  font: 700 .95rem var(--font); cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .15s ease, filter .15s ease, background .15s ease; }
.btn-primary { background: var(--btn-grad); color: var(--btn-fg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--btn-glow); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: var(--ghost-bg); color: var(--text);
  border: 1px solid var(--ghost-border); box-shadow: var(--ghost-inset); }
.btn-ghost:hover { border-color: var(--hair-2); filter: brightness(1.08); }
.btn:active { transform: translateY(1px); box-shadow: none; }
/* white key for use on ink panels (same in both themes) */
.btn-on-ink { background: linear-gradient(180deg,#fff,#dfe2e5); color: #000;
  box-shadow: 0 10px 26px -14px rgba(255,255,255,.35); }

/* ── card ── */
.card { background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-card);
  transition: border-color .15s ease, box-shadow .15s ease; }
.card:hover { border-color: var(--hair-2); box-shadow: var(--shadow-lift); }

/* ── ink panel (CTA / contact) ── */
.ink { background: var(--ink-bg); border: 1px solid var(--line-ink);
  border-radius: var(--radius); color: var(--text-on-ink); padding: 36px; }
.ink p { color: var(--text-2-on-ink); }

/* ── input ── */
.input { width: 100%; height: 44px; padding: 0 14px; font: 1rem var(--font);
  color: var(--text); background: var(--input); border: 1px solid var(--hair-2);
  border-radius: var(--radius-input); }
.input:focus { outline: none; border-color: color-mix(in srgb, var(--text) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent); }
/* 16px minimum on phones, or iOS zooms on focus */

/* ── chip / tag / nav item: pills ── */
.chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border-radius: var(--radius-pill); background: var(--chip-bg);
  border: 1px solid var(--line); font-size: .82rem; font-weight: 600; user-select: none; }
.nav-item { height: 38px; padding: 0 16px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; font-weight: 600; color: var(--text-2); }
.nav-item:hover { background: var(--nav-hover); color: var(--text); }
.nav-item[aria-current="page"] { background: var(--strong); color: var(--paper); }

/* ── eyebrow: bare muted label, no box, no dot ── */
.eyebrow { font-size: .82rem; font-weight: 700; color: var(--text-2); letter-spacing: .2px; }

/* ── status LED: only for a TRUE measured state ── */
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  color: var(--ok); box-shadow: 0 0 6px currentColor; display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .led { animation: led-breathe 2.4s ease-in-out infinite; }
}
@keyframes led-breathe { 50% { opacity: .55; } }

/* ── floating frosted capsule header ── */
.header { position: sticky; top: 0; z-index: 50; padding: 10px 0 8px; pointer-events: none; }
.header-in { pointer-events: auto; display: flex; align-items: center; gap: 8px;
  height: 56px; padding-inline: 22px 10px; border-radius: var(--radius-pill);
  background: var(--header-glass); border: 1px solid var(--line);
  box-shadow: var(--ghost-inset), 0 10px 28px -18px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.logo img { height: 30px; width: auto; }
:root[data-theme="dark"] .logo img { filter: brightness(0) invert(1); opacity: .92; }
@media (max-width: 700px) { .header-in { height: 52px; } .container { padding-inline: 16px; } }

/* ── hero background: 56px hairline square grid + one soft glow ── */
.hero { background-image:
    radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--text) 7%, transparent), transparent 70%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px; }

/* ── footer: rounded closing card ── */
.footer > .container { background: var(--white); border: 1px solid var(--line);
  border-radius: 24px; padding: 40px; }

/* ── motion: reveal rise ── */
@keyframes rv-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .rv { animation: rv-in .5s var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── scrollbar ── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #c9ccd1; border-radius: 999px; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #26262a; }
::-webkit-scrollbar-track { background: transparent; }