/* ═══════════════════════════════════════════════════════════════
   KYRO Design System — Commerce Growth Operating System
   Premium Dark Luxury Aesthetic
   ═══════════════════════════════════════════════════════════════ */

/* ── Layer Order ─────────────────────────────────────────────── */
@layer reset, base, theme, components, utilities;

/* ── Google Fonts ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════════════════
   TIER 1: Literal Design Tokens
   ═══════════════════════════════════════════════════════════════ */
@layer base {
  :root {
    /* ── Color Palette ───────────────────────────────────────── */
    --color-black:          #000000;
    --color-white:          #ffffff;

    /* Graphite Scale */
    --color-graphite-950:   #06080a;
    --color-graphite-900:   #0c1017;
    --color-graphite-850:   #101620;
    --color-graphite-800:   #151c28;
    --color-graphite-700:   #1c2536;
    --color-graphite-600:   #252f42;
    --color-graphite-500:   #3a4560;
    --color-graphite-400:   #546180;
    --color-graphite-300:   #7a88a4;
    --color-graphite-200:   #a0abbd;
    --color-graphite-100:   #c4cbd8;
    --color-graphite-50:    #e8ecf2;

    /* Blue / Electric Accent */
    --color-blue-500:       #0066cc;
    --color-blue-400:       #3385ff;
    --color-blue-300:       #66a3ff;
    --color-blue-200:       #99c2ff;
    --color-blue-100:       #cce0ff;
    --color-blue-600:       #0052a3;
    --color-blue-700:       #003d7a;
    --color-blue-800:       #002952;
    --color-blue-glow:      rgba(0, 102, 204, 0.12);
    --color-blue-glow-strong: rgba(0, 102, 204, 0.25);

    /* Navy / Midnight */
    --color-navy-900:       #0a0e1a;
    --color-navy-800:       #101830;
    --color-navy-700:       #182245;
    --color-navy-600:       #1f2d5c;

    /* Status Colors */
    --color-success:        #34d399;
    --color-warning:        #fbbf24;
    --color-error:          #f87171;
    --color-info:           #60a5fa;

    /* ── Typography ──────────────────────────────────────────── */
    --font-display:         'Space Grotesk', system-ui, sans-serif;
    --font-body:            'Inter', system-ui, sans-serif;
    --font-mono:            'JetBrains Mono', ui-monospace, monospace;

    --font-weight-light:    300;
    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-black:    900;

    /* ── Type Scale (rem) ────────────────────────────────────── */
    --text-xs:              0.75rem;
    --text-sm:              0.875rem;
    --text-base:            1rem;
    --text-lg:              1.125rem;
    --text-xl:              1.25rem;
    --text-2xl:             1.5rem;
    --text-3xl:             1.875rem;
    --text-4xl:             2.25rem;
    --text-5xl:             clamp(2.5rem, 1.5rem + 4vw, 3.75rem);
    --text-6xl:             clamp(3rem, 2rem + 5vw, 5rem);
    --text-7xl:             clamp(3.5rem, 2rem + 6vw, 6rem);

    /* ── Spacing ─────────────────────────────────────────────── */
    --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;
    --space-section:        clamp(4rem, 3rem + 5vw, 8rem);

    /* ── Borders & Radius ────────────────────────────────────── */
    --radius-sm:            0.375rem;
    --radius-md:            0.5rem;
    --radius-lg:            0.75rem;
    --radius-xl:            1rem;
    --radius-2xl:           1.5rem;
    --radius-full:          9999px;

    --border-thin:          1px;
    --border-medium:        2px;

    /* ── Shadows ─────────────────────────────────────────────── */
    --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-lg:            0 8px 32px rgba(0, 0, 0, 0.06);
    --shadow-xl:            0 16px 48px rgba(0, 0, 0, 0.08);
    --shadow-teal:          0 10px 30px rgba(0, 102, 204, 0.05);
    --shadow-teal-strong:   0 12px 40px rgba(0, 102, 204, 0.15);

    /* ── Transitions ─────────────────────────────────────────── */
    --ease-out:             cubic-bezier(0.16, 1, 0.3, 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-base:        250ms;
    --duration-slow:        400ms;
    --duration-slower:      600ms;

    /* ── Z-index ─────────────────────────────────────────────── */
    --z-base:               0;
    --z-dropdown:           100;
    --z-sticky:             200;
    --z-overlay:            300;
    --z-modal:              400;
    --z-toast:              500;

    /* ── Layout ──────────────────────────────────────────────── */
    --container-max:        1280px;
    --container-wide:       1440px;
    --container-narrow:     720px;
    --gutter:               clamp(1rem, 0.5rem + 2vw, 2rem);
  }
}

/* ═══════════════════════════════════════════════════════════════
   TIER 2: Semantic Design Tokens
   ═══════════════════════════════════════════════════════════════ */
@layer theme {
  :root {
    color-scheme: light;

    /* ── Surfaces ─────────────────────────────────────────────── */
    --surface-base:         #ffffff;
    --surface-raised:       #f5f5f7;
    --surface-overlay:      #ffffff;
    --surface-card:         #ffffff;
    --surface-card-hover:   #fbfbfc;
    --surface-glass:        rgba(255, 255, 255, 0.8);
    --surface-glass-border: rgba(0, 0, 0, 0.08);

    /* ── Text ────────────────────────────────────────────────── */
    --text-primary:         #1d1d1f;
    --text-secondary:       #424245;
    --text-tertiary:        #68686e;
    --text-muted:           #86868b;
    --text-accent:          #0066cc;
    --text-on-accent:       #ffffff;

    /* ── Accent ──────────────────────────────────────────────── */
    --accent:               #0066cc;
    --accent-hover:         #0071e3;
    --accent-subtle:        rgba(0, 102, 204, 0.06);

    /* ── Borders ─────────────────────────────────────────────── */
    --border-default:       #d2d2d7;
    --border-subtle:        #e5e7eb;
    --border-accent:        #0066cc;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════════════════════════ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  body {
    min-block-size: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  img, svg, video { display: block; max-inline-size: 100%; }
  a { color: inherit; text-decoration: none; }
  button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
  ul, ol { list-style: none; }
  input, textarea, select { font: inherit; }
  h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
  p { text-wrap: pretty; }
}

/* ═══════════════════════════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════════════════════════ */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    color: var(--text-secondary);
    background-color: var(--surface-base);
    overflow-x: hidden;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text-primary);
    line-height: 1.1;
  }

  h1 { font-size: var(--text-7xl); font-weight: var(--font-weight-bold); letter-spacing: -0.03em; }
  h2 { font-size: var(--text-5xl); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; }
  h3 { font-size: var(--text-3xl); font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; }
  h4 { font-size: var(--text-2xl); font-weight: var(--font-weight-semibold); }
  h5 { font-size: var(--text-xl); font-weight: var(--font-weight-medium); }

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

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

  /* Scrollbar */
  :root {
    scrollbar-color: var(--border-default) transparent;
    scrollbar-width: thin;
  }
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
@layer components {

  /* ── Container ─────────────────────────────────────────────── */
  .container {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container--wide {
    max-inline-size: var(--container-wide);
  }
  .container--narrow {
    max-inline-size: var(--container-narrow);
  }

  /* ── Section ───────────────────────────────────────────────── */
  .section {
    padding-block: var(--space-section);
    position: relative;
  }

  .section__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .section__eyebrow::before {
    content: "";
    display: inline-block;
    inline-size: 2rem;
    block-size: 1px;
    background: var(--accent);
  }

  .section__title {
    margin-block-end: var(--space-6);
  }

  .section__description {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    max-inline-size: 42rem;
    line-height: 1.7;
  }

  /* ── Buttons ───────────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-full);
    transition: all var(--duration-base) var(--ease-out);
    position: relative;
    overflow: hidden;
    min-block-size: 2.75rem;
    white-space: nowrap;
  }

  .btn--primary {
    background: var(--accent);
    color: var(--text-on-accent);
  }
  .btn--primary:hover:not(:disabled) {
    background: var(--accent-hover);
    box-shadow: var(--shadow-teal-strong);
    transform: translateY(-1px);
  }

  .btn--secondary {
    background: transparent;
    color: var(--text-primary);
    border: var(--border-thin) solid var(--border-default);
  }
  .btn--secondary:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
  }

  .btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    padding-inline: var(--space-4);
  }
  .btn--ghost:hover:not(:disabled) {
    color: var(--accent);
  }

  .btn--lg {
    font-size: var(--text-base);
    padding: var(--space-4) var(--space-10);
    min-block-size: 3.25rem;
  }

  /* ── Cards ─────────────────────────────────────────────────── */
  .card {
    background: var(--surface-card);
    border: var(--border-thin) solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    transition: all var(--duration-slow) var(--ease-out);
    position: relative;
    overflow: hidden;
  }
  .card:hover {
    border-color: var(--border-accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-teal);
  }

  .card--glass {
    background: var(--surface-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: var(--surface-glass-border);
  }

  .card__icon {
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-subtle);
    color: var(--accent);
    margin-block-end: var(--space-6);
    font-size: var(--text-xl);
  }

  .card__title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-block-end: var(--space-3);
  }

  .card__description {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    line-height: 1.6;
  }

  /* ── Badge ─────────────────────────────────────────────────── */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--accent-subtle);
    color: var(--accent);
    border: 1px solid var(--border-accent);
  }

  /* ── Metric Card ───────────────────────────────────────────── */
  .metric {
    text-align: center;
    padding: var(--space-6);
  }
  .metric__value {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: var(--font-weight-bold);
    color: var(--accent);
    line-height: 1;
    margin-block-end: var(--space-2);
  }
  .metric__label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* ── Divider ───────────────────────────────────────────────── */
  .divider {
    block-size: 1px;
    background: linear-gradient(to right, transparent, var(--border-default), transparent);
    border: none;
  }

  /* ── Grid layouts ──────────────────────────────────────────── */
  .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

  @media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  }
  @media (min-width: 769px) and (max-width: 1024px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  }
}

/* ═══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */
@layer utilities {
  .text-accent  { color: var(--accent); }
  .text-center  { text-align: center; }
  .text-muted   { color: var(--text-muted); }
  .text-gradient {
    background: linear-gradient(135deg, var(--color-blue-300), var(--color-blue-500), var(--color-blue-300));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .mx-auto { margin-inline: auto; }
  .relative { position: relative; }
  .overflow-hidden { overflow: hidden; }
  .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;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-out);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal--delay-1 { transition-delay: 100ms; }
  .reveal--delay-2 { transition-delay: 200ms; }
  .reveal--delay-3 { transition-delay: 300ms; }
  .reveal--delay-4 { transition-delay: 400ms; }

  .reveal--scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-out);
  }
  .reveal--scale.is-visible {
    opacity: 1;
    transform: scale(1);
  }

  .reveal--left {
    opacity: 0;
    transform: translateX(-3rem);
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-out);
  }
  .reveal--left.is-visible {
    opacity: 1;
    transform: translateX(0);
  }

  .reveal--right {
    opacity: 0;
    transform: translateX(3rem);
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-out);
  }
  .reveal--right.is-visible {
    opacity: 1;
    transform: translateX(0);
  }
}