/* ========================================
   css/base.css — Reset + Design Tokens (v2)
   DevOps AI by RainTech
   Evolved from root base.css — fully backward-compatible
   ======================================== */

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

/* ═══════════════════════════════════════════════════════════════════════════
   @layer reset
   ═══════════════════════════════════════════════════════════════════════════ */
@layer reset {

  /* Box-sizing + margins */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul, ol {
    list-style: none;
  }

  button {
    cursor: pointer;
    background: none;
    border: none;
  }

  /* Reduced-motion: kill all animations at the root */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

} /* end @layer reset */

/* ═══════════════════════════════════════════════════════════════════════════
   @layer tokens — Design Tokens (custom properties)
   ═══════════════════════════════════════════════════════════════════════════ */
@layer tokens {

  @font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('https://fonts.gstatic.com/s/plusjakartasans/v8/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_KU7NSg.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('https://fonts.gstatic.com/s/plusjakartasans/v8/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_qU7NSg.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('https://fonts.gstatic.com/s/plusjakartasans/v8/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_TU7NSg.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('https://fonts.gstatic.com/s/plusjakartasans/v8/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_NE7NSg.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('https://fonts.gstatic.com/s/plusjakartasans/v8/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_Fk7NSg.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'JetBrains Mono';
    src: url('https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxjOVmNeJdt.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'JetBrains Mono';
    src: url('https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxjOVmNeJdt.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  :root {

    --green-primary: #79C600;
    --green-bright: #8BDB02;
    --blue-cetacean: #001647;
    --blue-royal: #05108E;
    --blue-sky: #20BAE7;
    --white-ghost: #F7F7FF;
    --violet-bright: #C616EA;
    --gray: #97999B;
    --black: #000000;
    --cyan: #17E4ED;
    --blue-mid: #2272E0;

    --bg-primary: #001647;
    --bg-secondary: #000E2E;          /* deepened from #001030 */
    --bg-tertiary: #001a52;
    --bg-card: rgba(255, 255, 255, 0.05);   /* updated */
    --bg-card-hover: rgba(255, 255, 255, 0.10);   /* updated */
    --bg-surface: #00204f;
    --text-primary: #F7F7FF;
    --text-secondary: rgba(247, 247, 255, 0.72);
    --text-tertiary: rgba(247, 247, 255, 0.48);
    --text-muted: rgba(247, 247, 255, 0.32);
    --text-accent: #8BDB02;
    --border-default: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.20);

    --accent: #8BDB02;
    --accent-hover: #79C600;
    --accent-glow: rgba(139, 219, 2, 0.15);
    --accent-glow-strong: rgba(139, 219, 2, 0.35);

    --bg-glass: rgba(0, 22, 71, 0.55);
    --bg-glass-light: rgba(255, 255, 255, 0.06);
    --border-glass: rgba(255, 255, 255, 0.12);
    --border-glow: rgba(139, 219, 2, 0.40);
    --glass-blur: 12px;
    --glass-blur-heavy: 24px;
    --glass-bg: rgba(0, 22, 71, 0.55);
    --glass-bg-light: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.08);

    --status-success: #4ADE80;
    --status-warning: #FBBF24;
    --status-error: #F87171;
    --status-info: #38BDF8;

    --gradient-hero: linear-gradient(135deg, #8BDB02 0%, #17E4ED 100%);
    --gradient-blue: linear-gradient(135deg, #05108E 0%, #001647 100%);
    --gradient-cyan: linear-gradient(135deg, #17E4ED 0%, #2272E0 100%);
    --gradient-royal: linear-gradient(135deg, #05108E 0%, #2272E0 100%);
    --gradient-violet: linear-gradient(135deg, #C616EA 0%, #5D24FC 100%);

    /* animated — set on @keyframes gradientShift in animations.css */
    --gradient-ai: linear-gradient(135deg, #8BDB02 0%, #17E4ED 50%, #C616EA 100%);
    --gradient-depth: radial-gradient(ellipse at 50% 0%, #05108E 0%, #000E2E 70%);
    --gradient-surface: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);

    --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Letter-spacing */
    --tracking-tight: -0.03em;
    --tracking-normal: 0em;
    --tracking-wide: 0.04em;
    --tracking-caps: 0.08em;

    --text-xs: clamp(0.694rem,  0.66rem  + 0.17vw, 0.8rem);
    --text-sm: clamp(0.833rem,  0.78rem  + 0.27vw, 1rem);
    --text-base: clamp(1rem,      0.93rem  + 0.36vw, 1.2rem);
    --text-lg: clamp(1.2rem,    1.1rem   + 0.50vw, 1.5rem);
    --text-xl: clamp(1.44rem,   1.3rem   + 0.70vw, 1.875rem);
    --text-2xl: clamp(1.728rem,  1.53rem  + 0.99vw, 2.344rem);
    --text-3xl: clamp(2.074rem,  1.79rem  + 1.42vw, 2.93rem);
    --text-4xl: clamp(2.488rem,  2.08rem  + 2.04vw, 3.66rem);
    --text-hero: clamp(2.986rem,  2.4rem   + 2.93vw, 4.58rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --max-width: 1280px;
    --max-width-narrow: 960px;
    --max-width-wide: 1440px;
    --gutter: clamp(1rem, 3vw, 2rem);
    --section-padding: clamp(4rem, 8vw, 8rem);
    --section-padding-sm: clamp(2rem, 4vw, 4rem);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.40);
    --shadow-xl: 0 16px 56px rgba(0, 0, 0, 0.50);
    --shadow-glow: 0 0 40px rgba(139, 219, 2, 0.15);
    --shadow-glow-strong: 0 0 60px rgba(139, 219, 2, 0.35);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.08);

    --ease-out: cubic-bezier(0.16, 1, 0.30, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --duration-slower: 700ms;

    --z-header: 100;
    --z-dropdown: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-chatbot: 500;
    --z-toast: 600;

  } /* end :root */

  [data-theme="light"] {
    --bg-primary: #F7F7FF;
    --bg-secondary: #EEEEF5;
    --bg-tertiary: #E5E5EF;
    --bg-card: rgba(0, 22, 71, 0.04);
    --bg-card-hover: rgba(0, 22, 71, 0.08);
    --bg-surface: #FFFFFF;
    --text-primary: #001647;
    --text-secondary: rgba(0, 22, 71, 0.72);
    --text-tertiary: rgba(0, 22, 71, 0.48);
    --text-muted: rgba(0, 22, 71, 0.32);
    --text-accent: #5A9200;  /* darkened for AA on white */
    --border-default: rgba(0, 22, 71, 0.10);
    --border-strong: rgba(0, 22, 71, 0.20);

    --accent: #79C600;
    --accent-hover: #6AB200;
    --accent-glow: rgba(121, 198, 0, 0.12);
    --accent-glow-strong: rgba(121, 198, 0, 0.28);

    --bg-glass: rgba(255, 255, 255, 0.70);
    --bg-glass-light: rgba(255, 255, 255, 0.85);
    --border-glass: rgba(0, 22, 71, 0.12);
    --border-glow: rgba(121, 198, 0, 0.35);
    --glass-bg: rgba(255, 255, 255, 0.70);
    --glass-bg-light: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 22, 71, 0.12);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.90);

    --status-success: #16A34A;
    --status-warning: #D97706;
    --status-error: #DC2626;
    --status-info: #0284C7;

    --gradient-depth: radial-gradient(ellipse at 50% 0%, #c8d6f7 0%, #EEEEF5 70%);
    --gradient-surface: linear-gradient(145deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.60) 100%);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 56px rgba(0, 0, 0, 0.16);
    --shadow-glow: 0 0 40px rgba(121, 198, 0, 0.10);
    --shadow-glow-strong: 0 0 60px rgba(121, 198, 0, 0.22);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.90);
  }

} /* end @layer tokens */

/* ═══════════════════════════════════════════════════════════════════════════
   @layer layout — Base Typography + Body
   ═══════════════════════════════════════════════════════════════════════════ */
@layer layout {

  body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    transition: background-color var(--duration-slow) var(--ease-out),
                color var(--duration-slow) var(--ease-out);
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-extrabold);
    line-height: 1.15;
    letter-spacing: var(--tracking-tight);
  }

  h1 { font-size: var(--text-hero); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl); }
  h5 { font-size: var(--text-lg); }
  h6 { font-size: var(--text-base); font-weight: var(--font-weight-bold); }

  p {
    color: var(--text-secondary);
    max-width: 70ch;
  }

  /* Focus ring */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  /* Selection highlight */
  ::selection {
    background: rgba(139, 219, 2, 0.30);
    color: var(--text-primary);
  }

  /* Container */
  .container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container--narrow {
    max-width: var(--max-width-narrow);
  }

  .container--wide {
    max-width: var(--max-width-wide);
  }

  /* Section */
  .section {
    padding-block: var(--section-padding);
  }

} /* end @layer layout */

/* ═══════════════════════════════════════════════════════════════════════════
   @layer components — skip link (global)
   ═══════════════════════════════════════════════════════════════════════════ */
@layer components {

  .skip-to-content {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: var(--accent);
    color: var(--blue-cetacean);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-sm);
    z-index: 9999;
    transition: top var(--duration-fast);
  }

  .skip-to-content:focus {
    top: var(--space-4);
  }

} /* end @layer components */

/* ═══════════════════════════════════════════════════════════════════════════
   @layer utilities — Helpers
   ═══════════════════════════════════════════════════════════════════════════ */
@layer utilities {

  /* Scroll-entry animation base */
  .fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  }

  .fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Visually hidden (screen-reader only) */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Text helpers */
  .text-accent  { color: var(--text-accent); }
  .text-muted   { color: var(--text-muted); }
  .text-center  { text-align: center; }

  /* Tabular numbers (useful for counters) */
  .tabular-nums { font-variant-numeric: tabular-nums; }

} /* end @layer utilities */