/* Shared design tokens for the app shell. Promoted from the --farm-* custom
   properties FarmGame.css already defined (see components/FarmGame.css) so
   the rest of the app draws from the same palette instead of six copies of
   the same hex codes. Both Home.css/Login.css and FarmGame.css read from
   this file — raw hex belongs here and nowhere else (enforced by
   stylelint's color-no-hex rule with a theme.css override). Since Phase 16
   the same goes for raw rgba() and raw durations: stylelint rejects both
   outside this file, so every translucent colour, shadow and timing is a
   named token below.

   Phase 19: three themes. The :root block is dark (the default); the
   [data-theme="dim"] and [data-theme="light"] blocks at the bottom only
   override what differs, and useAppearance sets the attribute on <html>
   from User.layout.theme. Same for [data-density="compact"]. Every theme
   has its contrast grid in docs/phase19/contrast-grid.md, generated by
   scripts/contrast-grid.js from this file.

   Breakpoints are documented here rather than as custom properties: CSS
   custom properties can't be used inside @media query conditions.
     phone   — up to 768px
     tablet  — up to 1024px
     desktop — default (above 1024px)
*/

:root {
  /* Neutral ramp - Phase 16 retired the inherited Discord greys for a ramp
     with a slight cool (blue) bias. Same five roles as before. */
  --bg-deep: #262a33;
  --bg: #2d313b;
  --surface: #3b404c;
  --border: #1a1d24;
  /* The emoji picker (emoji-mart) takes its colours as R, G, B triplets. */
  --emoji-rgb-background: 38, 42, 51;
  --emoji-rgb-input: 59, 64, 76;
  --emoji-rgb-color: 223, 226, 232;
  --emoji-rgb-accent: 88, 101, 242;
  /* Scrollbars everywhere (index.css): a quiet thumb on no track. */
  --scrollbar-thumb: rgba(255, 255, 255, 0.16);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);

  --text: #fff;
  --text-body: #dfe2e8;
  --text-muted: #b7bdc8;
  --text-faint: #a0a7b4;

  --accent: #5865f2;
  --accent-hover: #4752c4;
  /* Older, softer indigo used for default avatars/identity accents
     (predates --accent) - kept distinct rather than folded in, since it's
     visually different enough to notice. */
  --accent-alt: #7289da;
  --success: #3ba55d;
  --success-hover: #2d7d46;
  --danger: #ed4245;
  --danger-hover: #c03537;
  --neutral: #747f8d;
  --neutral-hover: #68727f;
  --gold: #f1c40f;
  /* The solid cloud colour that covers locked ground in the farm game (the same in every theme). */
  --cloud: #e9eef5;
  /* Text/icons sitting on a solid accent, success or danger fill. White in
     every theme - unlike --text, which turns dark in the light theme. */
  --on-accent: #fff;
  /* Text-field fill (composer, login). */
  --field-bg: var(--black-a25);
  /* The @mention pill. Locked-in Phase 3 design for dark: 45% accent tint
     with white text. */
  --mention-bg: var(--accent-a45);
  --mention-fg: #fff;

  /* Phase 19: presence dot colours (avatar ring + member list). */
  --presence-online: #3ba55d;
  --presence-idle: #f0b232;
  --presence-dnd: #ed4245;
  --presence-offline: #80848e;

  /* Chat bubble surfaces, on the same cool blue-grey ramp as the rest (they
     were neutral greys, which read as a different colour family): received is
     --bg, own messages are --surface. The mention pill's contrast is measured
     against --bubble-received (docs/phase19/contrast-grid.md). */
  --bubble-sent: #3b404ceb;
  --bubble-received: #2d313b;
  --bubble-actions-bg: #343946;

  /* Translucent overlays. Named <colour>-a<alpha>, so --white-a08 is white
     at 8% opacity. These replaced every raw rgba() in the component
     stylesheets one for one, so the values are exact, not rounded. */
  --white-a035: rgba(255, 255, 255, 0.035);
  --white-a04: rgba(255, 255, 255, 0.04);
  --white-a05: rgba(255, 255, 255, 0.05);
  --white-a06: rgba(255, 255, 255, 0.06);
  --white-a08: rgba(255, 255, 255, 0.08);
  --white-a09: rgba(255, 255, 255, 0.09);
  --white-a10: rgba(255, 255, 255, 0.1);
  --white-a12: rgba(255, 255, 255, 0.12);
  --white-a20: rgba(255, 255, 255, 0.2);
  --white-a80: rgba(255, 255, 255, 0.8);
  --black-a25: rgba(0, 0, 0, 0.25);
  --black-a30: rgba(0, 0, 0, 0.3);
  --black-a35: rgba(0, 0, 0, 0.35);
  --black-a45: rgba(0, 0, 0, 0.45);
  --black-a50: rgba(0, 0, 0, 0.5);
  --black-a55: rgba(0, 0, 0, 0.55);
  --black-a70: rgba(0, 0, 0, 0.7);
  --black-a80: rgba(0, 0, 0, 0.8);
  --accent-a14: rgba(88, 101, 242, 0.14);
  --accent-a16: rgba(88, 101, 242, 0.16);
  --accent-a25: rgba(88, 101, 242, 0.25);
  --accent-a30: rgba(88, 101, 242, 0.3);
  --accent-a40: rgba(88, 101, 242, 0.4);
  --accent-a45: rgba(88, 101, 242, 0.45);
  --danger-a14: rgba(237, 66, 69, 0.14);
  --danger-a40: rgba(237, 66, 69, 0.4);

  /* Glass, three tiers. Tier 1 is for small overlays sitting on content
     (tooltips, video controls, HUD chips); tier 2 for the shell's own
     floating panels (rail, sidebar, voice bar, drawers); tier 3 for the
     surfaces that sit above everything else (modals, popovers, the
     profile card). Each tier is a fill (-color, usable as a gradient
     stop), a background (fill + faint grain), a filter for
     backdrop-filter, and all three share one 1px edge + top highlight.
     Blur only reads as glass because of the ambient ground behind the
     shell (see index.css). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  --glass-1-color: rgba(38, 42, 51, 0.62);
  --glass-2-color: rgba(38, 42, 51, 0.74);
  --glass-3-color: rgba(30, 33, 41, 0.86);
  --glass-1: var(--grain), var(--glass-1-color);
  --glass-2: var(--grain), var(--glass-2-color);
  --glass-3: var(--grain), var(--glass-3-color);
  --glass-1-filter: blur(8px) saturate(140%);
  --glass-2-filter: blur(20px) saturate(160%);
  --glass-3-filter: blur(28px) saturate(180%);
  --glass-edge: 1px solid var(--white-a08);
  --glass-highlight: inset 0 1px 0 var(--white-a06);
  /* Kept as aliases for the few places that read them as flat colours. */
  --glass: var(--glass-2-color);
  --glass-soft: var(--glass-1-color);

  /* Elevation. Replaced the one-off box-shadows scattered across the
     component stylesheets; pick by how far the surface floats. */
  --shadow-1: 0 2px 6px var(--black-a35);
  --shadow-2: 0 6px 16px var(--black-a35);
  --shadow-3: 0 12px 28px var(--black-a45);
  --shadow-4: 0 24px 56px var(--black-a50);

  /* Ambient ground behind the floating panels (index.css). */
  --ground-1: rgba(88, 101, 242, 0.22);
  --ground-2: rgba(45, 170, 160, 0.14);
  --ground-3: rgba(160, 90, 220, 0.14);

  /* Type. One variable family across the shell (Inter, bundled via
     @fontsource-variable/inter in index.tsx), with a fixed scale. */
  --font-sans: 'Inter Variable', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;

  /* Spacing, on a 4px grid. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Timing. The three original tokens plus the one-off durations the
     component stylesheets used, so every duration has a name. */
  --motion-instant: 50ms;
  --motion-fast: 120ms;
  --motion-quick: 200ms;
  --motion-base: 240ms;
  --motion-medium: 300ms;
  --motion-slow: 400ms;
  --motion-lazy: 500ms;
  --motion-languid: 800ms;
  --motion-ease: cubic-bezier(0.22, 0.9, 0.3, 1);
  --anim-spin: 1s;
  --anim-flash: 3s;
  --anim-marquee: 6s;
  --anim-pulse: 1.4s;
  --anim-shimmer: 1.6s;
  /* Phase 19: density. Comfortable is the default; compact tightens the
     rows people scan (channels, messages, members). */
  --density-row-y: 8px;
  --density-row-gap: 5px;
  --density-message-y: 8px;
  /* Outer breathing room: the gap round the chat/page area, and the
     messages' own padding. These used to be a fixed 20px each, which
     stacked with the header/composer margins into a lot of dead space. */
  --shell-pad: 12px;
  --chat-pad-x: 16px;
  --chat-pad-y: 12px;
  --density-message-gap: 2px;

  color-scheme: dark;

  /* Phase 17: springs live in src/motion/tokens.js (CSS has no spring);
     the durations above are mirrored there in seconds. */
}

/* ---- Phase 19: dim. A softer dark - lifted slate greys, a little less
   contrast for long sessions. Only what differs from dark. ---- */
:root[data-theme="dim"] {
  --bg-deep: #313744;
  --bg: #383e4c;
  --surface: #474e5d;
  --border: #242832;
  --scrollbar-thumb: rgba(255, 255, 255, 0.18);
  --emoji-rgb-background: 49, 55, 68;
  --emoji-rgb-input: 71, 78, 93;
  --emoji-rgb-color: 221, 225, 232;
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);

  --text: #f4f6fa;
  --text-body: #dde1e8;
  --text-muted: #c1c7d2;
  --text-faint: #b0b7c3;

  --bubble-sent: #4d5363eb;
  --bubble-received: #2e3340;
  --bubble-actions-bg: #353a47;

  --glass-1-color: rgba(49, 55, 68, 0.62);
  --glass-2-color: rgba(49, 55, 68, 0.76);
  --glass-3-color: rgba(42, 47, 59, 0.88);

  --ground-1: rgba(88, 101, 242, 0.18);
  --ground-2: rgba(45, 170, 160, 0.12);
  --ground-3: rgba(160, 90, 220, 0.12);
}

/* ---- Phase 19: light. The --white-aNN overlays are hover washes and
   hairlines; on a light ground they become dark ink at the same alphas,
   so every hover/edge keeps working without touching component CSS. ---- */
:root[data-theme="light"] {
  --bg-deep: #e2e5eb;
  --bg: #eceef3;
  --surface: #fff;
  --border: #c7ccd6;
  --scrollbar-thumb: rgba(20, 24, 33, 0.22);
  --emoji-rgb-background: 255, 255, 255;
  --emoji-rgb-input: 236, 238, 243;
  --emoji-rgb-color: 35, 38, 45;
  --scrollbar-thumb-hover: rgba(20, 24, 33, 0.36);

  --text: #111318;
  --text-body: #23262d;
  --text-muted: #474d59;
  --text-faint: #4f5663;

  --accent-alt: #4a5bb5;
  /* Gold is also text (the Threads/Pinned chips), so it's darkened to
     read on white. */
  --gold: #8a6a00;
  --field-bg: rgba(255, 255, 255, 0.85);
  --success: #2b8547;
  --success-hover: #226b39;
  --danger: #d0292c;
  --danger-hover: #ad2124;
  --neutral: #5f6875;
  --neutral-hover: #4e5662;

  --mention-bg: var(--accent-a16);
  --mention-fg: #3a44a8;

  --presence-online: #23a55a;
  --presence-idle: #d9920b;
  --presence-dnd: #d0292c;
  --presence-offline: #7a7f89;

  --bubble-sent: #dfe3f1;
  --bubble-received: #fff;
  --bubble-actions-bg: #f2f3f6;

  --white-a035: rgba(20, 24, 33, 0.035);
  --white-a04: rgba(20, 24, 33, 0.04);
  --white-a05: rgba(20, 24, 33, 0.05);
  --white-a06: rgba(20, 24, 33, 0.06);
  --white-a08: rgba(20, 24, 33, 0.08);
  --white-a09: rgba(20, 24, 33, 0.09);
  --white-a10: rgba(20, 24, 33, 0.1);
  --white-a12: rgba(20, 24, 33, 0.12);
  --white-a20: rgba(20, 24, 33, 0.2);
  --white-a80: rgba(20, 24, 33, 0.8);

  --glass-1-color: rgba(255, 255, 255, 0.62);
  --glass-2-color: rgba(255, 255, 255, 0.74);
  --glass-3-color: rgba(250, 251, 253, 0.9);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  --shadow-1: 0 2px 6px rgba(20, 24, 33, 0.1);
  --shadow-2: 0 6px 16px rgba(20, 24, 33, 0.12);
  --shadow-3: 0 12px 28px rgba(20, 24, 33, 0.16);
  --shadow-4: 0 24px 56px rgba(20, 24, 33, 0.2);

  --ground-1: rgba(88, 101, 242, 0.14);
  --ground-2: rgba(45, 170, 160, 0.1);
  --ground-3: rgba(160, 90, 220, 0.1);

  color-scheme: light;
}

:root[data-density="compact"] {
  --density-row-y: 4px;
  --density-row-gap: 1px;
  --density-message-y: 3px;
  --density-message-gap: 1px;
  --shell-pad: 6px;
  --chat-pad-x: 10px;
  --chat-pad-y: 6px;
}