/* ─────────────────────────────────────────────────
   main.css
   Global styles, reset, layout, and CSS custom
   properties. All visual tokens live here so that
   Phase 2 redesign requires only updating variables.
───────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES
   Phase 2: update these values only.
───────────────────────────────────────────────── */

:root {
  /* Colors */
  --color-background:      #000000;
  --color-text:            #ffffff;
  --color-muted:           #666666;
  --color-accent:          #ffffff;
  --color-input-border:    #111111;

  /* Typography */
  --font-family:           'Inter', monospace;
  --font-size-base:        14px;
  --font-size-sm:          12px;
  --line-height-base:      1.7;

  /* Spacing */
  --spacing-xs:            4px;
  --spacing-sm:            8px;
  --spacing-md:            16px;
  --spacing-lg:            24px;
  --spacing-xl:            32px;

  /* Layout */
  --terminal-padding:      var(--spacing-lg);
  --input-row-height:      48px;
  --terminal-max-width:    900px;

  /* Animation */
  --cursor-blink-speed:    1s;
}

/* ─────────────────────────────────────────────────
   RESET
───────────────────────────────────────────────── */

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

/* ─────────────────────────────────────────────────
   BASE
───────────────────────────────────────────────── */

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────────
   LAYOUT
───────────────────────────────────────────────── */

#terminal-container {
  display: flex;
  flex-direction: column;
  /* Use dynamic viewport height for correct behaviour on mobile
     where browser chrome collapses on scroll */
  height: 100vh;
  height: 100dvh;
  max-width: var(--terminal-max-width);
  margin: 0 auto;
  padding: var(--terminal-padding);
  padding-bottom: 0;
}

/* ─────────────────────────────────────────────────
   TERMINAL FONT OVERRIDE
   JetBrains Mono applied to the output area and
   input row so space-based column alignment renders
   correctly. Inter is retained for the rest of the
   page. Scoped via CSS variable so all child rules
   that reference --font-family inherit it.
───────────────────────────────────────────────── */

#terminal-output,
#terminal-input-row {
  --font-family: 'JetBrains Mono', monospace;
}

/* ─────────────────────────────────────────────────
   RESPONSIVE OVERRIDES
───────────────────────────────────────────────── */

/* Mobile — up to 480px */
@media (max-width: 480px) {
  :root {
    --font-size-base:    11px;
    /* 12px gives slightly more content room than 16px (--spacing-md) */
    --terminal-padding:  12px;
    --input-row-height:  44px;
  }
}

/* Narrow mobile — up to 390px (iPhone 14/15 and similar) */
@media (max-width: 390px) {
  :root {
    /* 10px prevents 48-char separators from wrapping at 390px
       content width (~366px after 12px padding each side) */
    --font-size-base:    10px;
  }
}

/* Tablet — 481px to 768px */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --font-size-base:    13px;
    --terminal-padding:  var(--spacing-lg);
  }
}

/* Large screens — 1400px and above */
@media (min-width: 1400px) {
  :root {
    --terminal-max-width: 1100px;
  }
}