/* Deep Sea: a submarine descent. Dark is the primary mood — a fixed
   abyssal deep-teal→ink-navy backdrop with sparse static rising bubbles;
   surfaces are opaque pressure-hull panels with 1px bioluminescent rims,
   focus states are sonar rings (double accent box-shadow), avatars are
   portholes. Light is the sunlit shallows: sand-and-seafoam with a very
   subtle refracted-caustic hint. The fixed teal rim/scenery is decoration;
   everything interactive derives from --mantine-primary-color-* (the eight
   ramps are retuned in manifest.ts as bioluminescent sea colors). No
   backdrop-filter anywhere — hulls are solid. */

/* ---------------------------------------------------------------- */
/* 1. Tokens for any scheme                                          */
/* ---------------------------------------------------------------- */

[data-theme="ocean"][data-theme] {
  --mantine-font-family: "Figtree", "Avenir Next", "Helvetica Neue", sans-serif;
  --mantine-font-family-headings: "Comfortaa", "Figtree", sans-serif;
  --mantine-heading-font-weight: 700;

  /* rounded, water-worn radii */
  --mantine-radius-xs: 0.375rem;
  --mantine-radius-sm: 0.5625rem;
  --mantine-radius-md: 0.75rem;
  --mantine-radius-lg: 1rem;
  --mantine-radius-xl: 1.5rem;
  --mantine-radius-default: 0.75rem;

  /* porthole avatars: circle + bold hull ring (the frame owns the border) */
  --flxn-avatar-radius: 50%;
  --flxn-avatar-border: 3px solid var(--ocean-porthole);
  --flxn-badge-radius: 14px;

  /* sonar focus ring: two accent rings, inner solid + outer echo */
  --ocean-sonar: 0 0 0 2px
      color-mix(in srgb, var(--mantine-primary-color-filled) 90%, transparent),
    0 0 0 6px
      color-mix(in srgb, var(--mantine-primary-color-filled) 28%, transparent);
}

/* ---------------------------------------------------------------- */
/* 2. Per-scheme tokens                                              */
/* ---------------------------------------------------------------- */

[data-theme="ocean"][data-theme][data-mantine-color-scheme="dark"] {
  --mantine-color-body: #062632;
  --mantine-color-text: #d9f2f0;
  --mantine-color-bright: #f2fffd;
  --mantine-color-dimmed: #93bcc0;
  --mantine-color-placeholder: #628e96;
  --mantine-color-default: #0c3745;
  --mantine-color-default-hover: #11424f;
  --mantine-color-default-color: #d9f2f0;
  --mantine-color-default-border: rgba(103, 232, 214, 0.24);

  /* deep-water elevation with a faint bioluminescent edge */
  --mantine-shadow-xs: 0 0 0 1px rgba(103, 232, 214, 0.06), 0 2px 6px rgba(1, 10, 16, 0.5);
  --mantine-shadow-sm: 0 0 0 1px rgba(103, 232, 214, 0.08), 0 4px 12px rgba(1, 10, 16, 0.55);
  --mantine-shadow-md: 0 0 0 1px rgba(103, 232, 214, 0.1), 0 8px 24px rgba(1, 10, 16, 0.6);
  --mantine-shadow-lg: 0 0 0 1px rgba(103, 232, 214, 0.12), 0 12px 34px rgba(1, 10, 16, 0.65);
  --mantine-shadow-xl: 0 0 0 1px rgba(103, 232, 214, 0.14), 0 18px 48px rgba(1, 10, 16, 0.7);

  /* pressure-hull ingredients */
  --ocean-hull: #0a3240;
  --ocean-hull-raised: #0e3d4d;
  --ocean-deep: #041d27;
  --ocean-rim: rgba(103, 232, 214, 0.22);
  --ocean-rim-strong: rgba(103, 232, 214, 0.38);
  --ocean-chrome: #052430;
  --ocean-porthole: #2c7482;
  --ocean-porthole-glow: 0 0 0 1px rgba(103, 232, 214, 0.25),
    0 0 12px rgba(103, 232, 214, 0.2);
  --ocean-tooltip-bg: #0d3947;
  --ocean-tooltip-color: #dcf5f2;

  /* app tokens */
  --flxn-gold: #f2c14b;
  --flxn-silver: #a9c3cb;
  --flxn-bronze: #dd9364;
  --flxn-toast-success: #6fe3a5;
  --flxn-toast-error: #ff8f9f;
  --flxn-showcase-bg: #0a3240;
  --flxn-overlay: rgba(2, 10, 16, 0.62);
  --flxn-dotgrid-color: rgba(103, 232, 214, 0.16);
  --flxn-pop-shadow: rgba(0, 0, 0, 0.55);

  /* podium as glowing depth tiers */
  --flxn-podium-1-bg: rgba(242, 193, 75, 0.1);
  --flxn-podium-1-border: rgba(242, 193, 75, 0.38);
  --flxn-podium-1-label: #f2c14b;
  --flxn-podium-2-bg: rgba(169, 195, 203, 0.08);
  --flxn-podium-2-border: rgba(169, 195, 203, 0.3);
  --flxn-podium-2-label: #b8ccd2;
  --flxn-podium-3-bg: rgba(221, 147, 100, 0.1);
  --flxn-podium-3-border: rgba(221, 147, 100, 0.36);
  --flxn-podium-3-label: #e5a273;
}

[data-theme="ocean"][data-theme][data-mantine-color-scheme="light"] {
  --mantine-color-body: #eaf6f6;
  --mantine-color-text: #11373f;
  --mantine-color-bright: #072229;
  --mantine-color-dimmed: #4a6e72;
  --mantine-color-placeholder: #5f858a;
  --mantine-color-default: #ffffff;
  --mantine-color-default-hover: #f0f7f4;
  --mantine-color-default-color: #11373f;
  --mantine-color-default-border: rgba(23, 115, 110, 0.3);

  /* soft sea-tinted elevation */
  --mantine-shadow-xs: 0 1px 3px rgba(15, 80, 90, 0.1);
  --mantine-shadow-sm: 0 2px 8px rgba(15, 80, 90, 0.12);
  --mantine-shadow-md: 0 6px 18px rgba(15, 80, 90, 0.14);
  --mantine-shadow-lg: 0 10px 28px rgba(15, 80, 90, 0.16);
  --mantine-shadow-xl: 0 16px 44px rgba(15, 80, 90, 0.2);

  /* sand-and-seafoam ingredients */
  --ocean-hull: #fbfaf3;
  --ocean-hull-raised: #ffffff;
  --ocean-deep: #ddeeea;
  --ocean-rim: rgba(23, 115, 110, 0.25);
  --ocean-rim-strong: rgba(23, 115, 110, 0.42);
  --ocean-chrome: #f3f9f6;
  --ocean-porthole: #7fb5ae;
  --ocean-porthole-glow: 0 0 0 1px rgba(23, 115, 110, 0.18),
    0 2px 8px rgba(15, 80, 90, 0.16);
  --ocean-tooltip-bg: #14424d;
  --ocean-tooltip-color: #e4f6f3;

  /* app tokens */
  --flxn-gold: #d8a419;
  --flxn-silver: #8ba7ad;
  --flxn-bronze: #c76e34;
  --flxn-toast-success: #2e9e6b;
  --flxn-toast-error: #d64d64;
  --flxn-showcase-bg: #ffffff;
  --flxn-overlay: rgba(10, 50, 60, 0.4);
  --flxn-dotgrid-color: rgba(23, 115, 110, 0.2);
  --flxn-pop-shadow: rgba(15, 80, 90, 0.28);

  /* podium as sunlit sand tiers */
  --flxn-podium-1-bg: rgba(216, 164, 25, 0.14);
  --flxn-podium-1-border: rgba(179, 131, 16, 0.45);
  --flxn-podium-1-label: #7c5a0b;
  --flxn-podium-2-bg: rgba(90, 120, 125, 0.1);
  --flxn-podium-2-border: rgba(90, 120, 125, 0.35);
  --flxn-podium-2-label: #47666a;
  --flxn-podium-3-bg: rgba(199, 110, 52, 0.12);
  --flxn-podium-3-border: rgba(199, 110, 52, 0.42);
  --flxn-podium-3-label: #8a4c1d;
}

/* ---------------------------------------------------------------- */
/* 3. Fixed backdrop (below all content)                             */
/* ---------------------------------------------------------------- */

[data-theme="ocean"] .flxn-theme-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Abyssal descent: deep teal fading to ink navy, sparse static bubbles
   rising (bigger and brighter near the sea floor, fading toward the top). */
[data-theme="ocean"][data-mantine-color-scheme="dark"] .flxn-theme-overlay {
  background-color: #062632;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='640' viewBox='0 0 260 640'%3E%3Cg fill='none' stroke='%239beee2'%3E%3Ccircle cx='36' cy='584' r='5' stroke-opacity='.13'/%3E%3Ccircle cx='44' cy='512' r='3' stroke-opacity='.1'/%3E%3Ccircle cx='210' cy='612' r='4' stroke-opacity='.12'/%3E%3Ccircle cx='202' cy='540' r='2.5' stroke-opacity='.09'/%3E%3Ccircle cx='128' cy='430' r='3.5' stroke-opacity='.1'/%3E%3Ccircle cx='120' cy='360' r='2' stroke-opacity='.08'/%3E%3Ccircle cx='232' cy='300' r='3' stroke-opacity='.09'/%3E%3Ccircle cx='60' cy='250' r='2.5' stroke-opacity='.08'/%3E%3Ccircle cx='150' cy='160' r='2' stroke-opacity='.07'/%3E%3Ccircle cx='90' cy='80' r='1.5' stroke-opacity='.06'/%3E%3C/g%3E%3Cg fill='%239beee2'%3E%3Ccircle cx='70' cy='470' r='1.2' fill-opacity='.1'/%3E%3Ccircle cx='180' cy='390' r='1' fill-opacity='.09'/%3E%3Ccircle cx='40' cy='330' r='1' fill-opacity='.08'/%3E%3Ccircle cx='222' cy='190' r='1' fill-opacity='.07'/%3E%3Ccircle cx='140' cy='40' r='1' fill-opacity='.05'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(50rem 30rem at 50% -10%, rgba(45, 160, 175, 0.18), transparent 65%),
    linear-gradient(180deg, #0b3b46 0%, #072b38 45%, #03121e 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 260px 640px, auto, auto;
}

/* Sunlit shallows: seafoam fading to a sandy floor, with a faint white
   caustic ripple tile — refracted light, kept very subtle. */
[data-theme="ocean"][data-mantine-color-scheme="light"] .flxn-theme-overlay {
  background-color: #eaf6f6;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='220' viewBox='0 0 320 220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M0 40 Q 40 10 80 42 T 160 44 T 240 38 T 320 42' stroke-opacity='.4'/%3E%3Cpath d='M0 110 Q 45 82 90 112 T 180 110 T 268 114 T 320 108' stroke-opacity='.3'/%3E%3Cpath d='M0 180 Q 50 152 100 182 T 200 178 T 300 184 T 320 180' stroke-opacity='.35'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(46rem 26rem at 30% -8%, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(60rem 22rem at 50% 108%, rgba(226, 214, 178, 0.5), transparent 70%),
    linear-gradient(180deg, #d8efee 0%, #eaf6f6 55%, #f2f3e9 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 320px 220px, auto, auto, auto;
}

/* ---------------------------------------------------------------- */
/* 4. Pressure-hull surfaces: solid panels, bioluminescent rims      */
/* ---------------------------------------------------------------- */

[data-theme="ocean"] .mantine-Paper-root,
[data-theme="ocean"] .mantine-Card-root {
  background-color: var(--ocean-hull);
  border: 1px solid var(--ocean-rim);
  box-shadow: var(--mantine-shadow-sm);
}

[data-theme="ocean"] .mantine-Modal-content {
  background-color: var(--ocean-hull);
  border: 1px solid var(--ocean-rim-strong);
  box-shadow: var(--mantine-shadow-xl);
}

[data-theme="ocean"] .mantine-Modal-header {
  background-color: transparent;
}

[data-theme="ocean"] .mantine-Popover-dropdown {
  background-color: var(--ocean-hull);
  border: 1px solid var(--ocean-rim-strong);
  box-shadow: var(--mantine-shadow-lg);
}

[data-theme="ocean"] .mantine-Notification-root {
  background-color: var(--ocean-hull);
  border: 1px solid var(--ocean-rim-strong);
  box-shadow: var(--mantine-shadow-lg);
}

/* AppShell chrome: the conning tower and lower deck — solid hull strips
   sealed with a stronger rim seam. */
[data-theme="ocean"] .mantine-AppShell-header {
  background-color: var(--ocean-chrome);
  border-bottom: 1px solid var(--ocean-rim-strong);
  box-shadow: var(--mantine-shadow-sm);
}

[data-theme="ocean"] .mantine-AppShell-navbar {
  background-color: var(--ocean-chrome);
  border-inline-end: 1px solid var(--ocean-rim-strong);
}

/* ---------------------------------------------------------------- */
/* 5. Sonar focus rings                                              */
/* ---------------------------------------------------------------- */

/* The transparent outline stays invisible here but becomes a real ring in
   forced-colors mode, where the box-shadow sonar is stripped. */
[data-theme="ocean"] :focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--ocean-sonar);
}

[data-theme="ocean"] .mantine-Input-input:focus,
[data-theme="ocean"] .mantine-Input-input:focus-within {
  border-color: var(--mantine-primary-color-filled);
  box-shadow: var(--ocean-sonar);
}

/* ---------------------------------------------------------------- */
/* 6. Controls                                                       */
/* ---------------------------------------------------------------- */

/* Filled controls give off a faint accent glow; the transparent border
   keeps a real edge for forced-colors mode. */
[data-theme="ocean"] .mantine-Button-root[data-variant="filled"],
[data-theme="ocean"] .mantine-ActionIcon-root[data-variant="filled"] {
  border: 1px solid transparent;
  box-shadow:
    0 0 14px -4px color-mix(in srgb, var(--mantine-primary-color-filled) 55%, transparent),
    var(--mantine-shadow-xs);
}

[data-theme="ocean"] .mantine-Button-root {
  font-weight: 600;
}

[data-theme="ocean"] .mantine-Input-input {
  background-color: var(--ocean-deep);
  border: 1px solid var(--ocean-rim);
}

[data-theme="ocean"] .mantine-Checkbox-input {
  background-color: var(--ocean-deep);
  border-color: var(--ocean-rim-strong);
}

[data-theme="ocean"] .mantine-SegmentedControl-root {
  background-color: var(--ocean-deep);
  border: 1px solid var(--ocean-rim);
}

[data-theme="ocean"] .mantine-SegmentedControl-indicator {
  background-color: var(--ocean-hull-raised);
  border: 1px solid var(--ocean-rim-strong);
  box-shadow: var(--mantine-shadow-xs);
}

[data-theme="ocean"] .mantine-Progress-root {
  background-color: var(--ocean-deep);
  border: 1px solid var(--ocean-rim);
}

[data-theme="ocean"] .mantine-Badge-root[data-variant="default"] {
  background-color: var(--mantine-color-default);
  border: 1px solid var(--ocean-rim);
}

[data-theme="ocean"] .mantine-Tabs-list {
  --tabs-list-border-color: var(--mantine-color-default-border);
}

[data-theme="ocean"] .mantine-Tabs-tab:hover,
[data-theme="ocean"] .mantine-NavLink-root:hover {
  background-color: var(--mantine-color-default-hover);
}

[data-theme="ocean"] .mantine-Tooltip-tooltip {
  background-color: var(--ocean-tooltip-bg);
  color: var(--ocean-tooltip-color);
  border-radius: var(--mantine-radius-md);
  box-shadow: var(--mantine-shadow-sm);
}

[data-theme="ocean"] ::selection {
  background: color-mix(in srgb, var(--mantine-primary-color-filled) 30%, transparent);
}

/* ---------------------------------------------------------------- */
/* 7. Wave divider: repeating radial scallop line                    */
/* ---------------------------------------------------------------- */

[data-theme="ocean"] .mantine-Divider-root {
  --divider-color: var(--ocean-rim-strong);
}

[data-theme="ocean"] .mantine-Divider-root[data-orientation="horizontal"]:not([data-with-label]) {
  border-top: none;
  height: 5px;
  background-image: radial-gradient(
    circle at 6px -2px,
    transparent 4px,
    var(--ocean-rim-strong) 4px,
    var(--ocean-rim-strong) 5.4px,
    transparent 5.4px
  );
  background-size: 12px 5px;
  background-repeat: repeat-x;
}

@media (forced-colors: active) {
  [data-theme="ocean"] .mantine-Divider-root[data-orientation="horizontal"]:not([data-with-label]) {
    border-top: 1px solid CanvasText;
    height: auto;
    background-image: none;
  }
}

/* ---------------------------------------------------------------- */
/* 8. App component hooks                                            */
/* ---------------------------------------------------------------- */

/* Tab strip: flat while resting; docked it becomes a hull deck strip. */
[data-theme="ocean"] .flxn-tabs[data-stuck] {
  background-color: var(--ocean-chrome);
  border-bottom-color: var(--ocean-rim-strong);
  box-shadow: var(--mantine-shadow-sm);
}

[data-theme="ocean"] .flxn-tab {
  color: var(--mantine-color-dimmed);
  font-weight: 500;
}

/* Underline indicator, so accent text on the active tab is allowed. */
[data-theme="ocean"] .flxn-tab[data-active] {
  color: var(--mantine-primary-color-light-color);
  font-weight: 700;
}

[data-theme="ocean"] .flxn-tabs-indicator {
  border-bottom: 2px solid var(--mantine-primary-color-filled);
  padding-inline: 0.5rem;
}

/* Nav grid tiles: instrument panels — hull plate with a lit top seam. */
[data-theme="ocean"] .flxn-tile {
  background-color: var(--ocean-hull);
  border: 1px solid var(--ocean-rim);
  border-radius: var(--mantine-radius-lg);
  box-shadow: var(--mantine-shadow-xs), inset 0 1px 0 var(--ocean-rim);
}

/* Flat accent-tinted glyph — no plate. */
[data-theme="ocean"] .flxn-tile-icon {
  color: var(--mantine-primary-color-light-color);
}

/* "See all" as a depth-tag chip: accent wash + its dedicated on-color. */
[data-theme="ocean"] .flxn-see-all {
  background-color: var(--mantine-primary-color-light);
  color: var(--mantine-primary-color-light-color);
  border: 1px solid
    color-mix(in srgb, var(--mantine-primary-color-light-color) 35%, transparent);
}

/* Match card + reaction tray as one hull construction: same rim, tray one
   deck lower (deeper water). */
[data-theme="ocean"] .flxn-match-card {
  background-color: var(--ocean-hull);
  border: 1px solid var(--ocean-rim);
}

[data-theme="ocean"] .flxn-reaction-row {
  background-color: var(--ocean-deep);
  border: 1px solid var(--ocean-rim);
}

/* Porthole: the bold ring comes from --flxn-avatar-border; the frame adds
   the bioluminescent halo around it. */
[data-theme="ocean"] .flxn-avatar-frame {
  border-radius: 50%;
  box-shadow: var(--ocean-porthole-glow);
}

/* Press feedback: a brief bioluminescent flare (filter only — the global
   scale transform stays untouched). */
[data-theme="ocean"] .flxn-press:active {
  filter: brightness(1.06) saturate(1.08);
}