/**
 * AndroidEmulator.org — Design System Tokens (v2.0)
 * Architecture: Industrial Precision × Computing Interface × Gaming Engineering
 * Zero runtime overhead, pure CSS custom properties with Dark & Light surface tiers.
 */

@layer reset, tokens, base, primitives, components, layouts, templates, utilities;

@layer tokens {
  :root {
    /* --- Light Mode Color Architecture --- */
    --ae-canvas: #f6f8fb;
    --ae-surface-1: #ffffff;
    --ae-surface-2: #f8fafc;
    --ae-surface-3: #f1f4f8;
    --ae-overlay: rgba(255, 255, 255, 0.90);

    --ae-text-1: #0f172a;        /* High-contrast primary */
    --ae-text-2: #475569;        /* Secondary technical */
    --ae-text-3: #64748b;        /* Muted / labels */
    --ae-text-disabled: #94a3b8; /* Disabled / placeholders */

    --ae-border: #e2e8f0;
    --ae-border-strong: #cbd5e1;
    --ae-border-subtle: #f1f5f9;

    /* Functional Semantic Colors (Restrained: 5% blue, 3% status) */
    --ae-blue: #0f62fe;
    --ae-blue-hover: #0353e9;
    --ae-blue-soft: #edf5ff;
    --ae-blue-border: #d0e2ff;

    --ae-cyan: #0891b2;
    --ae-cyan-soft: #ecfeff;

    --ae-green: #10b981;
    --ae-green-hover: #059669;
    --ae-green-soft: #ecfdf5;
    --ae-green-border: #a7f3d0;

    --ae-amber: #f59e0b;
    --ae-amber-hover: #d97706;
    --ae-amber-soft: #fffbeb;
    --ae-amber-border: #fde68a;

    --ae-coral: #ef4444;
    --ae-coral-hover: #dc2626;
    --ae-coral-soft: #fef2f2;
    --ae-coral-border: #fecaca;

    /* --- Typography Architecture --- */
    --ae-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ae-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    /* Type Scale */
    --ae-text-xs: 0.75rem;    /* 12px */
    --ae-text-sm: 0.8125rem;  /* 13px */
    --ae-text-md: 0.9375rem;  /* 15px */
    --ae-text-base: 1rem;     /* 16px */
    --ae-text-lg: 1.125rem;   /* 18px */

    --ae-h4: 1.25rem;         /* 20px */
    --ae-h3: 1.5rem;          /* 24px */
    --ae-h2: 2rem;            /* 32px */
    --ae-h1: 2.75rem;         /* 44px */
    --ae-display: clamp(2.5rem, 5vw, 4.25rem);
    --ae-metric: clamp(1.75rem, 3.5vw, 2.75rem);

    /* --- Spacing System (8px Baseline) --- */
    --ae-space-1: 4px;
    --ae-space-2: 8px;
    --ae-space-3: 12px;
    --ae-space-4: 16px;
    --ae-space-5: 20px;
    --ae-space-6: 24px;
    --ae-space-8: 32px;
    --ae-space-10: 40px;
    --ae-space-12: 48px;
    --ae-space-16: 64px;
    --ae-space-20: 80px;
    --ae-space-24: 96px;

    /* --- Radius Hierarchy (Restrained, Precision Edges) --- */
    --ae-radius-sm: 6px;   /* Data rows, tags, input fields */
    --ae-radius-md: 10px;  /* Metric blocks, nested cards */
    --ae-radius-lg: 14px;  /* Main cards, panels */
    --ae-radius-xl: 20px;  /* Hero modules, modals */
    --ae-radius-pill: 9999px; /* Status pills, search triggers */

    /* --- Subtle Shadows --- */
    --ae-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --ae-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
    --ae-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --ae-shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.12);

    /* --- Layout Constraints --- */
    --ae-max-width: 1240px;
    --ae-header-height: 64px;
    --ae-transition-fast: 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --ae-transition-base: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* --- Dark Mode Color Architecture (Primary Brand Experience) --- */
  :root[data-theme="dark"],
  body.theme-dark {
    --ae-canvas: #070a0f;
    --ae-surface-1: #0d121c;
    --ae-surface-2: #121824;
    --ae-surface-3: #182030;
    --ae-overlay: rgba(13, 18, 28, 0.92);

    --ae-text-1: #f8fafc;        /* Crisp technical white */
    --ae-text-2: #cbd5e1;        /* Secondary readout */
    --ae-text-3: #7d8ea5;        /* Muted indicators */
    --ae-text-disabled: #475569; /* Disabled */

    --ae-border: #1e2839;
    --ae-border-strong: #2e3c54;
    --ae-border-subtle: #151d2c;

    --ae-blue: #3b82f6;
    --ae-blue-hover: #60a5fa;
    --ae-blue-soft: rgba(59, 130, 246, 0.12);
    --ae-blue-border: rgba(59, 130, 246, 0.28);

    --ae-cyan: #22d3ee;
    --ae-cyan-soft: rgba(34, 211, 238, 0.12);

    --ae-green: #10b981;
    --ae-green-hover: #34d399;
    --ae-green-soft: rgba(16, 185, 129, 0.12);
    --ae-green-border: rgba(16, 185, 129, 0.28);

    --ae-amber: #fbbf24;
    --ae-amber-hover: #fcd34d;
    --ae-amber-soft: rgba(251, 191, 36, 0.12);
    --ae-amber-border: rgba(251, 191, 36, 0.28);

    --ae-coral: #f87171;
    --ae-coral-hover: #fca5a5;
    --ae-coral-soft: rgba(248, 113, 113, 0.12);
    --ae-coral-border: rgba(248, 113, 113, 0.28);

    --ae-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ae-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.5);
    --ae-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
    --ae-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.7);
  }

  /* Automatic system theme detection when no user override exists */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ae-canvas: #070a0f;
      --ae-surface-1: #0d121c;
      --ae-surface-2: #121824;
      --ae-surface-3: #182030;
      --ae-overlay: rgba(13, 18, 28, 0.92);

      --ae-text-1: #f8fafc;
      --ae-text-2: #cbd5e1;
      --ae-text-3: #7d8ea5;
      --ae-text-disabled: #475569;

      --ae-border: #1e2839;
      --ae-border-strong: #2e3c54;
      --ae-border-subtle: #151d2c;

      --ae-blue: #3b82f6;
      --ae-blue-hover: #60a5fa;
      --ae-blue-soft: rgba(59, 130, 246, 0.12);
      --ae-blue-border: rgba(59, 130, 246, 0.28);

      --ae-cyan: #22d3ee;
      --ae-cyan-soft: rgba(34, 211, 238, 0.12);

      --ae-green: #10b981;
      --ae-green-hover: #34d399;
      --ae-green-soft: rgba(16, 185, 129, 0.12);
      --ae-green-border: rgba(16, 185, 129, 0.28);

      --ae-amber: #fbbf24;
      --ae-amber-hover: #fcd34d;
      --ae-amber-soft: rgba(251, 191, 36, 0.12);
      --ae-amber-border: rgba(251, 191, 36, 0.28);

      --ae-coral: #f87171;
      --ae-coral-hover: #fca5a5;
      --ae-coral-soft: rgba(248, 113, 113, 0.12);
      --ae-coral-border: rgba(248, 113, 113, 0.28);
    }
  }
}