/* Aurora Curator's UI theme. The "aurora" theme below is ported 1:1 (hex values) from
   the original FB-Mod fork's AuroraTheme.java / HeaderPanel.java / MainFrame.java so
   the rewrite looks like a continuation of that design rather than a random restyle
   (the app takes its name, "Aurora Curator", from this same Aurora theme) - it stays
   the default. The other four theme blocks below (white/black/ocean/sunset) are Aurora
   Curator's own additions, picked via Settings (gear icon, sidebar footer) and applied
   as a `data-theme` attribute on <html>; every visible color in the app is meant to
   flow through one of these custom properties so switching theme is just switching
   which block of them is active - see the file's own module-doc-style notes on the
   less obvious variables below. */
:root {
  --dock: #08252b;
  --dock-deep: #051115;
  --dock-mist: #123a42;
  --dock-line: #255660;
  --surface: #0b151a;
  --surface-alt: #101f25;
  --surface-deep: #223940;
  --card: #132229;
  --text: #e8f4f2;
  --muted-text: #9aafb0;
  --aurora-green: #55d7a9;
  --aurora-cyan: #52c7db;
  --aurora-lilac: #a99cff;
  --sunset: #f0b66b;
  --list-selection: #1e4d54;
  --dock-selection: #1d4850;
  /* A button's resting/hover/active background - was hardcoded (#172a31/#203941/
     #28515a) in a handful of spots in RenamePanel.css; pulled out to variables here so
     every theme can supply its own shade instead of leaving a dark box behind on a
     light theme. */
  --btn-bg: #172a31;
  --btn-bg-hover: #203941;
  --btn-bg-active: #28515a;
  /* A small floating popup's background (the Load-files split-button menu). */
  --popup-bg: #16262d;
  /* The primary action button's hover shade - a lightened version of --aurora-green. */
  --accent-hover: #70e3bb;
  /* The header bar's top-to-bottom gradient stops (its middle stop is --surface-alt). */
  --header-grad-a: #111e26;
  --header-grad-b: #0a161c;
  /* Subtle highlight tints for row/button hover states, each a light-on-dark overlay
     for this theme - previously hardcoded as literal rgba(255,255,255,X) across
     RenamePanel.css, which is exactly backwards on a light theme (a white tint on an
     already-light surface is invisible). Named by their alpha so the light theme below
     can supply the mirror-image dark tints at matching intensities. */
  --tint-02: rgba(255, 255, 255, 0.02);
  --tint-03: rgba(255, 255, 255, 0.03);
  --tint-05: rgba(255, 255, 255, 0.05);
  --tint-06: rgba(255, 255, 255, 0.06);
  --tint-16: rgba(255, 255, 255, 0.16);
  --sidebar-width: 158px;
  --header-height: 68px;
}

/* White - a clean white-background/black-text theme, the literal "white" half of the
   theming request. --dock-deep doubles as "the text color that sits well on top of
   --aurora-green" (see RenamePanel.css's .action-button.primary) - here that's white,
   since this theme's --aurora-green is deliberately darkened for contrast on a white
   page, the opposite of the dark themes' light-green-on-dark-text pairing. Keeps
   colorful accents (green/cyan/lilac) unlike Black below, which is deliberately
   grayscale - that's the visual difference between the two beyond just background. */
:root[data-theme="white"] {
  --dock: #eef2f3;
  --dock-deep: #ffffff;
  --dock-mist: #dde7e9;
  --dock-line: #c7d3d5;
  --surface: #ffffff;
  --surface-alt: #f5f7f8;
  --surface-deep: #dfe6e8;
  --card: #f7f9fa;
  --text: #15191b;
  --muted-text: #5c6b6e;
  --aurora-green: #1f9d74;
  --aurora-cyan: #157e9c;
  --aurora-lilac: #7a68d9;
  --sunset: #c97a1f;
  --list-selection: #d7ece7;
  --dock-selection: #dbeee9;
  --btn-bg: #eef2f3;
  --btn-bg-hover: #e2e9eb;
  --btn-bg-active: #d2dcdd;
  --popup-bg: #ffffff;
  --accent-hover: #29b98b;
  --header-grad-a: #ffffff;
  --header-grad-b: #eef2f3;
  --tint-02: rgba(0, 0, 0, 0.02);
  --tint-03: rgba(0, 0, 0, 0.035);
  --tint-05: rgba(0, 0, 0, 0.05);
  --tint-06: rgba(0, 0, 0, 0.07);
  --tint-16: rgba(0, 0, 0, 0.14);
}

/* Black - a true near-black/white theme, the literal "black" half of the theming
   request. Deliberately grayscale (no hue in --aurora-green/cyan/lilac, unlike every
   other theme including White above) so it reads as an actual black-and-white theme
   rather than just "Aurora but darker" - --aurora-green here is a light neutral gray
   that still works as the primary-button accent against --dock-deep's pure black. */
:root[data-theme="black"] {
  --dock: #0a0a0a;
  --dock-deep: #000000;
  --dock-mist: #1a1a1a;
  --dock-line: #2e2e2e;
  --surface: #000000;
  --surface-alt: #0d0d0d;
  --surface-deep: #262626;
  --card: #111111;
  --text: #f5f5f5;
  --muted-text: #9a9a9a;
  --aurora-green: #e5e5e5;
  --aurora-cyan: #d0d0d0;
  --aurora-lilac: #bfbfbf;
  --sunset: #cfcfcf;
  --list-selection: #262626;
  --dock-selection: #202020;
  --btn-bg: #141414;
  --btn-bg-hover: #1f1f1f;
  --btn-bg-active: #2a2a2a;
  --popup-bg: #0d0d0d;
  --accent-hover: #ffffff;
  --header-grad-a: #050505;
  --header-grad-b: #000000;
  --tint-02: rgba(255, 255, 255, 0.02);
  --tint-03: rgba(255, 255, 255, 0.03);
  --tint-05: rgba(255, 255, 255, 0.05);
  --tint-06: rgba(255, 255, 255, 0.06);
  --tint-16: rgba(255, 255, 255, 0.16);
}

/* Ocean - a cool blue-toned dark variant. */
:root[data-theme="ocean"] {
  --dock: #071c2e;
  --dock-deep: #030f1c;
  --dock-mist: #0f3350;
  --dock-line: #1c4a68;
  --surface: #071620;
  --surface-alt: #0c1e2b;
  --surface-deep: #1a3548;
  --card: #0f232f;
  --text: #e7f2f8;
  --muted-text: #93aebe;
  --aurora-green: #4fd0e8;
  --aurora-cyan: #5aa9ff;
  --aurora-lilac: #8ea0ff;
  --sunset: #ffb46b;
  --list-selection: #1a3f57;
  --dock-selection: #193a52;
  --btn-bg: #12293a;
  --btn-bg-hover: #1a3a4f;
  --btn-bg-active: #234a63;
  --popup-bg: #102432;
  --accent-hover: #7fe0f2;
  --header-grad-a: #0c1f2e;
  --header-grad-b: #061420;
  --tint-02: rgba(255, 255, 255, 0.02);
  --tint-03: rgba(255, 255, 255, 0.03);
  --tint-05: rgba(255, 255, 255, 0.05);
  --tint-06: rgba(255, 255, 255, 0.06);
  --tint-16: rgba(255, 255, 255, 0.16);
}

/* Sunset - a warm amber/coral-toned dark variant. */
:root[data-theme="sunset"] {
  --dock: #2b1408;
  --dock-deep: #150a04;
  --dock-mist: #3d2011;
  --dock-line: #5c3319;
  --surface: #1a0f08;
  --surface-alt: #23140c;
  --surface-deep: #40261a;
  --card: #241610;
  --text: #f7ece3;
  --muted-text: #c2a190;
  --aurora-green: #f0955a;
  --aurora-cyan: #f0b66b;
  --aurora-lilac: #e0866f;
  --sunset: #ffd08a;
  --list-selection: #4a2c17;
  --dock-selection: #452a16;
  --btn-bg: #2c1a10;
  --btn-bg-hover: #3c2416;
  --btn-bg-active: #4f301d;
  --popup-bg: #24160e;
  --accent-hover: #f5b083;
  --header-grad-a: #24140b;
  --header-grad-b: #140b05;
  --tint-02: rgba(255, 255, 255, 0.02);
  --tint-03: rgba(255, 255, 255, 0.03);
  --tint-05: rgba(255, 255, 255, 0.05);
  --tint-06: rgba(255, 255, 255, 0.06);
  --tint-16: rgba(255, 255, 255, 0.16);
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
}

button,
input {
  font-family: inherit;
  color: inherit;
}

.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}