/* Polilo Coastal design tokens — copied from brandon.web/src/styles/tokens by `npm run sync-theme`.
   Do not edit here: change them in Polilo and sync again. */

/* ── colors.css ── */
/* ============================================
   Polilo Coastal — Color Tokens
   Ocean-inspired palette for a calm, motivating
   language-learning experience.
   ============================================ */
:root {
  /* ── Primary brand colors ── */
  --color-ocean-blue: #4d8cff; /* Primary buttons, active, progress, links */
  --color-sky-blue: #a8d7ff; /* Background accents, cards, inactive */
  --color-sea-green: #3cc7b6; /* Speaking/listening, success accents */
  --color-sunshine: #ffc95a; /* Rewards, badges, highlights, streaks */
  --color-coral: #ff6b5e; /* Attention, challenge, important actions */
  --color-sand: #ffd9a6; /* Warm backgrounds, soft surfaces, empty states */
  --color-rock: #6f6a8a; /* Secondary text, illustration shadows */

  /* ── Ocean Blue scale ── */
  --color-ocean-50: #edf4ff;
  --color-ocean-100: #d9e8ff;
  --color-ocean-200: #a8d7ff;
  --color-ocean-300: #7eb4ff;
  --color-ocean-400: #4d8cff;
  --color-ocean-500: #3b78eb;
  --color-ocean-600: #2e62c9;
  --color-ocean-700: #244ea1;

  /* ── Sea Green scale ── */
  --color-teal-50: #e7f8f5;
  --color-teal-100: #c3efe8;
  --color-teal-200: #a8e6db;
  --color-teal-300: #6fd8c8;
  --color-teal-400: #3cc7b6;
  --color-teal-500: #2fae9e;
  --color-teal-600: #248c7f;

  /* ── Warm scale ── */
  --color-warm-50: #fff7e8;
  --color-warm-100: #ffecc4;
  --color-warm-200: #ffd9a6;
  --color-warm-300: #ffc95a;
  --color-warm-400: #ff9a3c;
  --color-warm-500: #f2872a;

  /* ── Neutral palette ── */
  --color-white: #ffffff;
  --color-sand-light: #fff6e6;
  --color-mist: #f2f6fa;
  --color-cloud: #e6eef7;
  --color-stone-light: #d7dce6;
  --color-stone: #a7acc0;
  --color-dust: #8e94a6;
  --color-slate: #6f7488;
  --color-deep-slate: #495068;
  --color-navy: #262b45;

  /* ── Semantic colors ── */
  --color-success: #2ecc71;
  --color-warning: #ffc857;
  --color-error: #ff6b6b;
  --color-info: #4d8cff;
  --color-progress: #8f7cff;
  --color-highlight: #3cc7b6;
  --color-accent: #ff9a3c;
  --color-love: #ff7ea8;

  /* ── Skill / category colors ── */
  --color-cat-speaking: #4d8cff;
  --color-cat-listening: #3cc7b6;
  --color-cat-reading: #58cfa8;
  --color-cat-writing: #ffc95a;
  --color-cat-grammar: #ff9a3c;
  --color-cat-vocabulary: #8f7cff;
  --color-cat-pronunciation: #ff7ea8;
  --color-cat-exploration: #5ba8ff;

  /* ── Semantic surface / text aliases ── */
  --surface-page: #f8fbff;
  --surface-card: #ffffff;
  --surface-muted: var(--color-mist);
  --surface-warm: var(--color-sand-light);
  --surface-sky: var(--color-ocean-50);
  --surface-overlay: rgba(38, 43, 69, 0.45);

  --text-primary: #262b45; /* Navy — never pure black */
  --text-secondary: #6f7488; /* Slate */
  --text-tertiary: #8e94a6; /* Dust */
  --text-inverse: #ffffff;
  --text-link: #3b78eb;
  --text-on-brand: #ffffff;

  --border-subtle: rgba(73, 80, 104, 0.1);
  --border-default: rgba(73, 80, 104, 0.14);
  --border-strong: rgba(73, 80, 104, 0.22);
  --focus-ring: rgba(77, 140, 255, 0.18);
}

/* ── typography.css ── */
/* ============================================
   Polilo Coastal — Typography Tokens
   Manrope for display/headings, Nunito Sans for body/UI.
   Sentence case. Line length under ~70 chars.
   ============================================ */
:root {
  /* ── Font families ── */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ── Font sizes ── */
  --text-page-title: 2.25rem; /* 36px · 700 */
  --text-section-title: 1.625rem; /* 26px · 700 */
  --text-card-title: 1.25rem; /* 20px · 700 */
  --text-lg: 1.125rem; /* 18px */
  --text-body: 1rem; /* 16px · 400-500 */
  --text-sm: 0.9375rem; /* 15px */
  --text-label: 0.8125rem; /* 13px · 600 */
  --text-helper: 0.8125rem; /* 13px · 400 */
  --text-xs: 0.75rem; /* 12px */

  /* ── Font weights ── */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extra: 800;

  /* ── Line heights ── */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* ── Letter spacing ── */
  --tracking-tight: -0.01em;
  --tracking-label: 0.04em; /* short caps labels only */
}

/* ── spacing.css ── */
/* ============================================
   Polilo Coastal — Spacing & Layout Tokens
   8-point spacing system.
   ============================================ */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;

  /* ── Layout ── */
  --content-max: 1280px;
  --content-narrow: 720px;
  --card-padding: 24px;
  --card-padding-lg: 32px;
  --sidebar-width: 264px;
  --topbar-height: 68px;
}

/* ── effects.css ── */
/* ============================================
   Polilo Coastal — Radius, Border, Shadow, Motion
   ============================================ */
:root {
  /* ── Corner radius ── */
  --radius-sm: 10px; /* small input/button */
  --radius-md: 12px; /* button · internal card elements */
  --radius-lg: 16px; /* standard card */
  --radius-xl: 20px; /* feature card */
  --radius-2xl: 24px; /* feature card / hero */
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ── Borders ── */
  --border-thin: 1px solid rgba(73, 80, 104, 0.1);
  --border-card: 1px solid rgba(73, 80, 104, 0.1);

  /* ── Shadows (soft, coastal) ── */
  --shadow-xs: 0 1px 2px rgba(38, 43, 69, 0.05);
  --shadow-sm: 0 2px 8px rgba(38, 43, 69, 0.06);
  --shadow-card: 0 12px 32px rgba(38, 43, 69, 0.08);
  --shadow-lg: 0 18px 44px rgba(38, 43, 69, 0.12);
  --shadow-brand: 0 12px 28px rgba(77, 140, 255, 0.28);
  --shadow-reward: 0 12px 28px rgba(255, 154, 60, 0.3);
  --shadow-glass: 0 16px 40px rgba(77, 140, 255, 0.12);
  --shadow-focus: 0 0 0 3px rgba(77, 140, 255, 0.18);

  /* ── Glass card ── */
  --glass-bg: rgba(255, 255, 255, 0.74);
  --glass-border: 1px solid rgba(255, 255, 255, 0.55);
  --glass-blur: blur(24px);

  /* ── Motion (short, positive) ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-normal: 220ms;
  --dur-slow: 340ms;
}

/* ── gradients.css ── */
/* ============================================
   Polilo Coastal — Gradient System
   ============================================ */
:root {
  --gradient-ocean-breeze: linear-gradient(135deg, #4d8cff 0%, #a8d7ff 100%);
  --gradient-seafoam: linear-gradient(135deg, #3cc7b6 0%, #a8e6db 100%);
  --gradient-sunshine: linear-gradient(135deg, #ffc95a 0%, #ff9a3c 100%);
  --gradient-twilight: linear-gradient(135deg, #4d8cff 0%, #8f7cff 100%);
  --gradient-primary: linear-gradient(135deg, #4d8cff 0%, #6f7cff 100%);

  --gradient-coastal-mesh:
    radial-gradient(circle at 15% 20%, rgba(77, 140, 255, 0.65) 0%, transparent 38%),
    radial-gradient(circle at 82% 18%, rgba(60, 199, 182, 0.48) 0%, transparent 34%),
    radial-gradient(circle at 70% 78%, rgba(255, 201, 90, 0.42) 0%, transparent 36%),
    radial-gradient(circle at 25% 82%, rgba(255, 107, 94, 0.28) 0%, transparent 32%), #f8fbff;

  /* Softer mesh for content-heavy screens */
  --gradient-coastal-mesh-soft:
    radial-gradient(circle at 12% 18%, rgba(77, 140, 255, 0.22) 0%, transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(60, 199, 182, 0.18) 0%, transparent 36%),
    radial-gradient(circle at 78% 82%, rgba(255, 201, 90, 0.16) 0%, transparent 38%), #f8fbff;
}

.gradient-ocean-breeze {
  background: var(--gradient-ocean-breeze);
}
.gradient-seafoam {
  background: var(--gradient-seafoam);
}
.gradient-sunshine {
  background: var(--gradient-sunshine);
}
.gradient-twilight {
  background: var(--gradient-twilight);
}
.gradient-primary {
  background: var(--gradient-primary);
}
.gradient-coastal-mesh {
  background: var(--gradient-coastal-mesh);
}
.gradient-coastal-mesh-soft {
  background: var(--gradient-coastal-mesh-soft);
}