/*
  Learn worlds (docs/learn/README.md §5.1): each world's colours as custom properties, the same values as
  Looks/WorldPalette.cs. deep = backgrounds and ink, accent = the world's own colour, glow = light and progress,
  soft = a pale wash. Anything inside [data-world] picks them up; the scenes, cards and the player read them.
  Each world also has its own pattern (--w-pattern) for its page backgrounds.
*/
[data-world] { --w-on: #fff; }
/* The accent as text: darker on light pages and lighter on dark ones, so small words in the world's colour stay
   readable (WCAG AA, 4.5:1) in every world; the accent itself is kept for fills, rings and borders. */
[data-world] { --w-ink: color-mix(in srgb, var(--w-accent) 55%, #000); --w-strong: color-mix(in srgb, var(--w-accent) 60%, #000); }
html[data-theme="dark"] [data-world], .ln--teen[data-world], .ln--teen [data-world] { --w-ink: color-mix(in srgb, var(--w-accent) 78%, #fff); }
/* The dark panels (heroes, course and diploma heads, the group band, test cards) take the light ink in both themes. */
:is(.ln-hero, .ln-world-hero, .ln-test-hero, .ln-me-head, .ln-course-head, .ln-diploma-head, .ln-map-sec--group, .ln-station-card--test, .ln-also-path, .ln-need-exam),
:is(.ln-hero, .ln-world-hero, .ln-test-hero, .ln-me-head, .ln-course-head, .ln-diploma-head, .ln-map-sec--group, .ln-station-card--test, .ln-also-path, .ln-need-exam) [data-world] {
  --w-ink: color-mix(in srgb, var(--w-accent) 78%, #fff);
}

[data-world="first-steps"] { --w-deep: #3b2a6b; --w-accent: #f29a3f; --w-glow: #ffd27a; --w-soft: #fff3e2;
  --w-pattern: radial-gradient(circle at 20% 0%, rgba(242,154,63,.18), transparent 55%), radial-gradient(circle at 90% 20%, rgba(255,210,122,.16), transparent 45%); }
[data-world="prayer"] { --w-deep: #10394f; --w-accent: #2aa1a8; --w-glow: #e9c46a; --w-soft: #e8f4f5;
  --w-pattern: repeating-linear-gradient(90deg, rgba(42,161,168,.07) 0 2px, transparent 2px 48px), radial-gradient(circle at 50% 0%, rgba(233,196,106,.16), transparent 50%); }
[data-world="pilgrimage"] { --w-deep: #23241f; --w-accent: #c9a24a; --w-glow: #f2dfa7; --w-soft: #f7f1e1;
  --w-pattern: repeating-radial-gradient(circle at 18% 120%, rgba(201,162,74,.10) 0 2px, transparent 2px 26px), radial-gradient(circle at 80% 0%, rgba(242,223,167,.14), transparent 50%); }
[data-world="seerah"] { --w-deep: #5a2d14; --w-accent: #d9813b; --w-glow: #f5c77e; --w-soft: #fbefe0;
  --w-pattern: repeating-linear-gradient(170deg, rgba(217,129,59,.08) 0 3px, transparent 3px 34px), radial-gradient(circle at 50% 110%, rgba(245,199,126,.22), transparent 55%); }
[data-world="companions"] { --w-deep: #141b3d; --w-accent: #7d8cff; --w-glow: #ffe9a8; --w-soft: #eef0ff;
  --w-pattern: radial-gradient(circle at 12% 20%, rgba(255,233,168,.22) 0 1px, transparent 2px), radial-gradient(circle at 70% 40%, rgba(255,233,168,.18) 0 1px, transparent 2px), radial-gradient(circle at 40% 80%, rgba(125,140,255,.16), transparent 40%); }
[data-world="prophets"] { --w-deep: #123a2c; --w-accent: #3fa36f; --w-glow: #d6e8a5; --w-soft: #edf6ef;
  --w-pattern: linear-gradient(180deg, rgba(63,163,111,.10), transparent 40%), repeating-linear-gradient(90deg, rgba(214,232,165,.08) 0 1px, transparent 1px 120px); }
[data-world="belief"] { --w-deep: #2b1757; --w-accent: #8f6cf0; --w-glow: #f3d27b; --w-soft: #f2eefe;
  --w-pattern: repeating-radial-gradient(circle at 50% 30%, rgba(143,108,240,.10) 0 2px, transparent 2px 40px); }
[data-world="quran"] { --w-deep: #0b3b35; --w-accent: #149a83; --w-glow: #e6c46b; --w-soft: #e8f5f2;
  --w-pattern: conic-gradient(from 45deg at 50% 50%, rgba(20,154,131,.06) 0 25%, transparent 0 50%, rgba(20,154,131,.06) 0 75%, transparent 0) 0 0/44px 44px; }
[data-world="sunnah"] { --w-deep: #1f4a22; --w-accent: #59a85c; --w-glow: #f4b6c2; --w-soft: #eef7ec;
  --w-pattern: radial-gradient(circle at 15% 85%, rgba(244,182,194,.22), transparent 30%), radial-gradient(circle at 85% 90%, rgba(89,168,92,.2), transparent 35%); }
[data-world="law"] { --w-deep: #3a2a12; --w-accent: #b0802d; --w-glow: #e9d7a6; --w-soft: #f7f1e4;
  --w-pattern: repeating-linear-gradient(45deg, rgba(176,128,45,.07) 0 2px, transparent 2px 22px), repeating-linear-gradient(-45deg, rgba(176,128,45,.07) 0 2px, transparent 2px 22px); }
[data-world="character"] { --w-deep: #183d2b; --w-accent: #3c9a62; --w-glow: #b9e28c; --w-soft: #ecf6ef;
  --w-pattern: radial-gradient(ellipse at 50% 110%, rgba(60,154,98,.22), transparent 55%); }
[data-world="family"] { --w-deep: #4a1f2d; --w-accent: #d0607a; --w-glow: #ffd59a; --w-soft: #fbeef1;
  --w-pattern: radial-gradient(circle at 75% 15%, rgba(255,213,154,.22), transparent 35%), radial-gradient(circle at 10% 90%, rgba(208,96,122,.16), transparent 40%); }
[data-world="history"] { --w-deep: #3d2416; --w-accent: #b5652e; --w-glow: #e8c99a; --w-soft: #f8efe4;
  --w-pattern: linear-gradient(rgba(232,201,154,.07) 1px, transparent 1px) 0 0/60px 60px, linear-gradient(90deg, rgba(232,201,154,.07) 1px, transparent 1px) 0 0/60px 60px; }
[data-world="dawah"] { --w-deep: #0f3150; --w-accent: #2f8fd1; --w-glow: #9fe3d8; --w-soft: #e9f3fb;
  --w-pattern: repeating-radial-gradient(ellipse at 50% 140%, rgba(47,143,209,.10) 0 2px, transparent 2px 30px); }
[data-world="teen"] { --w-deep: #12081f; --w-accent: #8b5cf6; --w-glow: #22d3ee; --w-soft: #f3efff;
  --w-pattern: linear-gradient(rgba(139,92,246,.10) 1px, transparent 1px) 0 0/34px 34px, linear-gradient(90deg, rgba(139,92,246,.10) 1px, transparent 1px) 0 0/34px 34px; }
[data-world="kids"] { --w-deep: #2b59c3; --w-accent: #ffb020; --w-glow: #ff6fa5; --w-soft: #fff7e6;
  --w-pattern: radial-gradient(circle at 10% 20%, rgba(255,176,32,.25) 0 6px, transparent 7px), radial-gradient(circle at 80% 70%, rgba(255,111,165,.22) 0 5px, transparent 6px), radial-gradient(circle at 50% 40%, rgba(90,169,255,.2) 0 4px, transparent 5px); }
[data-world="calendar"] { --w-deep: #1d2350; --w-accent: #d0694f; --w-glow: #ffe2a0; --w-soft: #f4f0fa;
  --w-pattern: radial-gradient(circle at 82% 8%, rgba(255,226,160,.20), transparent 32%), radial-gradient(ellipse at 50% 120%, rgba(208,105,79,.18), transparent 55%), radial-gradient(circle at 18% 30%, rgba(255,226,160,.14) 0 1px, transparent 2px) 0 0/90px 90px; }
/* The Names of Allah (LD2-C): the night sky's own colours, as Looks/WorldPalette.cs (it had none here, so its screens lost
   every world colour: blank white cards on a phone). */
[data-world="names"] { --w-deep: #141a3d; --w-accent: #d9a441; --w-glow: #fff0c2; --w-soft: #f7f2e4;
  --w-pattern: radial-gradient(circle at 80% 10%, rgba(255,240,194,.20), transparent 30%), radial-gradient(ellipse at 50% 120%, rgba(217,164,65,.18), transparent 55%), radial-gradient(circle at 20% 30%, rgba(255,240,194,.16) 0 1px, transparent 2px) 0 0/80px 80px; }