/* ==========================================================================
   X.com.ly — theme.css
   Design tokens: color, typography, spacing, radius, shadow, motion.
   Values are derived from the original app's palette and expanded into a
   full, professional design system.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Brand palette --------------------------------------------------- */
  --c-primary: #58cc02;
  --c-primary-dark: #46a302;
  --c-primary-darker: #3a8702;
  --c-primary-light: #89e219;
  --c-primary-soft: #e9f8d5;
  --c-primary-softer: #f4fbea;

  --c-secondary: #1cb0f6;
  --c-secondary-dark: #1899d6;
  --c-secondary-soft: #e2f4fd;

  --c-accent: #ffc800;
  --c-accent-dark: #e0ad00;
  --c-accent-soft: #fff6d6;

  --c-danger: #ff4b4b;
  --c-danger-dark: #ea2b2b;
  --c-danger-soft: #ffe5e5;

  --c-success: #58cc02;
  --c-warning: #ffc800;
  --c-info: #1cb0f6;

  /* ---- Neutrals -------------------------------------------------------- */
  --c-bg: #ffffff;
  --c-bg-alt: #f7f9fa;
  --c-surface: #ffffff;
  --c-surface-2: #f4f6f7;
  --c-surface-3: #eceff1;
  --c-border: #e5e7e9;
  --c-border-strong: #d3d7db;
  --c-text: #3c3c3c;
  --c-text-strong: #1f2328;
  --c-text-muted: #777f88;
  --c-text-invert: #ffffff;

  /* ---- League accent --------------------------------------------------- */
  --c-league: #a0a0a0;
  --c-league-soft: rgba(160, 160, 160, 0.14);

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
    sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;

  --fs-2xs: 0.6875rem; /* 11px */
  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.8125rem;  /* 13px */
  --fs-md: 0.9375rem;  /* 15px */
  --fs-lg: 1.0625rem;  /* 17px */
  --fs-xl: 1.25rem;    /* 20px */
  --fs-2xl: 1.5rem;    /* 24px */
  --fs-3xl: 1.875rem;  /* 30px */
  --fs-4xl: 2.25rem;   /* 36px */
  --fs-5xl: 3rem;      /* 48px */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.6;

  /* ---- Spacing scale (4px base) ---------------------------------------- */
  --sp-1: 0.25rem;  /* 4 */
  --sp-2: 0.5rem;   /* 8 */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.25rem;  /* 20 */
  --sp-6: 1.5rem;   /* 24 */
  --sp-7: 2rem;     /* 32 */
  --sp-8: 2.5rem;   /* 40 */
  --sp-9: 3rem;     /* 48 */
  --sp-10: 4rem;    /* 64 */

  /* ---- Radius ---------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---- Shadows --------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(31, 35, 40, 0.06), 0 1px 3px rgba(31, 35, 40, 0.05);
  --sh-2: 0 4px 10px rgba(31, 35, 40, 0.08), 0 2px 4px rgba(31, 35, 40, 0.05);
  --sh-3: 0 12px 28px rgba(31, 35, 40, 0.14), 0 4px 10px rgba(31, 35, 40, 0.08);
  --sh-focus: 0 0 0 4px rgba(88, 204, 2, 0.28);
  --sh-inset: inset 0 -4px 0 rgba(0, 0, 0, 0.12);

  /* ---- Motion ---------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Layout ---------------------------------------------------------- */
  --container-max: 640px;
  --container-wide: 960px;
  --header-h: 60px;
  --bottomnav-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --supportbar-h: 0px; /* grows when the suppport/donation bar is mounted */

  /* ---- Z-index --------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-nav: 300;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 1000;
}

/* When the thin support/donation bar is mounted at the very top. */
html.has-support-bar {
  --supportbar-h: 36px;
}

/* ==========================================================================
   League themes — change the global accent per league tier.
   ========================================================================== */
[data-league="gold"] {
  --c-league: #ffd700;
  --c-league-soft: rgba(255, 215, 0, 0.16);
  --c-primary: #e6b800;
  --c-primary-dark: #b38f00;
  --c-primary-light: #ffd54a;
}

[data-league="diamond"] {
  --c-league: #00d4ff;
  --c-league-soft: rgba(0, 212, 255, 0.16);
  --c-primary: #00b8dd;
  --c-primary-dark: #0093b4;
  --c-primary-light: #5ee7ff;
}

/* ==========================================================================
   Dark theme — opt-in via data-theme="dark".
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --c-bg: #14181d;
  --c-bg-alt: #0f1216;
  --c-surface: #1c222a;
  --c-surface-2: #232b34;
  --c-surface-3: #2c353f;
  --c-border: #2f3944;
  --c-border-strong: #3c4854;
  --c-text: #e6eaee;
  --c-text-strong: #ffffff;
  --c-text-muted: #9aa5b1;

  --c-primary-soft: rgba(88, 204, 2, 0.18);
  --c-primary-softer: rgba(88, 204, 2, 0.08);
  --c-secondary-soft: rgba(28, 176, 246, 0.18);
  --c-accent-soft: rgba(255, 200, 0, 0.18);
  --c-danger-soft: rgba(255, 75, 75, 0.18);

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 4px 10px rgba(0, 0, 0, 0.45);
  --sh-3: 0 12px 28px rgba(0, 0, 0, 0.55);
}