/*
 * Earpedia design tokens.
 *
 * Phase 6B establishes the canonical token map used by future UI work.
 * Existing token names and legacy --color-* aliases remain available so page
 * CSS can migrate gradually without changing public visuals in this phase.
 */

:root {
  /* ================== Color: brand ================== */
  --ep-color-brand-primary: #202555;
  --ep-color-brand-primary-deep: #0f172a;
  --ep-color-brand-primary-soft: #2f355d;
  --ep-color-brand-secondary: #276b61;
  --ep-color-brand-secondary-hover: #1f6b63;
  --ep-color-brand-accent: #7bcec2;
  --ep-color-brand-muted: #474d77;

  /* Existing brand token names retained. */
  --ep-color-brand-navy: var(--ep-color-brand-primary);
  --ep-color-brand-navy-deep: var(--ep-color-brand-primary-deep);
  --ep-color-brand-navy-soft: var(--ep-color-brand-primary-soft);
  --ep-color-brand-teal: var(--ep-color-brand-secondary);
  --ep-color-brand-teal-dark: var(--ep-color-brand-secondary-hover);
  --ep-color-brand-mint: var(--ep-color-brand-accent);
  --ep-color-brand-purple-gray: var(--ep-color-brand-muted);

  /* ================== Color: accent ================== */
  --ep-color-accent-primary: #3246d3;
  --ep-color-accent-primary-hover: #1b3bbb;
  --ep-color-accent-secondary: #1b9db6;
  --ep-color-accent-secondary-hover: #1e5f7c;
  --ep-color-accent-sky: #60a5fa;
  --ep-color-accent-warm: #f59e0b;

  /* Existing accent token names retained. */
  --ep-color-accent-blue: var(--ep-color-accent-primary);
  --ep-color-accent-cyan: var(--ep-color-accent-secondary);
  --ep-color-accent-gold: var(--ep-color-accent-warm);

  /* ================== Color: backgrounds and surfaces ================== */
  --ep-color-bg-page: #f7f9fd;
  --ep-color-bg-page-soft: #f7f7ff;
  --ep-color-bg-page-blue: #f6f9ff;
  --ep-color-bg-surface: #ffffff;
  --ep-color-bg-surface-muted: #f8fafc;
  --ep-color-bg-surface-soft: #eef2fb;
  --ep-color-bg-surface-raised: #ffffff;
  --ep-color-bg-inverse: #0f172a;
  --ep-color-bg-inverse-soft: #111827;
  --ep-color-bg-overlay-light: rgba(255, 255, 255, 0.08);
  --ep-color-bg-overlay-strong: rgba(255, 255, 255, 0.14);
  --ep-color-selection-bg: rgba(123, 206, 194, 0.35);
  --ep-color-selection-text: #0f172a;

  /* Existing surface token names retained. */
  --ep-color-surface-page: var(--ep-color-bg-page);
  --ep-color-surface-page-soft: var(--ep-color-bg-page-soft);
  --ep-color-surface-page-blue: var(--ep-color-bg-page-blue);
  --ep-color-surface-card: var(--ep-color-bg-surface);
  --ep-color-surface-soft: var(--ep-color-bg-surface-soft);
  --ep-color-surface-muted: var(--ep-color-bg-surface-muted);
  --ep-color-surface-dark: var(--ep-color-bg-inverse);
  --ep-color-surface-dark-soft: var(--ep-color-bg-inverse-soft);
  --ep-color-surface-overlay-light: var(--ep-color-bg-overlay-light);
  --ep-color-surface-overlay-strong: var(--ep-color-bg-overlay-strong);

  /* ================== Color: text and links ================== */
  --ep-color-text-primary: #0f172a;
  --ep-color-text-secondary: #475569;
  --ep-color-text-body: #4b5563;
  --ep-color-text-muted: #6b7280;
  --ep-color-text-subtle: #94a3b8;
  --ep-color-text-disabled: #999999;
  --ep-color-text-inverse: #ffffff;
  --ep-color-text-default: #757575;
  --ep-color-text-link: var(--ep-color-accent-primary);
  --ep-color-text-link-hover: var(--ep-color-accent-secondary);

  --ep-color-link: var(--ep-color-text-link);
  --ep-color-link-hover: var(--ep-color-text-link-hover);
  --ep-color-link-visited: var(--ep-color-brand-muted);

  /* ================== Color: borders and focus ================== */
  --ep-color-border-subtle: #e2e8f0;
  --ep-color-border-default: #e5e7eb;
  --ep-color-border-muted: var(--ep-color-border-default);
  --ep-color-border-strong: #d8d8d8;
  --ep-color-border-blue-soft: #dfe7fa;
  --ep-color-border-dark: #1e293b;
  --ep-color-border-focus: var(--ep-color-accent-primary);

  --ep-color-focus: var(--ep-color-border-focus);
  --ep-color-focus-shadow: rgba(50, 70, 211, 0.25);

  /* ================== Color: status ================== */
  --ep-color-success-bg: #ecfdf3;
  --ep-color-success-border: #bbf7d0;
  --ep-color-success-text: #15803d;
  --ep-color-info-bg: #eef2ff;
  --ep-color-info-border: #e0e7ff;
  --ep-color-info-text: #4338ca;
  --ep-color-warning-bg: #fff7ed;
  --ep-color-warning-border: #fed7aa;
  --ep-color-warning-text: #c2410c;
  --ep-color-danger-bg: #fef2f2;
  --ep-color-danger-border: #fecaca;
  --ep-color-danger-text: #d63638;

  /* Existing error token names retained. */
  --ep-color-error-bg: var(--ep-color-danger-bg);
  --ep-color-error-border: var(--ep-color-danger-border);
  --ep-color-error-text: var(--ep-color-danger-text);

  /* ================== Typography: families ================== */
  --ep-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, sans-serif;
  --ep-font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
    monospace;

  /* Existing font token name retained. */
  --ep-font-sans: var(--ep-font-family-sans);

  /* ================== Typography: size scale ================== */
  --ep-font-size-2xs: 0.6875rem;
  --ep-font-size-xs: 0.75rem;
  --ep-font-size-sm: 0.875rem;
  --ep-font-size-base: 1rem;
  --ep-font-size-md: var(--ep-font-size-base);
  --ep-font-size-lg: 1.125rem;
  --ep-font-size-xl: 1.25rem;
  --ep-font-size-2xl: 1.5rem;
  --ep-font-size-3xl: 1.75rem;
  --ep-font-size-4xl: 2rem;
  --ep-font-size-5xl: 2.5rem;
  --ep-font-size-6xl: 3rem;

  /* ================== Typography: line heights ================== */
  --ep-line-height-none: 1;
  --ep-line-height-tight: 1.2;
  --ep-line-height-snug: 1.4;
  --ep-line-height-base: 1.6;
  --ep-line-height-relaxed: 1.7;
  --ep-line-height-prose: 1.75;

  /* ================== Typography: weights and tracking ================== */
  --ep-font-weight-regular: 400;
  --ep-font-weight-medium: 500;
  --ep-font-weight-semibold: 600;
  --ep-font-weight-bold: 700;
  --ep-font-weight-extrabold: 800;

  --ep-letter-spacing-none: 0;
  --ep-letter-spacing-eyebrow: 0.08em;
  --ep-letter-spacing-wide: 0.05em;

  /* ================== Spacing: numeric scale ================== */
  --ep-space-0: 0;
  --ep-space-1: 0.25rem;
  --ep-space-2: 0.5rem;
  --ep-space-3: 0.75rem;
  --ep-space-4: 1rem;
  --ep-space-5: 1.25rem;
  --ep-space-6: 1.5rem;
  --ep-space-8: 2rem;
  --ep-space-10: 2.5rem;
  --ep-space-12: 3rem;
  --ep-space-16: 4rem;
  --ep-space-20: 5rem;
  --ep-space-24: 6rem;

  /* ================== Spacing: semantic tokens ================== */
  --ep-section-space-compact: var(--ep-space-10);
  --ep-section-space-default: var(--ep-space-16);
  --ep-section-space-loose: var(--ep-space-20);
  --ep-section-space-hero: var(--ep-space-24);
  --ep-card-padding-sm: var(--ep-space-4);
  --ep-card-padding-md: var(--ep-space-6);
  --ep-card-padding-lg: var(--ep-space-8);
  --ep-form-gap: var(--ep-space-4);
  --ep-grid-gap: var(--ep-space-6);

  /* ================== Radius ================== */
  --ep-radius-none: 0;
  --ep-radius-xs: 0.125rem;
  --ep-radius-sm: 0.25rem;
  --ep-radius-md: 0.5rem;
  --ep-radius-lg: 0.75rem;
  --ep-radius-xl: 1rem;
  --ep-radius-2xl: 1.25rem;
  --ep-radius-pill: 999px;
  --ep-radius-circle: 50%;

  /* ================== Shadows ================== */
  --ep-shadow-none: none;
  --ep-shadow-xs: 0 1px 2px rgba(36, 40, 92, 0.06);
  --ep-shadow-sm: 0 4px 12px rgba(36, 40, 92, 0.08);
  --ep-shadow-md: 0 12px 28px rgba(36, 40, 92, 0.12);
  --ep-shadow-lg: 0 18px 55px rgba(15, 23, 42, 0.08);
  --ep-shadow-xl: 0 25px 70px rgba(15, 23, 42, 0.12);
  --ep-shadow-dark: 0 25px 80px rgba(15, 23, 42, 0.3);
  --ep-shadow-focus: 0 0 0 3px var(--ep-color-focus-shadow);
  --ep-shadow-inset-border: inset 0 0 0 1px var(--ep-color-border-subtle);

  /* ================== Containers ================== */
  --ep-container-reading: 46rem;
  --ep-container-content: 75rem;
  --ep-container-course: 73.75rem;
  --ep-container-dashboard: 75rem;
  --ep-container-wide: 87.5rem;
  --ep-page-gutter: 1.25rem;
  --ep-page-gutter-lg: 1.5rem;

  /* Existing container token names retained. */
  --ep-container-sm: 48rem;
  --ep-container-md: 61.25rem;
  --ep-container-lg: var(--ep-container-content);

  /* ================== Z-index ================== */
  --ep-z-base: 1;
  --ep-z-sticky: 50;
  --ep-z-header: 100;
  --ep-z-dropdown: 1000;
  --ep-z-overlay: 9999;
  --ep-z-modal: 10000;
  --ep-z-toast: 11000;

  /* ================== Transitions ================== */
  --ep-transition-duration-fast: 120ms;
  --ep-transition-duration-base: 180ms;
  --ep-transition-duration-slow: 250ms;
  --ep-transition-ease-standard: ease;
  --ep-transition-fast: var(--ep-transition-duration-fast)
    var(--ep-transition-ease-standard);
  --ep-transition-base: var(--ep-transition-duration-base)
    var(--ep-transition-ease-standard);
  --ep-transition-slow: var(--ep-transition-duration-slow)
    var(--ep-transition-ease-standard);
  --ep-transition-transform: transform var(--ep-transition-fast);
  --ep-transition-color: color var(--ep-transition-base),
    background-color var(--ep-transition-base),
    border-color var(--ep-transition-base);
  --ep-transition-colors: var(--ep-transition-color);
  --ep-transition-shadow: box-shadow var(--ep-transition-base);

  /* ================== Focus ring ================== */
  --ep-focus-ring-color: var(--ep-color-focus);
  --ep-focus-ring-width: 2px;
  --ep-focus-ring-offset: 3px;
  --ep-focus-ring-shadow: var(--ep-shadow-focus);

  /*
   * Breakpoint documentation for later responsive consolidation.
   * Regular CSS cannot use custom properties in media query conditions.
   * xs: 480px; sm: 640px; md: 768px; lg: 1024px; xl: 1200px.
   */

  /*
   * Legacy compatibility aliases.
   *
   * These names are still used across existing page CSS. Keep them until a
   * later cleanup phase migrates page styles to canonical --ep-* tokens.
   */
  --color-black: black;
  --color-blue-overlay: rgba(0, 75, 148, 0.42);
  --color-dark-gray-1: #111111;
  --color-dark-gray-2: #222222;
  --color-dark-gray-3: #242424;
  --color-dark-blue: var(--ep-color-brand-primary);
  --color-teal: var(--ep-color-brand-secondary);
  --color-purple-gray: var(--ep-color-brand-muted);
  --color-gray-1: #707070;
  --color-gray-2: #757575;
  --color-mint: var(--ep-color-brand-accent);
  --color-gray-3: #999999;
  --color-light-gray-1: var(--ep-color-border-strong);
  --color-light-blue: #e9eef6;
  --color-light-gray-2: #eeeeee;
  --color-light-gray-3: #efefef;
  --color-white: white;
  --color-white-overlay: rgba(255, 255, 255, 0.61);
}