@layer reset, tokens, base, layout, components, utilities;

/* ─── RESET ──────────────────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { min-block-size: 100dvh; }
  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; }
  p, h1, h2, h3 { overflow-wrap: break-word; }
}

/* ─── TOKENS ─────────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* Night sky palette — OKLCH only */
    --bg:         oklch(8% 0.02 255);
    --bg-alt:     oklch(11% 0.025 255);
    --bg-row:     oklch(13% 0.022 255);
    --text:       oklch(92% 0.015 255);
    --text-dim:   oklch(52% 0.025 255);
    --accent:     oklch(72% 0.18 145);   /* Frontier green */
    --accent-hi:  oklch(82% 0.15 145);
    --error:      oklch(65% 0.20 30);
    --border:     oklch(20% 0.03 255);

    /* 4px base-4 spacing scale */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3: 16px;
    --sp-4: 32px;
    --sp-5: 64px;
    --sp-6: 128px;

    /* Fluid type scale */
    --t-xs:   clamp(0.65rem, 1.2vw, 0.75rem);
    --t-sm:   clamp(0.75rem, 1.5vw, 0.875rem);
    --t-base: clamp(0.9rem,  2vw,   1rem);
    --t-lg:   clamp(1.1rem,  2.5vw, 1.35rem);
    --t-xl:   clamp(1.4rem,  3.5vw, 2rem);
    --t-2xl:  clamp(2rem,    6vw,   3.5rem);
    --t-disp: clamp(2.8rem,  10vw,  6rem);
  }
}

/* ─── BASE ───────────────────────────────────────────────────────────────── */
@layer base {
  html {
    color-scheme: dark;
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: var(--t-base);
    line-height: 1.6;
  }

  h1, h2, h3 {
    line-height: 1.05;
    text-wrap: balance;
    font-weight: 900;
  }

  p { text-wrap: pretty; }

  a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.15s ease-out;
  }

  a:hover { color: var(--text); }

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

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
}

/* ─── LAYOUT ─────────────────────────────────────────────────────────────── */
@layer layout {
  .skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--sp-3);
    background: var(--accent);
    color: var(--bg);
    padding: var(--sp-2) var(--sp-3);
    font-weight: 900;
    z-index: 100;
    text-decoration: none;
    transition: inset-block-start 0.1s;
  }

  .skip-link:focus-visible {
    inset-block-start: var(--sp-2);
    outline: 2px solid var(--text);
  }

  header {
    padding-block: var(--sp-3);
    padding-inline: var(--sp-4);
    border-block-end: 1px solid var(--border);
  }

  .header-inner {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    max-inline-size: 64rem;
    margin-inline: auto;
  }

  main {
    max-inline-size: 64rem;
    margin-inline: auto;
    padding-block: var(--sp-5);
    padding-inline: var(--sp-4);
    display: grid;
    gap: var(--sp-5);
  }

  footer {
    margin-block-start: auto;
    padding-block: var(--sp-4);
    padding-inline: var(--sp-4);
    border-block-start: 1px solid var(--border);
    color: var(--text-dim);
    font-size: var(--t-sm);
  }

  .footer-inner {
    max-inline-size: 64rem;
    margin-inline: auto;
    display: grid;
    gap: var(--sp-2);
  }
}

/* ─── COMPONENTS ─────────────────────────────────────────────────────────── */
@layer components {

  /* Wordmark */
  .wordmark {
    font-size: var(--t-xl);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--accent);
  }

  .wordmark-sub {
    font-size: var(--t-xs);
    font-weight: 400;
    color: var(--text-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Hero */
  .hero h1 {
    font-size: var(--t-disp);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.0;
  }

  .hero h1 em {
    font-style: normal;
    color: var(--accent);
  }

  .tagline {
    margin-block-start: var(--sp-3);
    font-size: var(--t-lg);
    font-weight: 300;
    color: var(--text-dim);
    line-height: 1.5;
  }

  /* Search */
  .search-section {
    border-block-start: 2px solid var(--accent);
    padding-block-start: var(--sp-4);
  }

  .form-row {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-end;
    flex-wrap: wrap;
  }

  .field {
    display: grid;
    gap: var(--sp-1);
  }

  .field label {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .field small {
    font-size: var(--t-xs);
    color: var(--text-dim);
  }

  input[type="text"] {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    color: var(--text);
    padding-block: var(--sp-2);
    padding-inline: var(--sp-3);
    font-size: var(--t-xl);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    inline-size: clamp(110px, 18vw, 170px);
    border-radius: 0;
    transition: border-color 0.15s ease-out;
  }

  input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
  }

  input[type="text"]::placeholder {
    color: var(--text-dim);
    font-weight: 300;
  }

  button[type="submit"] {
    background: var(--accent);
    color: var(--bg);
    border: none;
    padding-block: var(--sp-2);
    padding-inline: var(--sp-4);
    font-size: var(--t-lg);
    font-weight: 900;
    letter-spacing: -0.02em;
    cursor: pointer;
    border-radius: 0;
    white-space: nowrap;
    min-block-size: 44px;
    min-inline-size: 44px;
    transition: background 0.15s ease-out;
  }

  button[type="submit"]:hover { background: var(--accent-hi); }

  button[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn-arrow { margin-inline-start: var(--sp-2); }

  /* Results header */
  .results-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding-block-end: var(--sp-3);
    border-block-end: 1px solid var(--border);
    margin-block-end: var(--sp-2);
  }

  .results-header h2 {
    font-size: var(--t-xl);
    font-weight: 300;
    letter-spacing: -0.01em;
  }

  .results-count {
    font-weight: 900;
    color: var(--accent);
  }

  .demo-notice {
    font-size: var(--t-xs);
    color: var(--text-dim);
    padding-block: var(--sp-1);
    padding-inline: var(--sp-2);
    border: 1px solid var(--border);
  }

  /* Flight list */
  .flights-list {
    display: grid;
    gap: 2px;
  }

  .flight-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--sp-3);
    align-items: center;
    padding-block: var(--sp-3);
    padding-inline: var(--sp-3);
    background: var(--bg-row);
    border-inline-start: 3px solid transparent;
    transition: border-color 0.15s ease-out, background 0.15s ease-out;
  }

  .flight-row:hover {
    border-inline-start-color: var(--accent);
    background: var(--bg-alt);
  }

  .flight-time {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .dep-time {
    font-size: var(--t-xl);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
  }

  .time-sep {
    color: var(--text-dim);
    font-size: var(--t-base);
    font-weight: 300;
  }

  .arr-time {
    font-size: var(--t-base);
    font-weight: 300;
    color: var(--text-dim);
  }

  .flight-dest {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
  }

  .dest-iata {
    font-size: var(--t-xl);
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1;
  }

  .dest-name {
    font-size: var(--t-xs);
    font-weight: 300;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .flight-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-1);
    white-space: nowrap;
  }

  .flight-num {
    font-size: var(--t-xs);
    color: var(--text-dim);
    letter-spacing: 0.05em;
  }

  .duration {
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--accent-hi);
  }

  .demo-badge {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--bg);
    background: var(--text-dim);
    padding-block: 2px;
    padding-inline: 4px;
  }

  .book-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--sp-1);
    padding-inline: var(--sp-2);
    border: 1px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
    font-size: var(--t-xs);
    font-weight: 900;
    letter-spacing: 0.06em;
    white-space: nowrap;
    min-block-size: 44px;
    min-inline-size: 56px;
    transition: background 0.15s ease-out, color 0.15s ease-out;
  }

  .book-link:hover {
    background: var(--accent);
    color: var(--bg);
  }

  /* States */
  .state-msg {
    padding-block: var(--sp-5);
    display: grid;
    gap: var(--sp-3);
  }

  .state-label {
    font-size: var(--t-xs);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .state-label--error { color: var(--error); }
  .state-label--empty { color: var(--text-dim); }

  .state-msg p { font-size: var(--t-lg); font-weight: 300; }
  .state-msg p strong { font-weight: 900; }

  .state-error p { color: var(--error); }

  .btn-outline {
    display: inline-flex;
    align-items: center;
    padding-block: var(--sp-2);
    padding-inline: var(--sp-3);
    border: 1px solid var(--text-dim);
    color: var(--text);
    text-decoration: none;
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    min-block-size: 44px;
    transition: border-color 0.15s ease-out, color 0.15s ease-out;
    width: max-content;
  }

  .btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  /* Loading dots */
  @keyframes ellipsis {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
  }

  .loading-text::after {
    content: '';
    animation: ellipsis 1.4s steps(4, end) infinite;
  }
}

/* ─── UTILITIES ──────────────────────────────────────────────────────────── */
@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* Reduced motion — always last */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  main {
    padding-block: var(--sp-4);
    padding-inline: var(--sp-3);
    gap: var(--sp-4);
  }

  .flight-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--sp-2);
  }

  .flight-time { grid-column: 1; grid-row: 1; }
  .flight-dest { grid-column: 1; grid-row: 2; }
  .flight-meta { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .flight-action { grid-column: 2; grid-row: 3; }

  .dep-time { font-size: var(--t-lg); }
  .dest-iata { font-size: var(--t-lg); }
}