/* ============================================================
   AIRS — Design Tokens
   Artificial Intelligence Resource System
   Source of truth for color, type, spacing, radius, shadow.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@100;200;300;400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* --- Light surface (primary environment) --- */
  --airs-milky-white: #FFFEF7;
  --airs-sunny-herb:  #CEF26D;
  --airs-ice-blue:    #8DC2FF;

  /* --- Dark surface (secondary, emotional, storytelling) --- */
  --airs-stellar-white:    #FFFFFF;
  --airs-nebula-purple:    #3A2055;
  --airs-orbital-blue:     #2B4C75;
  --airs-deep-space-navy:  #0E1131;

  /* --- Analogous grays (supporting, for UI + body) --- */
  --airs-moon-mist:  #8BA0B7;
  --airs-atlas-blue: #274872;
  --airs-void-black: #0E0E0E;

  /* --- Semantic roles (light surface) --- */
  --bg:           var(--airs-milky-white);
  --bg-elev:      #FFFFFF;
  --ink:          var(--airs-void-black);
  --ink-muted:    #4A5866;
  --ink-subtle:   var(--airs-moon-mist);
  --line:         rgba(14, 14, 14, 0.08);
  --line-strong:  rgba(14, 14, 14, 0.14);
  --glass:        rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --accent-herb:  var(--airs-sunny-herb);
  --accent-ice:   var(--airs-ice-blue);

  /* --- Type --- */
  --font-display: 'Urbanist', system-ui, -apple-system, sans-serif;
  --font-body:    'Urbanist', system-ui, -apple-system, sans-serif;
  --font-ui:      'Manrope', system-ui, -apple-system, sans-serif;

  /* Follows the brand hierarchy exactly (pt → px 1:1 for screen) */
  --h1-size: 32px; --h1-weight: 700;  --h1-track: 0;
  --h2-size: 26px; --h2-weight: 200;  --h2-track: 0.07em;
  --h3-size: 20px; --h3-weight: 700;  --h3-track: -0.02em;
  --h4-size: 20px; --h4-weight: 100;  --h4-track: 0.39em;
  --b1-size: 15px; --b1-weight: 100;  --b1-track: -0.02em;
  --b2-size: 14px; --b2-weight: 600;  --b2-track: 0;
  --b3-size: 12px; --b3-weight: 300;  --b3-track: 0;
  --btn-size:18px; --btn-weight: 400;

  /* --- Spacing (4px base, disciplined) --- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* --- Radius (brand rule: 0 preferred, 3–5px max) --- */
  --r-0: 0;
  --r-1: 3px;
  --r-2: 5px;
  --r-pill: 999px; /* ONLY for capsules on short titles per guidelines */

  /* --- Shadow (low weight, softness over thickness) --- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(14,14,14,0.04), 0 1px 2px rgba(14,14,14,0.03);
  --shadow-2: 0 2px 8px rgba(14,14,14,0.04), 0 1px 2px rgba(14,14,14,0.03);
  --shadow-glass: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(14,14,14,0.04);

  /* --- Motion --- */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 400ms;
}

/* ============================================================
   Atmosphere — soft corner gradation for light surface
   Per brand: "a diffused color gradation should be applied
   sparingly to the page corners, blending Sunny Herb and Ice Blue"
   ============================================================ */
.airs-atmosphere {
  position: relative;
  isolation: isolate;
  background: var(--bg);
}
.airs-atmosphere::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 50% at 0% 0%,   rgba(206, 242, 109, 0.28), transparent 70%),
    radial-gradient(55% 45% at 100% 100%, rgba(141, 194, 255, 0.32), transparent 70%),
    radial-gradient(40% 40% at 100% 0%, rgba(141, 194, 255, 0.12), transparent 70%);
}
.airs-atmosphere > * { position: relative; z-index: 1; }

/* Dark atmosphere — cosmic */
.airs-cosmos {
  position: relative;
  isolation: isolate;
  color: var(--airs-stellar-white);
  background: var(--airs-deep-space-navy);
}
.airs-cosmos::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(70% 50% at 15% 10%,  rgba(58, 32, 85, 0.75),  transparent 70%),
    radial-gradient(60% 50% at 85% 20%,  rgba(43, 76, 117, 0.55), transparent 70%),
    radial-gradient(80% 60% at 50% 100%, rgba(58, 32, 85, 0.45),  transparent 70%),
    linear-gradient(180deg, #0E1131 0%, #0A0C24 100%);
}
.airs-cosmos > * { position: relative; z-index: 1; }

/* ============================================================
   Base type
   ============================================================ */
html, body { background: var(--bg); color: var(--ink); }
body { font-family: var(--font-body); font-weight: var(--b1-weight); font-size: var(--b1-size); letter-spacing: var(--b1-track); line-height: 1.55; }

.airs-h1 { font-family: var(--font-display); font-weight: var(--h1-weight); font-size: var(--h1-size); letter-spacing: var(--h1-track); line-height: 1.1; }
.airs-h2 { font-family: var(--font-display); font-weight: var(--h2-weight); font-size: var(--h2-size); letter-spacing: var(--h2-track); line-height: 1.2; text-transform: uppercase; }
.airs-h3 { font-family: var(--font-display); font-weight: var(--h3-weight); font-size: var(--h3-size); letter-spacing: var(--h3-track); line-height: 1.25; }
.airs-h4 { font-family: var(--font-display); font-weight: var(--h4-weight); font-size: var(--h4-size); letter-spacing: var(--h4-track); line-height: 1.3; text-transform: uppercase; }
.airs-b1 { font-family: var(--font-body); font-weight: var(--b1-weight); font-size: var(--b1-size); letter-spacing: var(--b1-track); }
.airs-b2 { font-family: var(--font-body); font-weight: var(--b2-weight); font-size: var(--b2-size); letter-spacing: var(--b2-track); }
.airs-b3 { font-family: var(--font-body); font-weight: var(--b3-weight); font-size: var(--b3-size); letter-spacing: var(--b3-track); }
.airs-btn-type { font-family: var(--font-ui); font-weight: var(--btn-weight); font-size: var(--btn-size); }

/* ============================================================
   Core components
   ============================================================ */

/* Glass panel — the brand's primary container treatment */
.airs-panel {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: var(--shadow-glass);
  padding: var(--s-5);
}
.airs-panel--flat {
  background: var(--bg-elev);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.airs-panel--cosmos {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--airs-stellar-white);
}

/* Capsule — only for short titles per guidelines */
.airs-capsule {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--glass);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.airs-capsule .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--airs-sunny-herb);
}

/* Button */
.airs-btn {
  font-family: var(--font-ui);
  font-size: var(--btn-size);
  font-weight: 400;
  padding: 12px 22px;
  border-radius: var(--r-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease),
              background var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
  display: inline-flex; align-items: center; gap: 10px;
  line-height: 1;
}
.airs-btn--primary {
  background: var(--airs-void-black);
  color: var(--airs-milky-white);
}
.airs-btn--primary:hover { background: #1a1a1a; }
.airs-btn--secondary {
  background: transparent;
  color: var(--airs-void-black);
  border-color: var(--line-strong);
}
.airs-btn--secondary:hover { background: rgba(14,14,14,0.04); }
.airs-btn--ghost {
  background: transparent;
  color: var(--ink-muted);
  border-color: transparent;
  padding: 12px 14px;
}
.airs-btn--ghost:hover { color: var(--ink); }

/* Field */
.airs-field {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  outline: none;
  transition: border-color var(--dur-2) var(--ease);
}
.airs-field:focus { border-color: var(--airs-void-black); }
.airs-field::placeholder { color: var(--ink-subtle); }

/* Divider — brand uses soft separation over heavy borders */
.airs-rule {
  height: 1px; background: var(--line); border: 0; width: 100%;
}

/* Keyline — vertical */
.airs-keyline {
  width: 1px; background: var(--line); border: 0;
}

/* Eyebrow — small label, uppercase, with dot */
.airs-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.airs-eyebrow::before {
  content: ""; width: 18px; height: 1px; background: var(--ink-muted);
}