/* Procellari brand tokens, shared by the Sunaoji website and app.
   Same palette and type as procellari.com (Cuba design language). */
:root {
  --primary: #7366ff;
  --primary-dark: #5b4ef0;
  --primary-soft: #f1f0ff;
  --electric: #9d94ff;
  --success: #54ba4a;
  --success-soft: rgba(84, 186, 74, .12);
  --warning: #ffa941;
  --warning-soft: rgba(255, 169, 65, .14);
  --danger: #fc4438;
  --danger-soft: rgba(252, 68, 56, .1);
  --info: #16c7f9;

  --ink: #000248;          /* headings */
  --text: #52526c;         /* body copy */
  --muted: #8a8aa3;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --line: rgba(203, 203, 233, .6);
  --line-2: #f0f1f7;
  --on-primary: #ffffff;

  --gradient: linear-gradient(135deg, #7366ff 0%, #9d94ff 100%);
  --gradient-soft: linear-gradient(160deg, #f5f8ff 0%, #f1f0ff 55%, #e7e4ff 100%);
  --btn-split: linear-gradient(30deg, #7366ff 50%, rgba(255, 255, 255, .12) 50%);
  --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.5C40 3.5 90 2.5 197 6.5' fill='none' stroke='%2354ba4a' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");

  --shadow-sm: 0 10.9px 10.9px rgba(82, 77, 141, .04), 0 9.5px 7.6px rgba(82, 77, 141, .06), 0 5px 4px rgba(82, 77, 141, .03);
  --shadow: 0 12px 30px rgba(67, 56, 181, .10);
  --shadow-lg: 0 20px 50px rgba(67, 56, 181, .16);
  --radius: 10px;
  --radius-lg: 16px;

  /* Rubik for Latin; Anek picks up each Indian script glyph by glyph. */
  --font: "Rubik", "Anek Devanagari", "Anek Bangla", "Anek Tamil", "Anek Telugu", "Anek Kannada",
    "Anek Malayalam", "Anek Gujarati", "Anek Gurmukhi", "Anek Odia", -apple-system, "Segoe UI", sans-serif;
  --font-script: "Caveat", cursive;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #8d82ff; --primary-dark: #7366ff; --primary-soft: rgba(115, 102, 255, .16);
    --success-soft: rgba(84, 186, 74, .16); --warning-soft: rgba(255, 169, 65, .16); --danger-soft: rgba(252, 68, 56, .16);
    --ink: #f2f2fb; --text: #b9bad0; --muted: #8b8ca6; --bg: #1d1e26; --surface: #262932;
    --line: rgba(255, 255, 255, .1); --line-2: rgba(255, 255, 255, .06); --on-primary: #ffffff;
    --gradient-soft: linear-gradient(160deg, #1d1e26 0%, #24233a 60%, #2b2850 100%);
    --shadow-sm: none; --shadow: 0 12px 30px rgba(0, 0, 0, .3); --shadow-lg: 0 20px 50px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --primary: #8d82ff; --primary-dark: #7366ff; --primary-soft: rgba(115, 102, 255, .16);
  --success-soft: rgba(84, 186, 74, .16); --warning-soft: rgba(255, 169, 65, .16); --danger-soft: rgba(252, 68, 56, .16);
  --ink: #f2f2fb; --text: #b9bad0; --muted: #8b8ca6; --bg: #1d1e26; --surface: #262932;
  --line: rgba(255, 255, 255, .1); --line-2: rgba(255, 255, 255, .06); --on-primary: #ffffff;
  --gradient-soft: linear-gradient(160deg, #1d1e26 0%, #24233a 60%, #2b2850 100%);
  --shadow-sm: none; --shadow: 0 12px 30px rgba(0, 0, 0, .3); --shadow-lg: 0 20px 50px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

/* Theme switcher button (website + app) */
.theme-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 800px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; line-height: 1; }
.theme-btn:hover { border-color: var(--primary); color: var(--primary); }
.theme-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }