/* TurkCouncil design tokens — shared by the public dictionary and the admin panel.
   Redesign 2026-09-21 ("Dictionary Design" package): royal-navy type, teal interaction, soft blue-tinted surfaces.
   Variable NAMES are stable on purpose (admin.css reads --teal, --navy, --soft-teal, ...) — only values changed. */

:root {
  /* brand palette (design sheet) */
  --teal: #0891a8;            /* primary action colour, sampled from the mockup buttons */
  --teal-deep: #06768b;       /* hover / pressed / link text on white */
  --teal-2: #0ea5ab;          /* sheet "Primary" — accents, progress, active tabs */
  --teal-solid: #078095;      /* filled buttons/tabs with text on them: --teal darkened just enough for 4.5:1 */
  --on-teal-solid: #fff;      /* text on --teal-solid */
  --blue: #2563eb;            /* sheet "Secondary" */
  --amber: #f59e0b;           /* sheet "Accent" — stars, warnings */
  --green: #10b981;
  --red: #ef4444;

  /* type + surfaces */
  --navy: #0b1b78;            /* headings: deep royal blue, like the mockup */
  --heading: #0b1b78;
  --text: #0e1c5c;            /* body copy (Turkish meanings etc.) */
  --text-2: #33447e;
  --muted: #5a6c96;           /* IPA, captions, secondary copy */
  --bg: #f7fcff;
  --surface: #ffffff;
  --surface-2: #f1f8fc;
  --soft-teal: #e6f6fa;       /* icon tiles, hover fills, selected rows */
  --soft-blue: #e4effc;       /* chips, level pills */
  --border: #dfeaf3;
  --border-2: #cddceb;
  --link: #0a7f98;
  --focus: #0891a8;
  --on-teal: #ffffff;

  --shadow-sm: 0 1px 2px rgba(15, 31, 92, 0.05);
  --shadow: 0 6px 20px rgba(15, 31, 92, 0.07);
  --shadow-lg: 0 14px 40px rgba(15, 31, 92, 0.12);
  --glass: rgba(255, 255, 255, 0.72);

  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hand: "Caveat", "Kalam", cursive;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --ease: 180ms ease;
  --maxw: 1440px;
  --gutter: 28px;
  --header-h: 68px;
  --grad: linear-gradient(90deg, #a855f7, #c084fc, #d946ef, #ec4899); /* logo lockup only */
}

:root[data-theme="dark"] {
  --teal: #22b5cc;
  --teal-deep: #7fdcec;
  --teal-2: #2fc0c6;
  --teal-solid: #22b5cc;
  --on-teal-solid: #04202a;   /* dark text, as .btn-primary already had */
  --blue: #6ea0ff;
  --navy: #cdd8ff;
  --heading: #d6deff;
  --text: #e4ebf9;
  --text-2: #c0cde6;
  --muted: #94a8c9;
  --bg: #08111f;
  --surface: #0e1b31;
  --surface-2: #122340;
  --soft-teal: #0d3140;
  --soft-blue: #14294b;
  --border: #1d3457;
  --border-2: #29466f;
  --link: #6fd5e6;
  --focus: #6fd5e6;
  --shadow-sm: none;
  --shadow: 0 8px 26px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.45);
  --glass: rgba(14, 27, 49, 0.72);
}

/* Tone chips (icon tiles, category accents) */
.tone-green { --t-bg: #ddf6e8; --t-fg: #1c8a57; --t-card: #eefaf3; }
.tone-rose { --t-bg: #fde3e8; --t-fg: #d33a55; --t-card: #fff1f3; }
.tone-violet { --t-bg: #eee8ff; --t-fg: #6b4fe0; --t-card: #f4f0ff; }
.tone-amber { --t-bg: #ffeacb; --t-fg: #d9822b; --t-card: #fff5e8; }
.tone-blue { --t-bg: #e3eefb; --t-fg: #2c6fd3; --t-card: #eef4fc; }
.tone-teal { --t-bg: #d9f2f2; --t-fg: #0f8b8d; --t-card: #ecf8f8; }
:root[data-theme="dark"] .tone-green { --t-bg: rgba(52, 199, 122, 0.16); --t-fg: #6be0a3; --t-card: rgba(52, 199, 122, 0.07); }
:root[data-theme="dark"] .tone-rose { --t-bg: rgba(255, 99, 132, 0.16); --t-fg: #ff8fa5; --t-card: rgba(255, 99, 132, 0.07); }
:root[data-theme="dark"] .tone-violet { --t-bg: rgba(139, 112, 255, 0.18); --t-fg: #b3a2ff; --t-card: rgba(139, 112, 255, 0.08); }
:root[data-theme="dark"] .tone-amber { --t-bg: rgba(255, 170, 60, 0.16); --t-fg: #ffb85c; --t-card: rgba(255, 170, 60, 0.07); }
:root[data-theme="dark"] .tone-blue { --t-bg: rgba(80, 150, 255, 0.16); --t-fg: #8db8ff; --t-card: rgba(80, 150, 255, 0.07); }
:root[data-theme="dark"] .tone-teal { --t-bg: rgba(47, 184, 186, 0.18); --t-fg: #5fd6d8; --t-card: rgba(47, 184, 186, 0.08); }