/* Shared font families, sakura palette, Mantine semantics and drifting petal animation. */

:root,
:root[data-mantine-color-scheme="light"],
:root[data-theme="light"] {
  /* Light "sakura" palette is the base; [data-mantine-color-scheme="dark"] below overrides it.
     Text/accent pairs are chosen for WCAG AA (4.5:1) on --bg-color. */
  --bg-color: #FFFAF6;
  --text-main: #4B3A34;
  --text-sec: #7D6961;
  --text-muted: #94817A;
  --accent: #C94473;
  --accent-bright: #F08DAE;
  --accent-soft: #FBDBE4;
  --accent-ink: #A3305A;
  --accent-glow: rgba(244, 167, 190, 0.45);
  --border-radius: 20px;

  /* Friendly secondary hues for badges, avatars and kids/beginner tags (soft fill + ink text) */
  --lavender: #7E5FC4;
  --lavender-soft: #ECE4FA;
  --lavender-ink: #6646AC;
  --mint: #23806A;
  --mint-soft: #DDF3EC;
  --mint-ink: #1A6B57;
  --sun: #9A6A0C;
  --sun-soft: #FFF1D6;
  --sun-ink: #80550A;
  --petal: #F4A7BE;

  /* Glass parameters */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(201, 68, 115, 0.12);
  --glass-blur: 24px;

  /* Surfaces and chrome */
  --text-on-accent: #FFFFFF;
  --accent-deep: #B03A64;
  --accent-shadow: rgba(201, 68, 115, 0.28);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 45px -22px rgba(201, 68, 115, 0.35);
  --glow-secondary: rgba(196, 176, 240, 0.45);
  --input-bg: rgba(255, 255, 255, 0.85);
  --input-bg-focus: #FFFFFF;
  --input-text: #4B3A34;
  --chrome-bg: rgba(255, 250, 246, 0.82);
  --chrome-bg-header: rgba(255, 250, 246, 0.78);
  --chrome-sheen: rgba(251, 219, 228, 0.35);
  --chrome-sheen-header: rgba(251, 219, 228, 0.45);
  --chrome-border: rgba(201, 68, 115, 0.12);
  --chrome-ring: rgba(255, 255, 255, 0.6);
  --chrome-shadow-side: 10px 0 40px rgba(201, 68, 115, 0.06);
  --chrome-shadow-top: 0 4px 30px rgba(201, 68, 115, 0.08);
  --segmented-bg: rgba(75, 58, 52, 0.06);
  --segmented-border: rgba(75, 58, 52, 0.08);
  --segmented-active-deep: #B03A64;
  --segmented-active-shadow: 0 4px 14px rgba(201, 68, 115, 0.25);
  --table-head-border: rgba(75, 58, 52, 0.14);
  --table-row-border: rgba(75, 58, 52, 0.08);
  --table-row-hover: rgba(251, 219, 228, 0.45);
  --selected-bg: rgba(251, 219, 228, 0.55);
  --selected-border: rgba(201, 68, 115, 0.6);
  --selected-shadow: 0 8px 24px rgba(201, 68, 115, 0.12);
  --surface-02: rgba(75, 58, 52, 0.04);
  --surface-04: rgba(75, 58, 52, 0.08);
  --surface-06: rgba(75, 58, 52, 0.14);
  /* Opaque surface for dropdowns, popovers and code blocks */
  --surface-raised: #FFFFFF;
  --font-body: "Nunito", system-ui, sans-serif;
  --font-heading: "M PLUS Rounded 1c", "Nunito", sans-serif;
  --hero-scrim-top: rgba(255, 250, 246, 0.55);
  --hero-scrim-mid: rgba(255, 250, 246, 0.9);
  --icon-filter: opacity(0.8);
  --event-glow-bg: rgba(251, 219, 228, 0.6);
}

:root[data-mantine-color-scheme] {
  --mantine-color-dimmed: var(--text-sec);
  --mantine-color-bright: var(--text-main);
  --mantine-color-text: var(--text-main);
  --mantine-color-body: var(--bg-color);
  --mantine-color-placeholder: var(--text-muted);
  /* Gray light/subtle buttons and badges: Mantine's gray.6 text is only 2.9:1 on cream. */
  --mantine-color-gray-light-color: var(--text-sec);
  --mantine-color-gray-light: var(--surface-04);
  --mantine-color-gray-light-hover: var(--surface-06);
  --mantine-color-gray-text: var(--text-sec);
}

:root[data-mantine-color-scheme="dark"],
:root[data-theme="dark"] {
  --bg-color: #120B10;
  --text-main: #FBEFF3;
  --text-sec: rgba(251, 239, 243, 0.65);
  --text-muted: rgba(251, 239, 243, 0.42);
  --accent: #F27BA2;
  --accent-bright: #F795B5;
  --accent-soft: rgba(242, 123, 162, 0.16);
  --accent-ink: #F795B5;
  --accent-glow: rgba(160, 35, 85, 0.4);

  --lavender: #B9A2EE;
  --lavender-soft: rgba(185, 162, 238, 0.16);
  --lavender-ink: #C9B6F2;
  --mint: #6BD3B2;
  --mint-soft: rgba(107, 211, 178, 0.14);
  --mint-ink: #86DDC1;
  --sun: #F2C062;
  --sun-soft: rgba(242, 192, 98, 0.14);
  --sun-ink: #F5CD80;
  --petal: #C76A8C;

  --glass-bg: rgba(40, 26, 34, 0.55);
  --glass-border: rgba(255, 255, 255, 0.08);

  --text-on-accent: #2A0F1A;
  --accent-deep: #E05A87;
  --accent-shadow: rgba(242, 123, 162, 0.3);
  --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
  --glow-secondary: rgba(80, 50, 140, 0.4);
  --input-bg: rgba(0, 0, 0, 0.3);
  --input-bg-focus: rgba(0, 0, 0, 0.5);
  --input-text: #FBEFF3;
  --chrome-bg: rgba(30, 19, 26, 0.7);
  --chrome-bg-header: rgba(30, 19, 26, 0.65);
  --chrome-sheen: rgba(255, 255, 255, 0.03);
  --chrome-sheen-header: rgba(255, 255, 255, 0.04);
  --chrome-border: rgba(255, 255, 255, 0.08);
  --chrome-ring: rgba(255, 255, 255, 0.05);
  --chrome-shadow-side: 10px 0 40px rgba(0, 0, 0, 0.3);
  --chrome-shadow-top: 0 4px 30px rgba(0, 0, 0, 0.2);
  --segmented-bg: rgba(0, 0, 0, 0.5);
  --segmented-border: rgba(255, 255, 255, 0.12);
  --segmented-active-deep: #E05A87;
  --segmented-active-shadow: 0 4px 16px rgba(242, 123, 162, 0.28);
  --table-head-border: rgba(255, 255, 255, 0.16);
  --table-row-border: rgba(255, 255, 255, 0.10);
  --table-row-hover: rgba(242, 123, 162, 0.08);
  --selected-bg: rgba(242, 123, 162, 0.12);
  --selected-border: rgba(242, 123, 162, 0.7);
  --selected-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  --surface-02: rgba(255, 255, 255, 0.04);
  --surface-04: rgba(255, 255, 255, 0.08);
  --surface-06: rgba(255, 255, 255, 0.14);
  --surface-raised: #22151C;
  --hero-scrim-top: rgba(18, 11, 16, 0.4);
  --hero-scrim-mid: rgba(18, 11, 16, 0.85);
  --icon-filter: invert(1);
  --event-glow-bg: rgba(242, 123, 162, 0.16);
}

.sakura-petal {
  position: absolute;
  top: -24px;
  fill: var(--petal);
  opacity: 0.7;
  animation-name: petal-fall, petal-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
}

@keyframes petal-fall {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(calc(100vh + 48px)) rotate(600deg); }
}

@keyframes petal-sway {
  from { margin-left: -30px; }
  to { margin-left: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .sakura-petal {
    display: none;
  }
}