/* AirEnglish Design Tokens */

:root {
  /* ============ Colors ============ */
  /* Ocean & Sky */
  --color-ocean-dark: #0A1428;
  --color-ocean-deep: #0D3B66;
  --color-sky-light: #4ECDC4;
  --color-sky-bright: #6DD5E7;
  --color-white: #FFFFFF;
  --color-white-translucent: rgba(255, 255, 255, 0.1);
  --color-white-translucent-strong: rgba(255, 255, 255, 0.3);

  /* Functional */
  --color-primary: #6DD5E7;
  --color-secondary: #4ECDC4;
  --color-accent: #9B59B6;
  --color-success: #27AE60;
  --color-warning: #F39C12;
  --color-error: #E74C3C;
  --color-gem: #00BCD4;
  --color-xp: #FFC107;
  --color-locked: #95A5A6;

  /* Text */
  --color-text-primary: #0A1428;
  --color-text-secondary: #5D6D7B;
  --color-text-light: #FFFFFF;
  --color-text-inverse: #0A1428;

  /* Background */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F0F4F8;
  --color-bg-tertiary: #E8F0F5;
  --color-bg-page: #F9FBFD;
  --color-bg-dark: #0A1428;

  /* Ocean (extended) */
  --color-ocean-light: #1A5490; /* promoted from the dark-mode override below, for reuse outside that block */

  /* Travel (Fase 4 Pasaporte visual language, promoted from css/passport.css literals) */
  --color-travel-gold: #DAA520;
  --color-travel-azure: #1E90FF;
  --color-travel-mist-start: #F0F8FF;
  --color-travel-mist-end: #E0F8FF;
  --color-travel-frost-start: #F0FFFF;
  --color-travel-frost-end: #E6F7FF;
  --color-travel-border-light: #B0E0E6;
  --color-travel-gold-wash: rgba(218, 165, 32, 0.05); /* passport-cover watermark pattern */

  /* Premium (commercial/entitlement visual language — see state.access, js/core/entitlements.js).
     Distinct from --color-gem/--color-xp, which are gamification currencies, not commercial access. */
  --color-premium: var(--color-accent);
  --color-premium-accent: var(--color-travel-gold);
  --color-premium-bg-soft: rgba(155, 89, 182, 0.08);
  --color-premium-text: var(--color-accent);

  /* Danger (semantic alias of --color-error, used by newer Fase 8 naming) */
  --color-danger: var(--color-error);

  /* Soft/tinted backgrounds (promoted from css/components.css .alert-* literals) */
  --color-success-bg-soft: rgba(39, 174, 96, 0.1);
  --color-warning-bg-soft: rgba(243, 156, 18, 0.1);
  --color-danger-bg-soft: rgba(231, 76, 60, 0.1);
  --color-info-bg-soft: rgba(109, 213, 231, 0.1);
  --color-xp-bg-soft: rgba(255, 193, 7, 0.1);
  --color-achievement-bg-soft: rgba(218, 165, 32, 0.1);

  /* Badge-specific soft backgrounds (found during the Fase 8 Parte 2
     css/courses.css audit) — different alpha than the *-bg-soft tokens
     above, preserved exactly as-is rather than forced onto that scale. */
  --color-badge-success-bg: rgba(39, 174, 96, 0.15);
  --color-badge-premium-bg: rgba(155, 89, 182, 0.15);
  --color-badge-preview-bg: rgba(109, 213, 231, 0.2);
  --color-badge-neutral-bg: rgba(149, 165, 166, 0.2);
  --color-badge-danger-bg: rgba(231, 76, 60, 0.15);

  /* Lesson card state tints (found during the Fase 8 Parte 2 css/lessons.css
     migration of the REAL .lesson-card used by js/pages/city.js
     createLessonCard() — not the speculative duplicate that was removed) */
  --color-lesson-completed-bg: rgba(39, 174, 96, 0.05);
  --color-lesson-in-progress-bg: rgba(109, 213, 231, 0.05);
  --color-lesson-locked-bg: rgba(149, 165, 166, 0.05);

  /* XP gradient (promoted from js/components/header.js inline star icon gradient) */
  --color-xp-gradient-start: #FFD700;
  --color-xp-gradient-end: #FFC700;

  /* Neutral grey scale (promoted from css/passport.css collectible-card literals) */
  --color-neutral-25: #F9F9F9;
  --color-neutral-50: #F5F5F5;
  --color-neutral-100: #EEEEEE;
  --color-neutral-200: #E0E0E0;
  --color-neutral-300: #D0D5DD;
  --color-neutral-400: #999999;
  --color-neutral-600: #666666;
  --color-neutral-900: #333333;

  /* Text (extended) */
  --color-text-muted: var(--color-neutral-400);
  --color-text-placeholder: var(--color-neutral-400);
  --color-text-disabled: var(--color-neutral-300);
  --color-text-premium: var(--color-premium-text);
  --color-text-danger: var(--color-danger);

  /* Divider */
  --color-divider: var(--color-bg-secondary);
  --color-divider-strong: var(--color-neutral-200);

  /* Glass & Overlay (promoted from css/home.css .home-panel / .app-header literals) */
  --color-glass-bg: rgba(13, 59, 102, 0.7);
  --color-glass-bg-light: var(--color-white-translucent);
  --color-glass-border: rgba(109, 213, 231, 0.2);
  --color-overlay: rgba(10, 20, 40, 0.5);
  --color-overlay-strong: rgba(10, 20, 40, 0.75);

  /* Interaction state tints (hover/pressed/selected washes over content) */
  --color-state-hover: rgba(255, 255, 255, 0.08);
  --color-state-pressed: rgba(0, 0, 0, 0.08);
  --color-state-selected: rgba(109, 213, 231, 0.12);
  --color-state-disabled-bg: var(--color-locked);
  --color-state-locked: var(--color-locked);
  --color-state-current: var(--color-primary);
  --color-state-completed: var(--color-success);
  --color-state-coming-soon: var(--color-neutral-400);
  --color-state-active: var(--color-primary);

  /* ============ Typography ============ */
  /* Font families */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", sans-serif;
  --font-family-display: var(--font-family-sans);
  --font-family-mono: "Menlo", "Monaco", "Courier New", monospace;

  /* Font sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Semantic type scale (Display XL → Overline). Sizes reference the raw
     --font-size-* scale above; nothing here introduces a new pixel value
     except where noted. Consumed by future .text-* utility classes in
     Fase 8 Parte 2 — no new classes are created in this part. */
  --type-display-xl-size: var(--font-size-6xl);
  --type-display-xl-weight: var(--font-weight-bold);
  --type-display-xl-line-height: 1.1;

  --type-display-size: var(--font-size-5xl);
  --type-display-weight: var(--font-weight-bold);
  --type-display-line-height: 1.15;

  --type-heading-size: var(--font-size-4xl);
  --type-heading-weight: var(--font-weight-bold);
  --type-heading-line-height: 1.2;

  --type-title-size: var(--font-size-3xl);
  --type-title-weight: var(--font-weight-semibold);
  --type-title-line-height: 1.25;

  --type-subtitle-size: var(--font-size-xl);
  --type-subtitle-weight: var(--font-weight-semibold);
  --type-subtitle-line-height: 1.3;

  --type-body-lg-size: var(--font-size-lg);
  --type-body-lg-weight: var(--font-weight-normal);
  --type-body-lg-line-height: 1.6;

  --type-body-size: var(--font-size-base);
  --type-body-weight: var(--font-weight-normal);
  --type-body-line-height: 1.5;

  --type-body-sm-size: var(--font-size-sm);
  --type-body-sm-weight: var(--font-weight-normal);
  --type-body-sm-line-height: 1.5;

  --type-caption-size: var(--font-size-xs);
  --type-caption-weight: var(--font-weight-normal);
  --type-caption-line-height: 1.4;

  --type-label-size: var(--font-size-xs);
  --type-label-weight: var(--font-weight-semibold);
  --type-label-line-height: 1.3;
  --type-label-letter-spacing: 0.02em;

  --type-button-size: var(--font-size-base);
  --type-button-weight: var(--font-weight-semibold);
  --type-button-line-height: 1;

  --type-overline-size: var(--font-size-xs);
  --type-overline-weight: var(--font-weight-semibold);
  --type-overline-line-height: 1.3;
  --type-overline-letter-spacing: 0.08em;
  --type-overline-transform: uppercase;

  /* ============ Spacing ============ */
  --space-0: 0;
  --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;

  /* ============ Border radius ============ */
  --radius-0: 0;
  --radius-1: 0.25rem;
  --radius-2: 0.5rem;
  --radius-3: 0.75rem;
  --radius-4: 1rem;
  --radius-5: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* Semantic radius aliases (none/xs/sm/md/lg/xl/2xl/pill/circle) — same
     values as above, named to match the Fase 8 spec vocabulary. Existing
     --radius-0..5 names are kept as-is; nothing here renames them. */
  --radius-none: var(--radius-0);
  --radius-xs: var(--radius-1);
  --radius-sm: var(--radius-2);
  --radius-md: var(--radius-3);
  --radius-lg: var(--radius-4);
  --radius-xl: var(--radius-5);
  --radius-pill: var(--radius-full);
  --radius-circle: 50%;

  /* ============ Shadows ============ */
  --shadow-none: none;
  --shadow-xs: 0 1px 1px rgba(10, 20, 40, 0.04);
  --shadow-sm: 0 1px 2px rgba(10, 20, 40, 0.05);
  --shadow-md: 0 4px 6px rgba(10, 20, 40, 0.1);
  --shadow-lg: 0 10px 15px rgba(10, 20, 40, 0.15);
  --shadow-xl: 0 20px 25px rgba(10, 20, 40, 0.2);
  --shadow-2xl: 0 25px 50px rgba(10, 20, 40, 0.25);
  --shadow-glass: 0 8px 32px rgba(13, 59, 102, 0.1),
    inset 0 -2px 8px rgba(255, 255, 255, 0.1);

  /* Semantic elevation shadows — aliases of the scale above, named for
     where they'll be consumed in Fase 8 Parte 2 (Card, BottomSheet, Dialog). */
  --shadow-card: var(--shadow-md);
  --shadow-floating: var(--shadow-lg);
  --shadow-modal: var(--shadow-2xl);
  --shadow-premium: 0 8px 24px rgba(155, 89, 182, 0.25);

  /* Card elevation family found during the Fase 8 Parte 2 css/passport.css
     migration — pure black rgba(), distinct from the navy-tinted
     rgba(10, 20, 40, x) used by --shadow-sm..2xl above. Preserved exactly
     as-is (not unified with the navy scale) so the migration produces
     zero visual change. --shadow-postcard-rest intentionally has a
     different alpha (0.1) than --shadow-card-hover (0.12) even though
     both are used as a "hover" shadow in their respective components —
     that mismatch already existed in the source and is not corrected here. */
  --shadow-card-rest: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-card-elevated: 0 8px 16px rgba(0, 0, 0, 0.15);
  --shadow-avatar-ring: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-postcard-rest: 0 4px 12px rgba(0, 0, 0, 0.1);

  /* ============ Borders ============ */
  --border-width-thin: 1px;
  --border-width-default: 2px;
  --border-width-strong: 3px;
  --border-color-default: var(--color-divider);
  --border-color-strong: var(--color-divider-strong);
  --border-color-glass: var(--color-glass-border);
  --border-color-premium: var(--color-travel-gold);

  /* ============ Opacity / Transparency ============ */
  --opacity-disabled: 0.6;
  --opacity-glass: 0.7;
  --opacity-hover: 0.08;
  --opacity-pressed: 0.08;
  --opacity-selected: 0.12;
  --opacity-overlay: 0.5;

  /* ============ Blur ============ */
  --blur-sm: blur(4px);
  --blur-md: blur(10px);
  --blur-lg: blur(20px);
  --blur-glass: var(--blur-md);
  --blur-drawer: blur(6px);
  --blur-modal: blur(12px);

  /* ============ Icon ============ */
  --icon-size-xs: 16px;
  --icon-size-sm: 20px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;
  --icon-size-xl: 48px;
  --icon-stroke-width: 2px;
  --icon-color: currentColor;

  /* ============ Z-index ============ */
  --z-hide: -1;
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-bg: 400;
  --z-modal: 401;
  --z-tooltip: 500;
  --z-notification: 600;

  /* ============ Elevation ============ */
  /* Semantic surface levels, each mapped onto the existing z-index scale
     above — no new stacking-context values introduced, only names for
     where each level is consumed (Fase 8 Parte 2 components). */
  --elevation-background: var(--z-base);
  --elevation-card: var(--z-base);
  --elevation-floating-card: var(--z-dropdown);
  --elevation-drawer: var(--z-fixed);
  --elevation-bottom-sheet: var(--z-fixed);
  --elevation-dialog: var(--z-modal);
  --elevation-modal: var(--z-modal);
  --elevation-toast: var(--z-notification);
  --elevation-tooltip: var(--z-tooltip);

  /* ============ Motion ============ */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;
  --duration-extra-slow: var(--duration-slower);
  --duration-shimmer: 1500ms;

  --ease-linear: linear;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Reserved animation names for Fase 8 Parte 2 (fade, fade-up, fade-down,
     slide-left, slide-right, scale, pop, pulse, shake, success,
     celebration, xp, achievement, premium). Documented here and in
     docs/DESIGN_TOKENS.md; no @keyframes are defined yet — each will pair
     one of these names with the duration/easing tokens above when it is
     implemented. Existing keyframes already in the codebase (spin,
     levelUpPulse, pulse, routeAnimation, slideUp, slideInLeft, slideIn,
     bounce, slideInUp) are unaffected and not renamed by this reservation. */

  /* ============ Scale (transform) ============ */
  --scale-press: 0.98;
  --scale-hover: 1.02;
  --scale-pop: 1.15;
  --scale-shrink: 0.95;

  /* ============ Breakpoints ============ */
  --bp-xs: 320px;
  --bp-360: 360px;
  --bp-sm: 375px;
  --bp-md: 390px;
  --bp-lg: 414px;
  --bp-xl: 768px;
  --bp-2xl: 1024px;
  --bp-3xl: 1280px;
  --bp-4xl: 1440px;

  /* ============ Layout ============ */
  --max-width-sm: 640px;
  --max-width-md: 768px;
  --max-width-lg: 1024px;
  --max-width-xl: 1280px;
  --max-width-2xl: 1400px;

  /* Container width for centered content */
  --container-width: min(100% - var(--space-8), var(--max-width-xl));
  --container-padding: var(--space-4);

  /* Safe area (for notch/safe zones on mobile) */
  --safe-area-top: max(var(--space-4), env(safe-area-inset-top));
  --safe-area-right: max(var(--space-4), env(safe-area-inset-right));
  --safe-area-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  --safe-area-left: max(var(--space-4), env(safe-area-inset-left));

  /* ============ Button tokens (definitions only) ============ */
  /* Variant and size tokens for the future Button component (Fase 8 Parte
     2). No .btn-* classes are added or changed here — css/components.css
     already has a working .btn implementation with its own variants
     (primary, secondary, outline, ghost, success, error, warning, sm, lg);
     these tokens exist so Parte 2 can build Premium/Travel/Icon/Floating/
     Link/Loading variants on the same values instead of new literals. */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-text: var(--color-text-light);
  --btn-secondary-bg: var(--color-secondary);
  --btn-secondary-text: var(--color-text-light);
  --btn-ghost-bg: transparent;
  --btn-ghost-text: var(--color-primary);
  --btn-outline-bg: transparent;
  --btn-outline-border: var(--color-primary);
  --btn-outline-text: var(--color-primary);
  --btn-success-bg: var(--color-success);
  --btn-success-text: var(--color-text-light);
  --btn-danger-bg: var(--color-danger);
  --btn-danger-text: var(--color-text-light);
  --btn-premium-bg: var(--color-premium);
  --btn-premium-text: var(--color-text-light);
  --btn-travel-bg: var(--color-travel-azure);
  --btn-travel-text: var(--color-text-light);
  --btn-icon-size: 44px;
  --btn-floating-shadow: var(--shadow-floating);
  --btn-link-text: var(--color-primary);
  --btn-disabled-bg: var(--color-locked);
  --btn-disabled-text: var(--color-text-light);
  --btn-disabled-opacity: var(--opacity-disabled);
  --btn-loading-opacity: 0.7;

  --btn-size-sm-min-height: 36px;
  --btn-size-sm-padding: var(--space-2) var(--space-4);
  --btn-size-md-min-height: 44px;
  --btn-size-md-padding: var(--space-3) var(--space-6);
  --btn-size-lg-min-height: 48px;
  --btn-size-lg-padding: var(--space-4) var(--space-8);
}

/* Effective preferences are resolved by settings-runtime.js. Keeping the
   media-query fallback only while no runtime attribute exists avoids a flash
   of the wrong preference and still lets explicit "full"/"light" override OS. */
:root[data-motion="reduce"] {
  --duration-fast: 0.01ms;
  --duration-normal: 0.01ms;
  --duration-slow: 0.01ms;
  --duration-slower: 0.01ms;
  scroll-behavior: auto !important;
}

:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-page: #0A1428;
  --color-bg-primary: #0D3B66;
  --color-bg-secondary: #1A5490;
  --color-bg-tertiary: #2A6DB8;
  --color-text-primary: #E8F0F5;
  --color-text-secondary: #B0BCCC;
}

:root[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) {
    --duration-fast: 0.01ms;
    --duration-normal: 0.01ms;
    --duration-slow: 0.01ms;
    --duration-slower: 0.01ms;
  }

  :root:not([data-motion]) *,
  :root:not([data-motion]) *::before,
  :root:not([data-motion]) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-bg-page: #0A1428;
    --color-bg-primary: #0D3B66;
    --color-bg-secondary: #1A5490;
    --color-bg-tertiary: #2A6DB8;
    --color-text-primary: #E8F0F5;
    --color-text-secondary: #B0BCCC;
  }
}