/* ================================================================
   AZRALAG Design System — Core Tokens
   Dark, technical, mono-accented. Developer-first.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---------- BASE COLORS ---------- */

  /* Neutrals — warm dark, lifted from pure black */
  --black:        #141418;   /* primary bg */
  --ink:          #1c1c22;   /* raised surface */
  --ink-2:        #24242c;   /* cards, wells */
  --ink-3:        #2e2e38;   /* hover surface */
  --line:         #363642;   /* hairline borders */
  --line-2:       #42424f;   /* stronger border */

  --gray-1:       #52525e;   /* disabled */
  --gray-2:       #72727e;   /* tertiary text */
  --gray-3:       #9494a0;   /* secondary text */
  --gray-4:       #bcbcc8;   /* primary-muted text */

  --bone:         #e8e6df;   /* primary text (warm off-white) */
  --paper:        #f5f3ec;   /* alt light bg */
  --paper-2:      #faf8f2;

  /* Signal — the single confident accent (blue) */
  --signal:       #4D8FFF;   /* primary accent */
  --signal-dim:   #3A72D6;   /* pressed/hovered darker */
  --signal-glow:  #4D8FFF33; /* 20% alpha for glows, rings */
  --signal-ink:   #ffffff;   /* text on signal bg */

  /* Supporting signals */
  --amber:        #FFB547;   /* warn */
  --red:          #FF5B5B;   /* error */
  --blue:         #6BB6FF;   /* info, links in light mode */

  /* ---------- SEMANTIC COLORS (dark default) ---------- */
  --bg:           var(--black);
  --bg-raised:    var(--ink);
  --bg-card:      var(--ink-2);
  --bg-hover:     var(--ink-3);

  --fg:           var(--bone);
  --fg-muted:     var(--gray-4);
  --fg-dim:       var(--gray-3);
  --fg-subtle:    var(--gray-2);
  --fg-disabled:  var(--gray-1);

  --border:       var(--line);
  --border-strong:var(--line-2);

  --accent:       var(--signal);
  --accent-hover: var(--signal-dim);
  --on-accent:    var(--signal-ink);

  --success:      #55D18E;
  --warning:      var(--amber);
  --danger:       var(--red);
  --info:         var(--signal);

  /* ---------- TYPOGRAPHY ---------- */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-sans:    'Inter Tight', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif:   'Instrument Serif', ui-serif, Georgia, serif;

  /* Type scale */
  --fs-display:   clamp(3.5rem, 8vw, 6rem);
  --fs-h1:        clamp(2.25rem, 4vw, 3.25rem);
  --fs-h2:        clamp(1.75rem, 3vw, 2.25rem);
  --fs-h3:        1.5rem;
  --fs-h4:        1.25rem;
  --fs-body-lg:   1.125rem;
  --fs-body:      1rem;
  --fs-body-sm:   0.875rem;
  --fs-label:     0.75rem;
  --fs-micro:     0.6875rem;

  /* Line heights */
  --lh-tight:     1.05;
  --lh-heading:   1.15;
  --lh-body:      1.55;
  --lh-loose:     1.7;

  /* Letter spacing */
  --ls-display:   -0.03em;
  --ls-heading:   -0.015em;
  --ls-body:       0;
  --ls-label:      0.08em;
  --ls-micro:      0.12em;

  /* ---------- SPACING (4px base) ---------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ---------- RADII ---------- */
  --r-0:    0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-full: 999px;

  /* ---------- BORDERS ---------- */
  --bw:     1px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 0 3px var(--signal-glow);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,0.04);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* ---------- LAYOUT ---------- */
  --container:    1280px;
  --gutter:       var(--sp-6);
}

/* ---------- LIGHT MODE ---------- */
[data-theme="light"] {
  --bg:           var(--paper-2);
  --bg-raised:    #ffffff;
  --bg-card:      var(--paper);
  --bg-hover:     #eeeae0;
  --fg:           #17171a;
  --fg-muted:     #3a3a42;
  --fg-dim:       #6b6b75;
  --fg-subtle:    #8f8f99;
  --border:       #d9d5c9;
  --border-strong:#b8b2a0;
  --on-accent:    #0a0a0b;
}

/* ================================================================
   SEMANTIC ELEMENT STYLES
   ================================================================ */

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: 600;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  font-weight: 600;
  margin: 0;
}

.display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: 600;
}

.display-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
  font-weight: 500;
}

.display-serif {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: 400;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  margin: 0;
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

.label, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 500;
}

.label-accent {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.micro {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

code, .code, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.125em 0.375em;
  color: var(--fg);
}

pre {
  font-family: var(--font-mono);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  overflow-x: auto;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--accent); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-8) 0;
}

.fg        { color: var(--fg); }
.fg-muted  { color: var(--fg-muted); }
.fg-dim    { color: var(--fg-dim); }
.fg-subtle { color: var(--fg-subtle); }
.fg-accent { color: var(--accent); }

.bg        { background: var(--bg); }
.bg-raised { background: var(--bg-raised); }
.bg-card   { background: var(--bg-card); }

.bracket::before { content: "["; color: var(--accent); margin-right: 0.25em; }
.bracket::after  { content: "]"; color: var(--accent); margin-left: 0.25em; }

.prompt::before  { content: "▸ "; color: var(--accent); font-family: var(--font-mono); }

/* Dot-grid background — signature motif */
.bg-dotgrid {
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Diagonal hatch */
.bg-hatch {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    var(--line) 8px,
    var(--line) 9px
  );
}