/*
  Design tokens for Randomizer's original design system.
  Light palette lives on :root; dark palette overrides the same variables.
  Three states are supported: no explicit choice (follows the OS/browser via
  prefers-color-scheme), and an explicit [data-theme="light"|"dark"] set by
  the theme switcher in the account menu, which always wins over the OS
  setting either direction (see app.js).
*/

:root {
  /* Surfaces */
  --bg: #F5F7F8;
  --surface: #FFFFFF;
  --surface-2: #EEF1F3;
  --border: #E4E8EB;

  /* Text */
  --text: #12161A;
  --text-secondary: #6B7480;
  --text-on-accent: #062B22;

  /* Brand */
  --accent: #00B67A;
  --accent-strong: #009E6A;
  --accent-soft: #E3F7EF;
  --danger: #E5484D;
  --danger-soft: #FCE9E9;
  --warning: #F5A524;
  --star: #F5A524;
  --info: #3B82F6;
  --info-soft: #E5EFFE;

  /* Secondary brand — pulled from the logo's ring (orange) and fork
     (yellow, via --warning above), so the palette isn't just green. */
  --orange: #E2540A;
  --orange-soft: #FDEADE;

  /* Shape */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(16, 24, 32, .05);
  --shadow-md: 0 10px 24px rgba(16, 24, 32, .08);
  --shadow-lg: 0 16px 40px rgba(16, 24, 32, .14);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  /* Layout */
  --tabbar-height: 64px;
  /* The tab bar's real on-screen height once the iOS home-indicator safe
     area is added — anything that needs to clear the bar (content padding,
     the Manage popover) should measure against this, not --tabbar-height
     alone, or it'll sit partly behind the bar on a notched phone. */
  --tabbar-total-height: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
  --topbar-height: 56px;
  --sidebar-width: 232px;
  --content-max: 720px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C0F12;
    --surface: #171B1F;
    --surface-2: #1F2429;
    --border: #2A3037;

    --text: #F2F4F6;
    --text-secondary: #98A2AD;
    --text-on-accent: #04140F;

    --accent: #00E6A0;
    --accent-strong: #14F2AE;
    --accent-soft: #103228;
    --danger: #FF6369;
    --danger-soft: #3A1618;
    --warning: #FFB84D;
    --star: #FFB84D;
    --info: #6EA8FF;
    --info-soft: #16233A;

    --orange: #FF8A4C;
    --orange-soft: #3A2113;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 10px 24px rgba(0, 0, 0, .45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
  }
}

/* The explicit choice always wins, in either direction. */
:root[data-theme="dark"] {
  --bg: #0C0F12;
  --surface: #171B1F;
  --surface-2: #1F2429;
  --border: #2A3037;

  --text: #F2F4F6;
  --text-secondary: #98A2AD;
  --text-on-accent: #04140F;

  --accent: #00E6A0;
  --accent-strong: #14F2AE;
  --accent-soft: #103228;
  --danger: #FF6369;
  --danger-soft: #3A1618;
  --warning: #FFB84D;
  --star: #FFB84D;
  --info: #6EA8FF;
  --info-soft: #16233A;

  --orange: #FF8A4C;
  --orange-soft: #3A2113;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
}