/* Self-hosted Satoshi — v15.0 Brand Font */
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Satoshi-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Satoshi-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Satoshi-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Satoshi-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/Satoshi-Black.woff2') format('woff2');
}

/* WorldWise - Main Styles */

/* @layer order declaration - defines priority order for all layers */
@layer tokens, reset, base, layout, components, pages, utilities, animations;

/* Design Tokens - 60+ tokens defining the visual language */
@layer tokens {
  :root {
    /* === v15.0 Brand Tokens (source of truth) === */
    --green-primary: #2a9060;
    --green-dark: #1a6040;
    --green-light: #42c480;
    --green-xlight: #e4f5ef;
    --green-gradient: linear-gradient(180deg, #42c480, #27a05e);
    --blue-accent: #2aa0d6;
    --orange-accent: #e07a20;
    --gold-accent: #ffc61f;
    --red-error: #cc4422;
    --text-primary: #1a3a30;
    --text-muted: #4a6560;
    --text-faint: #9ab0a0;
    --surface: rgba(255, 255, 255, 0.62);
    --surface-card: rgba(255, 255, 255, 0.9);
    --surface-frosted: rgba(255, 255, 255, 0.72);
    --border-glass: rgba(255, 255, 255, 0.72);
    --border-green: rgba(42, 144, 96, 0.22);
    --radius-pill: 999px;
    --radius-card: 20px;
    --radius-phone: 34px;
    --shadow-md: 0 4px 16px rgba(0, 80, 60, 0.09), 0 18px 38px rgba(0, 80, 60, 0.12);
    /* === End v15.0 Brand Tokens === */

    /* ===== Colors - Primary Palette ===== */
    --color-primary: var(--green-primary); /* v15.0: rebound from #58CC02 */
    --color-primary-dark: var(--green-dark); /* v15.0: rebound from #46A302 */
    --color-primary-light: var(--green-light); /* v15.0: rebound from #7ED321 */
    --color-secondary: #1CB0F6; /* Sky blue */
    --color-secondary-dark: #1899D6;
    --color-accent: #FF9600; /* Vibrant orange */
    --color-accent-dark: #E08600;

    /* ===== Colors - Semantic ===== */
    --color-success: var(--green-primary); /* v15.0: rebound from #58CC02 */
    --color-danger: var(--red-error); /* v15.0: rebound from #FF4B4B */
    --color-warning: #FFC800;
    --color-info: #1CB0F6;
    --color-error: var(--red-error); /* v15.0: rebound from #FF4B4B */

    /* ===== Colors - Neutrals (light to dark) ===== */
    --color-neutral-50: #F9FAFB;
    --color-neutral-100: #F3F4F6;
    --color-neutral-200: #E5E7EB;
    --color-neutral-300: #D1D5DB;
    --color-neutral-400: #9CA3AF;
    --color-neutral-500: #6B7280;
    --color-neutral-600: #4B5563;
    --color-neutral-700: #374151;
    --color-neutral-800: #1F2937;
    --color-neutral-900: #111827;

    /* ===== Colors - Surfaces ===== */
    --color-bg: var(--green-xlight); /* v15.0: rebound from #E5F6FF */
    --color-bg-end: var(--green-xlight); /* v15.0: rebound from #F0E6FF */
    --color-surface: var(--surface-card); /* v15.0: rebound from #FFFFFF */
    --color-surface-hover: #F7F7F7;
    --color-surface-active: #EFEFEF;

    /* ===== Colors - Decorative Blobs ===== */
    --color-blob-peach: #FFDAB9;
    --color-blob-mint: #B2DFDB;
    --color-blob-pink: #F8BBD0;
    --color-blob-opacity: 0.25;

    /* ===== Colors - Round Types ===== */
    --color-round-calc: #4F9BF5; /* Vibrant blue */
    --color-round-word: #9B59B6; /* Vibrant purple */
    --color-round-flag: #FF9600; /* Vibrant orange */
    --color-round-silhouette: #1ABC9C; /* Vibrant teal */
    --color-round-capital: #E74C3C; /* Warm red - government/cities */
    --color-round-currency: #27AE60; /* Green - money association */

    /* ===== Colors - Text ===== */
    --color-text: var(--text-primary); /* v15.0: rebound from #3C3C3C */
    --color-text-light: var(--text-muted); /* v15.0: rebound from #777777 */
    --color-text-inverse: #FFFFFF;
    --color-text-muted: var(--text-faint); /* v15.0: rebound from #AFAFAF */

    /* ===== Colors - Headings & Brand ===== */
    --color-heading: #1a3a30; /* Deep teal — applied to h1, h2, h3 */
    --color-brand: #2a9060;   /* Brand green — applied only via .wordmark */

    /* ===== Typography - Families ===== */
    --font-display: "Satoshi", system-ui, sans-serif; /* v15.0: rebound from 'Fredoka' */
    --font-body: "Satoshi", system-ui, sans-serif; /* v15.0: rebound from 'Nunito' */
    --font-mono: 'Courier New', monospace;

    /* ===== Typography - Sizes ===== */
    --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: 2rem;
    --text-4xl: 2.5rem;

    /* ===== Typography - Weights ===== */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* ===== Typography - Line Heights ===== */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* ===== 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;

    /* ===== Borders & Radii ===== */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-full: 9999px;
    --border-width: 2px;
    --border-thick: 3px;

    /* ===== Shadows ===== */
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-button: 0 4px 0 rgba(0, 0, 0, 0.2); /* Duolingo style - bottom heavy */
    --shadow-button-active: 0 2px 0 rgba(0, 0, 0, 0.2); /* Pressed button shadow */

    /* ===== Transitions ===== */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

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

    /* v15.0 shadow overrides (must come after legacy declarations) */
    --shadow-sm: 0 1px 4px rgba(0, 60, 40, 0.06); /* v15.0: override — was 0 1px 2px rgba(0,0,0,0.05) */

    /* Legacy aliases — preserve backward compatibility */
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --secondary: var(--color-secondary);
    --danger: var(--color-danger);
    --bg: var(--color-bg);
    --bg-card: var(--color-surface);
    --text: var(--color-text);
    --text-muted: var(--color-text-muted);
    --border: var(--color-neutral-200);
    --success: var(--color-success);
    --warning: var(--color-warning);
  }
}

/* Reset layer - universal reset */
@layer reset {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

/* Base layer - element-level styles */
@layer base {
  body {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.5;
    background: var(--green-xlight);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6) var(--space-3);
  }

  /* Decorative background blobs */
  body::before,
  body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
  }
  body::before {
    width: clamp(200px, 30vw, 400px);
    height: clamp(200px, 30vw, 400px);
    background: var(--color-blob-peach);
    opacity: var(--color-blob-opacity);
    top: -5%;
    right: -8%;
  }
  body::after {
    width: clamp(180px, 25vw, 350px);
    height: clamp(180px, 25vw, 350px);
    background: var(--color-blob-mint);
    opacity: var(--color-blob-opacity);
    bottom: 10%;
    left: -10%;
  }
  main::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    width: clamp(150px, 20vw, 280px);
    height: clamp(150px, 20vw, 280px);
    background: var(--color-blob-pink);
    opacity: calc(var(--color-blob-opacity) * 0.8);
    top: 50%;
    right: -5%;
  }

  @media (max-width: 640px) {
    body::before { width: 150px; height: 150px; opacity: 0.15; }
    body::after { width: 120px; height: 120px; opacity: 0.15; }
    main::after { width: 100px; height: 100px; opacity: 0.12; }
  }

  /* Desktop-only decorative blobs (progressive enhancement) */
  .blob-desktop {
    display: none;
    position: fixed;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
  }

  @media (min-width: 1024px) {
    .blob-desktop {
      display: block;
    }

    .blob-desktop-1 {
      width: 200px;
      height: 200px;
      background: var(--color-blob-peach);
      opacity: var(--color-blob-opacity);
      top: 30%;
      right: 5%;
    }

    .blob-desktop-2 {
      width: 160px;
      height: 160px;
      background: var(--color-blob-mint);
      opacity: calc(var(--color-blob-opacity) * 0.7);
      bottom: 20%;
      left: 3%;
    }
  }

  h1 {
    font-family: var(--font-body);
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-primary);
    font-size: var(--text-3xl);
    margin-bottom: var(--space-2);
  }

  h2, h3 {
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
  }

  h2 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
  }

  h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
  }

  h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 1.2;
  }

  button {
    font-family: var(--font-body);
    font-weight: 700;
  }

  input, select {
    font-family: var(--font-body);
    font-weight: 500;
    border-radius: var(--radius-pill);
  }

  textarea {
    font-family: var(--font-body);
    font-weight: 500;
    border-radius: var(--radius-card);
  }

  :focus-visible {
    outline: 2px solid var(--green-primary);
    outline-offset: 2px;
  }

  .wordmark { color: var(--color-brand); }

  .page-subtitle {
    color: var(--color-text-muted);
    text-align: center;
    font-size: var(--text-base);
    margin-top: var(--space-1);
  }

  a {
    text-decoration: none;
  }
}

/* Layout layer - structural layout */
@layer layout {
  main {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Tablet and desktop container widening */
  @media (min-width: 768px) {
    main {
      max-width: 500px;
    }
  }

  @media (min-width: 1024px) {
    main {
      max-width: 600px;
    }
  }

  @media (max-width: 640px) {
    main {
      overflow-y: visible;
      padding-bottom: var(--space-4);
      /* Scrollbar styling for webkit browsers */
      scrollbar-width: thin;
      scrollbar-color: var(--color-neutral-300) transparent;
    }

    main::-webkit-scrollbar {
      width: 4px;
    }

    main::-webkit-scrollbar-track {
      background: transparent;
    }

    main::-webkit-scrollbar-thumb {
      background: var(--color-neutral-300);
      border-radius: 4px;
    }
  }

  .card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-5);
    border: none;
  }
}