/**
 * Entrologic V3 Design Tokens
 * Phase: Production
 * Date: 2026-07-17
 *
 * Rule:
 * - Components should reference semantic or component tokens.
 * - Do not hardcode raw brand hex values inside page/component styles.
 */

:root {
  /* ==========================================================================
     Layer 1: Primitive tokens
     ========================================================================== */

  /* Core colors */
  --el-primitive-obsidian: #0D1115;
  --el-primitive-ink: #111820;
  --el-primitive-slate: #242E37;
  --el-primitive-slate-mid: #2D3B47;
  --el-primitive-slate-light: #3A4D5C;
  --el-primitive-acrylic: rgba(18, 24, 31, 0.62);
  --el-primitive-paper: #F7F4EE;
  --el-primitive-ivory: #EDE8DF;
  --el-primitive-bone: #F4F4F6;
  --el-primitive-mineral: #AEB4B8;
  --el-primitive-muted: #8A8F97;
  --el-primitive-reverse-muted: #5D6670;
  --el-primitive-charcoal: #1E2830;

  /* Accent colors */
  --el-primitive-gold: #EBCB89;
  --el-primitive-gold-pale: #F4DFA2;
  --el-primitive-gold-warm: #C5A880;
  --el-primitive-sand: #BDA980;

  /* Semantic state primitives */
  --el-primitive-success: #6FAF8E;
  --el-primitive-warning: #D6A85A;
  --el-primitive-error: #C96F6F;
  --el-primitive-info: #8FA8B8;

  /* Lines */
  --el-primitive-line-gold-weak: rgba(235, 203, 137, 0.12);
  --el-primitive-line-gold: rgba(235, 203, 137, 0.22);
  --el-primitive-line-gold-strong: rgba(235, 203, 137, 0.38);
  --el-primitive-line-white-weak: rgba(244, 244, 246, 0.06);
  --el-primitive-line-white: rgba(244, 244, 246, 0.10);

  /* Surfaces */
  --el-primitive-surface-subtle: rgba(255, 255, 255, 0.025);
  --el-primitive-surface-acrylic: rgba(18, 24, 31, 0.62);
  --el-primitive-surface-acrylic-strong: rgba(18, 24, 31, 0.78);
  --el-primitive-surface-glass: rgba(18, 24, 31, 0.68);
  --el-primitive-surface-glass-strong: rgba(24, 31, 39, 0.78);
  --el-primitive-surface-glass-soft: rgba(255, 255, 255, 0.026);
  --el-primitive-surface-gold-tint: rgba(235, 203, 137, 0.06);

  /* Typography */
  --el-primitive-font-display-en: "Newsreader";
  --el-primitive-font-display-zh: "Noto Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", serif;
  --el-primitive-font-display: var(--el-primitive-font-display-en), var(--el-primitive-font-display-zh);
  --el-primitive-font-body-en: "Inter";
  --el-primitive-font-body-zh: "Noto Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --el-primitive-font-body: var(--el-primitive-font-body-en), var(--el-primitive-font-body-zh);
  --el-primitive-font-mono: "IBM Plex Mono", "SF Mono", "Courier Prime", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type scale */
  --el-primitive-text-2xs: 0.6875rem; /* 11px */
  --el-primitive-text-xs: 0.75rem;    /* 12px */
  --el-primitive-text-sm: 0.875rem;   /* 14px */
  --el-primitive-text-base: 1rem;     /* 16px */
  --el-primitive-text-lg: 1.125rem;   /* 18px */
  --el-primitive-text-xl: 1.25rem;    /* 20px */
  --el-primitive-text-2xl: 1.5rem;    /* 24px */
  --el-primitive-text-3xl: 2rem;      /* 32px */
  --el-primitive-text-4xl: 2.5rem;    /* 40px */
  --el-primitive-text-5xl: 3rem;      /* 48px */
  --el-primitive-text-6xl: 4rem;      /* 64px */
  --el-primitive-text-7xl: 5.25rem;   /* 84px */

  /* Weight */
  --el-primitive-weight-regular: 400;
  --el-primitive-weight-medium: 500;
  --el-primitive-weight-semibold: 600;
  --el-primitive-weight-bold: 700;

  /* Leading */
  --el-primitive-leading-tight: 1.12;
  --el-primitive-leading-snug: 1.25;
  --el-primitive-leading-normal: 1.55;
  --el-primitive-leading-relaxed: 1.7;

  /* Tracking */
  --el-primitive-tracking-tight: -0.025em;
  --el-primitive-tracking-normal: 0em;
  --el-primitive-tracking-wide: 0.04em;
  --el-primitive-tracking-wider: 0.08em;
  --el-primitive-tracking-widest: 0.16em;

  /* Spacing */
  --el-primitive-space-1: 4px;
  --el-primitive-space-2: 8px;
  --el-primitive-space-3: 12px;
  --el-primitive-space-4: 16px;
  --el-primitive-space-5: 20px;
  --el-primitive-space-6: 24px;
  --el-primitive-space-8: 32px;
  --el-primitive-space-10: 40px;
  --el-primitive-space-12: 48px;
  --el-primitive-space-16: 64px;
  --el-primitive-space-20: 80px;
  --el-primitive-space-24: 96px;
  --el-primitive-space-28: 112px;
  --el-primitive-space-32: 128px;
  --el-primitive-space-40: 160px;

  /* Radius */
  --el-primitive-radius-none: 0;
  --el-primitive-radius-xs: 2px;
  --el-primitive-radius-sm: 4px;
  --el-primitive-radius-md: 6px;
  --el-primitive-radius-lg: 8px;
  --el-primitive-radius-xl: 12px;
  --el-primitive-radius-full: 9999px;

  /* Shadow / glow */
  --el-primitive-shadow-soft: 0 14px 60px rgba(0, 0, 0, 0.35);
  --el-primitive-shadow-panel: 0 24px 80px rgba(0, 0, 0, 0.42);
  --el-primitive-shadow-glass: 0 28px 64px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --el-primitive-shadow-glass-hover: 0 34px 72px rgba(0, 0, 0, 0.40), 0 0 32px rgba(235, 203, 137, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.075);
  --el-primitive-shadow-gold-weak: 0 0 28px rgba(235, 203, 137, 0.10);
  --el-primitive-edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Motion */
  --el-primitive-duration-fast: 160ms;
  --el-primitive-duration-base: 240ms;
  --el-primitive-duration-panel: 360ms;
  --el-primitive-duration-reveal: 560ms;
  --el-primitive-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --el-primitive-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --el-primitive-ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  /* ==========================================================================
     Layer 2: Semantic tokens
     ========================================================================== */

  /* Background */
  --el-color-bg-page: var(--el-primitive-obsidian);
  --el-color-bg-section: var(--el-primitive-ink);
  --el-color-bg-surface: var(--el-primitive-slate);
  --el-color-bg-surface-elevated: var(--el-primitive-slate-mid);
  --el-color-bg-surface-hover: var(--el-primitive-slate-light);
  --el-color-bg-acrylic: var(--el-primitive-surface-acrylic);
  --el-color-bg-acrylic-strong: var(--el-primitive-surface-acrylic-strong);
  --el-color-bg-glass: var(--el-primitive-surface-glass);
  --el-color-bg-glass-strong: var(--el-primitive-surface-glass-strong);
  --el-color-bg-glass-soft: var(--el-primitive-surface-glass-soft);
  --el-color-bg-reverse: var(--el-primitive-paper);
  --el-color-bg-reverse-alt: var(--el-primitive-ivory);

  /* Text */
  --el-color-text-primary: var(--el-primitive-bone);
  --el-color-text-secondary: var(--el-primitive-mineral);
  --el-color-text-muted: var(--el-primitive-muted);
  --el-color-text-accent: var(--el-primitive-gold);
  --el-color-text-reverse: var(--el-primitive-charcoal);
  --el-color-text-reverse-muted: var(--el-primitive-reverse-muted);

  /* Accent */
  --el-color-accent-primary: var(--el-primitive-gold);
  --el-color-accent-hover: var(--el-primitive-gold-pale);
  --el-color-accent-secondary: var(--el-primitive-gold-warm);
  --el-color-accent-tint: var(--el-primitive-surface-gold-tint);

  /* Border */
  --el-color-border-subtle: var(--el-primitive-line-white-weak);
  --el-color-border: var(--el-primitive-line-gold);
  --el-color-border-strong: var(--el-primitive-line-gold-strong);

  /* States */
  --el-color-success: var(--el-primitive-success);
  --el-color-warning: var(--el-primitive-warning);
  --el-color-error: var(--el-primitive-error);
  --el-color-info: var(--el-primitive-info);

  /* Typography semantic */
  --el-font-display: var(--el-primitive-font-display);
  --el-font-body: var(--el-primitive-font-body);
  --el-font-mono: var(--el-primitive-font-mono);

  --el-type-display-xl-size: var(--el-primitive-text-7xl);
  --el-type-display-lg-size: var(--el-primitive-text-6xl);
  --el-type-display-md-size: var(--el-primitive-text-5xl);
  --el-type-h1-size: var(--el-primitive-text-4xl);
  --el-type-h2-size: var(--el-primitive-text-3xl);
  --el-type-h3-size: var(--el-primitive-text-2xl);
  --el-type-body-lg-size: var(--el-primitive-text-lg);
  --el-type-body-size: var(--el-primitive-text-base);
  --el-type-body-sm-size: var(--el-primitive-text-sm);
  --el-type-caption-size: var(--el-primitive-text-xs);

  /* Typography roles */
  --el-type-brand-size: clamp(22px, 1.75vw, 27px);
  --el-type-brand-leading: 0.95;
  --el-type-brand-tracking: -0.030em;
  --el-type-hero-en-size: clamp(68px, 8.6vw, 128px);
  --el-type-hero-en-leading: 0.88;
  --el-type-hero-en-tracking: -0.060em;
  --el-type-hero-claim-size: clamp(34px, 4.2vw, 64px);
  --el-type-hero-claim-leading: 1.05;
  --el-type-section-title-size: clamp(38px, 4.2vw, 66px);
  --el-type-section-title-leading: 1.02;
  --el-type-panel-title-size: clamp(34px, 4vw, 58px);
  --el-type-panel-title-leading: 1.04;
  --el-type-card-title-size: 31px;
  --el-type-card-title-leading: 1.02;
  --el-type-capability-title-size: clamp(48px, 5.6vw, 82px);
  --el-type-capability-title-leading: 0.92;
  --el-type-control-title-size: 25px;
  --el-type-control-title-leading: 1.12;
  --el-type-body-reading-size: 16px;
  --el-type-body-reading-leading: 1.75;
  --el-type-label-size: 11px;
  --el-type-label-leading: 1.25;
  --el-type-label-tracking: 0.16em;

  /* Layout */
  --el-layout-container: 1280px;
  --el-layout-gutter-mobile: 20px;
  --el-layout-gutter-tablet: 40px;
  --el-layout-gutter-desktop: 80px;
  --el-layout-grid-gap: var(--el-primitive-space-6);

  --el-space-section-sm: var(--el-primitive-space-20);
  --el-space-section-md: var(--el-primitive-space-28);
  --el-space-section-lg: var(--el-primitive-space-40);
  --el-space-panel: var(--el-primitive-space-8);

  /* Motion */
  --el-motion-fast: var(--el-primitive-duration-fast) var(--el-primitive-ease-standard);
  --el-motion-base: var(--el-primitive-duration-base) var(--el-primitive-ease-standard);
  --el-motion-panel: var(--el-primitive-duration-panel) var(--el-primitive-ease-out);
  --el-motion-reveal: var(--el-primitive-duration-reveal) var(--el-primitive-ease-out);

  /* ==========================================================================
     Layer 3: Component tokens
     ========================================================================== */

  /* Navigation */
  --el-nav-height: 68px;
  --el-nav-bg: rgba(13, 17, 21, 0.72);
  --el-nav-bg-scrolled: rgba(13, 17, 21, 0.88);
  --el-nav-backdrop: blur(16px) saturate(140%);
  --el-nav-border: 1px solid var(--el-color-border-subtle);
  --el-nav-link: var(--el-color-text-secondary);
  --el-nav-link-hover: var(--el-color-text-primary);
  --el-nav-link-active: var(--el-color-accent-primary);

  /* Button */
  --el-button-height: 44px;
  --el-button-radius: var(--el-primitive-radius-xs);
  --el-button-padding-x: 24px;
  --el-button-font: var(--el-font-body);
  --el-button-font-size: var(--el-primitive-text-sm);
  --el-button-font-weight: var(--el-primitive-weight-medium);
  --el-button-letter-spacing: var(--el-primitive-tracking-wide);

  --el-button-primary-bg: var(--el-color-accent-primary);
  --el-button-primary-fg: var(--el-color-bg-page);
  --el-button-primary-bg-hover: var(--el-color-accent-hover);
  --el-button-primary-shadow-hover: var(--el-primitive-shadow-gold-weak);

  --el-button-secondary-bg: transparent;
  --el-button-secondary-fg: var(--el-color-accent-primary);
  --el-button-secondary-border: 1px solid var(--el-color-border);
  --el-button-secondary-bg-hover: var(--el-color-accent-tint);
  --el-button-secondary-border-hover: 1px solid var(--el-color-border-strong);

  /* Panel / card */
  --el-panel-bg: var(--el-color-bg-glass);
  --el-panel-bg-hover: var(--el-color-bg-glass-strong);
  --el-panel-bg-acrylic: var(--el-color-bg-glass);
  --el-panel-bg-layered: radial-gradient(circle at 82% 14%, rgba(235, 203, 137, 0.10), transparent 22rem), linear-gradient(135deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.012) 42%, rgba(235, 203, 137, 0.025)), var(--el-color-bg-glass);
  --el-panel-backdrop: blur(22px) saturate(126%);
  --el-panel-border: 1px solid rgba(235, 203, 137, 0.24);
  --el-panel-border-subtle: 1px solid rgba(244, 244, 246, 0.075);
  --el-panel-radius: 18px;
  --el-panel-radius-lg: 22px;
  --el-panel-padding: var(--el-space-panel);
  --el-panel-shadow: var(--el-primitive-shadow-glass);
  --el-panel-shadow-hover: var(--el-primitive-shadow-glass-hover);
  --el-panel-highlight: var(--el-primitive-edge-highlight);

  /* Badge */
  --el-badge-bg: rgba(235, 203, 137, 0.08);
  --el-badge-fg: var(--el-color-accent-primary);
  --el-badge-border: 1px solid rgba(235, 203, 137, 0.20);
  --el-badge-radius: var(--el-primitive-radius-full);
  --el-badge-padding: 4px 10px;
  --el-badge-font-size: var(--el-primitive-text-2xs);
  --el-badge-letter-spacing: var(--el-primitive-tracking-widest);

  /* Form */
  --el-input-bg: rgba(36, 46, 55, 0.68);
  --el-input-fg: var(--el-color-text-primary);
  --el-input-placeholder: var(--el-color-text-muted);
  --el-input-border: 1px solid var(--el-color-border-subtle);
  --el-input-border-hover: 1px solid var(--el-color-border);
  --el-input-border-focus: 1px solid var(--el-color-accent-primary);
  --el-input-radius: var(--el-primitive-radius-xs);
  --el-input-padding: 12px 14px;

  /* Motion module */
  --el-motion-particle-color: var(--el-color-accent-primary);
  --el-motion-thread-color: rgba(235, 203, 137, 0.32);
  --el-motion-curve-color: var(--el-primitive-gold-pale);
  --el-motion-pulse-color: rgba(235, 203, 137, 0.18);
}

@media (max-width: 767px) {
  :root {
    --el-type-display-xl-size: var(--el-primitive-text-5xl);
    --el-type-display-lg-size: var(--el-primitive-text-4xl);
    --el-type-display-md-size: var(--el-primitive-text-3xl);
    --el-type-h1-size: 1.875rem;
    --el-type-h2-size: 1.625rem;
    --el-layout-grid-gap: var(--el-primitive-space-4);
    --el-space-section-sm: var(--el-primitive-space-16);
    --el-space-section-md: var(--el-primitive-space-20);
    --el-space-section-lg: var(--el-primitive-space-24);
    --el-panel-padding: var(--el-primitive-space-6);
    --el-nav-height: 60px;
    --el-type-hero-en-size: 58px;
    --el-type-hero-claim-size: 34px;
    --el-type-section-title-size: 42px;
    --el-type-panel-title-size: 36px;
    --el-type-card-title-size: 28px;
    --el-type-capability-title-size: 46px;
    --el-type-control-title-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --el-motion-fast: 1ms linear;
    --el-motion-base: 1ms linear;
    --el-motion-panel: 1ms linear;
    --el-motion-reveal: 1ms linear;
  }
}