/* ==========================================================================
   PNLE-REVIEW — Base
   Design tokens (light + dark), reset and typography.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #d9e2f6;
  --bg-glow-a: #e9ddf6;
  --bg-glow-b: #cfdcf6;
  --panel: rgba(240, 244, 253, 0.92);
  --panel-border: rgba(255, 255, 255, 0.9);
  --card: rgba(255, 255, 255, 0.94);
  --card-solid: #ffffff;
  --card-border: #e2e8f5;
  --subtle: #f4f7fd;
  --subtle-2: #eef2fb;
  --line: #e8edf7;

  /* Text */
  --text: #1c3163;
  --text-2: #3d4f78;
  --muted: #7b88a8;
  --script: #2a3f73;

  /* Brand */
  --primary: #3c6fd4;
  --primary-600: #2c58b5;
  --primary-soft: #dfe8fb;
  --primary-softer: #edf2fd;
  --ring-a: #2459c2;
  --ring-b: #6aa2ee;
  --track: #e5ebf7;

  /* Accents */
  --teal: #47b39a;
  --blue: #4c7fdc;
  --purple: #9a7ae0;
  --pink: #e4618f;
  --rose: #ef8cb6;
  --orange: #f2a649;
  --red: #e2564f;
  --yellow: #f3cd5a;

  /* Tints (tile backgrounds) */
  --tint-green: linear-gradient(180deg, #ecf8f3 0%, #f6fbf9 100%);
  --tint-green-border: #d4eee3;
  --tint-orange: linear-gradient(180deg, #fff3e6 0%, #fffaf4 100%);
  --tint-orange-border: #f8e2c8;
  --tint-pink: linear-gradient(180deg, #fdecf2 0%, #fff7fa 100%);
  --tint-pink-border: #f6d6e2;
  --tint-rose: linear-gradient(180deg, #faeefa 0%, #fdf6fc 100%);
  --tint-rose-border: #f0dbef;
  --tint-blue: #eaf1fd;
  --tint-purple: #f1ecfb;
  --tint-sky: #e8f3fb;
  --tint-peach: #fff3e2;
  --tone-blue: #e3ecfc;
  --tone-purple: #efe7fb;
  --tone-pink: #fde6ee;
  --tone-green: #e1f4ea;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(40, 64, 120, 0.05);
  --shadow: 0 6px 22px rgba(52, 82, 150, 0.08), 0 1px 2px rgba(52, 82, 150, 0.05);
  --shadow-primary: 0 6px 14px rgba(44, 88, 181, 0.28);
  --focus: 0 0 0 3px rgba(60, 111, 212, 0.28);

  /* Shape & type */
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius: 10px;
  --radius-sm: 7px;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script: "Dancing Script", "Segoe Script", cursive;
}

/* Dark theme — defined twice: OS preference (unless forced light) and explicit toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d1427;
    --bg-glow-a: #1d1a3a;
    --bg-glow-b: #10203f;
    --panel: rgba(20, 29, 54, 0.92);
    --panel-border: rgba(255, 255, 255, 0.05);
    --card: rgba(27, 38, 68, 0.95);
    --card-solid: #1b2644;
    --card-border: #2a3860;
    --subtle: #1f2b4c;
    --subtle-2: #223055;
    --line: #2a3760;
    --text: #e6ecfb;
    --text-2: #c2cdea;
    --muted: #8f9cc0;
    --script: #c9d6f7;
    --primary: #6c9cf2;
    --primary-600: #5487e6;
    --primary-soft: #263a6a;
    --primary-softer: #22335c;
    --ring-a: #4f86ec;
    --ring-b: #9cc0f7;
    --track: #2a3760;
    --tint-green: linear-gradient(180deg, #1c3a37 0%, #1b2f3c 100%);
    --tint-green-border: #2a4b4a;
    --tint-orange: linear-gradient(180deg, #3b2f27 0%, #2c2a37 100%);
    --tint-orange-border: #4b3a2e;
    --tint-pink: linear-gradient(180deg, #3d2438 0%, #2c243f 100%);
    --tint-pink-border: #4c2f47;
    --tint-rose: linear-gradient(180deg, #37254a 0%, #29254a 100%);
    --tint-rose-border: #48325c;
    --tint-blue: #22355e;
    --tint-purple: #2d2a58;
    --tint-sky: #1f3a55;
    --tint-peach: #3a3030;
    --tone-blue: #263c6c;
    --tone-purple: #352c62;
    --tone-pink: #45273f;
    --tone-green: #1f3f3a;
    --shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1427;
  --bg-glow-a: #1d1a3a;
  --bg-glow-b: #10203f;
  --panel: rgba(20, 29, 54, 0.92);
  --panel-border: rgba(255, 255, 255, 0.05);
  --card: rgba(27, 38, 68, 0.95);
  --card-solid: #1b2644;
  --card-border: #2a3860;
  --subtle: #1f2b4c;
  --subtle-2: #223055;
  --line: #2a3760;
  --text: #e6ecfb;
  --text-2: #c2cdea;
  --muted: #8f9cc0;
  --script: #c9d6f7;
  --primary: #6c9cf2;
  --primary-600: #5487e6;
  --primary-soft: #263a6a;
  --primary-softer: #22335c;
  --ring-a: #4f86ec;
  --ring-b: #9cc0f7;
  --track: #2a3760;
  --tint-green: linear-gradient(180deg, #1c3a37 0%, #1b2f3c 100%);
  --tint-green-border: #2a4b4a;
  --tint-orange: linear-gradient(180deg, #3b2f27 0%, #2c2a37 100%);
  --tint-orange-border: #4b3a2e;
  --tint-pink: linear-gradient(180deg, #3d2438 0%, #2c243f 100%);
  --tint-pink-border: #4c2f47;
  --tint-rose: linear-gradient(180deg, #37254a 0%, #29254a 100%);
  --tint-rose-border: #48325c;
  --tint-blue: #22355e;
  --tint-purple: #2d2a58;
  --tint-sky: #1f3a55;
  --tint-peach: #3a3030;
  --tone-blue: #263c6c;
  --tone-purple: #352c62;
  --tone-pink: #45273f;
  --tone-green: #1f3f3a;
  --shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
  background:
    radial-gradient(1200px 600px at 10% 0%, var(--bg-glow-a), transparent 60%),
    radial-gradient(900px 700px at 100% 100%, var(--bg-glow-b), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }

/* ---------- Typography helpers ---------- */
.script {
  font-family: var(--font-script);
  color: var(--script);
  font-weight: 500;
}

.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--filled { fill: currentColor; fill-opacity: 0.16; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}