/* SmarTTY v2 — dark-first design tokens */

@font-face {
  font-family: 'SmarTTY';
  src: url('/assets/fonts/smartty.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Dark theme (default) ── */
:root,
[data-theme="dark"] {
  --bg:            #0E141B;
  --surface:       #151E27;
  --surface-2:     #1C2733;
  --surface-3:     #243040;
  --border:        #263340;
  --border-strong: #3A4A59;

  --text:          #E6EDF3;
  --text-muted:    #9FADBA;
  --text-faint:    #6F7E8C;
  --text-invert:   #0E141B;

  --accent:        #FFC40D;
  --accent-hover:  #FFD34D;
  --accent-ink:    #16202B;
  --on-accent:     #16202B;

  --link:          #6FB3F2;
  --link-hover:    #9CCCF8;

  --success:       #4FBE85;
  --danger:        #F0685C;
  --warning:       #E7A83B;

  --shadow-sm:     0 1px 3px rgba(0,0,0,.4);
  --shadow-md:     0 4px 16px rgba(0,0,0,.5);
  --focus-ring:    0 0 0 3px rgba(255,196,13,.45);

  --nav-h:         64px;
  --container:     1200px;
  --section-py:    100px;
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg:            #FFFFFF;
  --surface:       #F5F7F9;
  --surface-2:     #EBEFF3;
  --surface-3:     #DCE3EA;
  --border:        #DCE3EA;
  --border-strong: #B9C4CE;

  --text:          #16202B;
  --text-muted:    #55636F;
  --text-faint:    #8593A0;
  --text-invert:   #FFFFFF;

  --accent:        #D97706;
  --accent-hover:  #B45309;
  --accent-ink:    #FFFFFF;
  --on-accent:     #FFFFFF;

  --link:          #0B62C4;
  --link-hover:    #084A96;

  --success:       #1E7F4F;
  --danger:        #C1362C;
  --warning:       #B4690E;

  --shadow-sm:     0 1px 3px rgba(22,32,43,.08);
  --shadow-md:     0 4px 16px rgba(22,32,43,.12);
  --focus-ring:    0 0 0 3px rgba(217,119,6,.35);
}

/* ── OS dark preference (before JS) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0E141B;
    --surface:       #151E27;
    --surface-2:     #1C2733;
    --surface-3:     #243040;
    --border:        #263340;
    --border-strong: #3A4A59;
    --text:          #E6EDF3;
    --text-muted:    #9FADBA;
    --text-faint:    #6F7E8C;
    --text-invert:   #0E141B;
    --accent:        #FFC40D;
    --accent-hover:  #FFD34D;
    --accent-ink:    #16202B;
    --on-accent:     #16202B;
    --link:          #6FB3F2;
    --link-hover:    #9CCCF8;
    --success:       #4FBE85;
    --danger:        #F0685C;
    --warning:       #E7A83B;
    --shadow-sm:     0 1px 3px rgba(0,0,0,.4);
    --shadow-md:     0 4px 16px rgba(0,0,0,.5);
    --focus-ring:    0 0 0 3px rgba(255,196,13,.45);
  }
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; display: block; }
button { cursor: pointer; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 3px; }

/* ── Shared layout utilities ── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 40px;
}
@media (max-width: 640px) { .container { padding-inline: 20px; } }

.section { padding-block: var(--section-py); }
.section-sm { padding-block: 60px; }

/* ── Section label ── */
.section-label {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* ── Typography ── */
.display {
  font-family: 'SmarTTY', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--text-muted); color: var(--text); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Image frames ── */
.img-frame {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
}
.img-frame img { width: 100%; height: auto; display: block; }