/* =====================================================================
   KYNSAYS THEME
   ---------------------------------------------------------------------
   The single source of truth for how Kynsays looks: colours, fonts,
   corner radii, shadows and chart colours. Light is the default; the
   app's "Dark mode" switch applies the html.dark-mode values.

   Rules for editing
   - Colours used with transparency have a "-rgb" twin written as three
     space-separated numbers (e.g. 91 63 214). Keep both in sync.
   - --accent must be a 6-digit hex value (the app derives shades from it).
   - Chart colours are read by the charts when the page loads.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@400;500&family=Poppins:wght@300;400;500;600;700&display=swap');
:root{
  /* ---------- brand ---------- */
  --kyn-pink:#D6336C;            --kyn-pink-rgb:214 51 108;      /* secondary accent, used sparingly */
  --kyn-purple:#5B3FD6;          --kyn-purple-rgb:91 63 214;     /* primary */
  --kyn-blue:#2F6FEB;            --kyn-blue-rgb:47 111 235;      /* links, secondary buttons */
  --kyn-grad:linear-gradient(135deg,#6A4BE3 0%,#4338CA 100%);
  --kyn-grad-soft:linear-gradient(135deg,rgb(var(--kyn-purple-rgb) / .08),rgb(var(--kyn-blue-rgb) / .08));
  --kyn-glow:0 8px 20px -10px rgb(var(--kyn-purple-rgb) / .35);
  --kyn-deep:#2E2A8F;

  /* ---------- status ---------- */
  --kyn-success:#0E9F6E;         --kyn-success-rgb:14 159 110;
  --kyn-warning:#D98E04;         --kyn-warning-rgb:217 142 4;
  --kyn-danger:#E0364F;          --kyn-danger-rgb:224 54 79;
  --kyn-mint:var(--kyn-success);
  --kyn-gold:var(--kyn-warning);

  /* ---------- type ---------- */
  --kyn-font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --kyn-display:'Bebas Neue','Poppins',Impact,sans-serif;
  --kyn-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ---------- shape ---------- */
  --radius:14px;

  /* ---------- charts (series colours, in order) ---------- */
  --kyn-chart-1:#5B3FD6;
  --kyn-chart-2:#2F6FEB;
  --kyn-chart-3:#0E9F6E;
  --kyn-chart-4:#14A3B8;
  --kyn-chart-5:#E0A100;
  --kyn-chart-6:#0284C7;
  --kyn-chart-7:#D6336C;
  --kyn-chart-8:#8B5CF6;
  --kyn-chart-9:#65A30D;
  --kyn-chart-10:#EC4899;
  --kyn-chart-11:#F97316;
  --kyn-chart-12:#CA8A04;
  --kyn-chart-text-light:#5B6178;
  --kyn-chart-text-dark:#9096B8;
  --kyn-chart-grid-light:rgba(17,21,39,.07);
  --kyn-chart-grid-dark:rgba(148,158,255,.10);
  --kyn-chart-tooltip-bg:rgba(17,21,39,.94);
  --kyn-chart-tooltip-border:rgba(91,63,214,.35);
  --sidebar-bg:#0b0c0e;
  --sidebar-text:#c7cbd1;
  --sidebar-text-dim:#7a7f87;

  /* accent text */
  --kyn-accent-text:#5B3FD6;
  --kyn-accent-text-2:#4A31B8;
  --kyn-hot-text:#C2255C;
  --kyn-blue-text:#2459C9;
  --kyn-success-text:#0A7F58;    --kyn-success-text-2:#0A7F58;
  --kyn-warning-text:#9A6300;
  --kyn-danger-text:#B8233F;
  --kyn-lavender-rgb:91 63 214;                                  /* soft borders and glows */
  --kyn-line-rgb:17 21 39;                                       /* hairlines and grid lines */

  /* ---------- "stage": the brand surfaces
     (homepage, sign-in pages, setup wizard, hero panels) ---------- */
  --kyn-stage-bg:#F6F7FB;        --kyn-stage-bg-rgb:246 247 251;
  --kyn-stage-surface:#FFFFFF;   --kyn-stage-surface-rgb:255 255 255;
  --kyn-stage-input:#FFFFFF;     --kyn-stage-input-rgb:255 255 255;
  --kyn-stage-soft:#F1F2F8;
  --kyn-stage-border:#E3E5EF;
  --kyn-stage-border-strong:#C8CCDD;
  --kyn-stage-text:#111527;      --kyn-stage-text-rgb:17 21 39;
  --kyn-stage-text-soft:#2B3047;
  --kyn-stage-text-2:#4A5068;
  --kyn-stage-muted:#62687F;
  --kyn-stage-faint:#8B90A6;
  --kyn-hero:#FFFFFF;            --kyn-hero-rgb:255 255 255;
  --kyn-hero-2:#F4F2FD;          --kyn-hero-2-rgb:244 242 253;
  --kyn-navy:#111527;

  /* ---------- app surfaces ---------- */
  --accent:#5B3FD6;
  --accent-dark:#4A31B8;
  --accent-soft:rgb(var(--kyn-purple-rgb) / .08);
  --ink:#111527;
  --bg:#F6F7FB;
  --card-bg:#FFFFFF;
  --card-border:#E3E5EF;
  --text:#111527;
  --text-muted:#5B6178;
  --positive:#0E9F6E;
  --positive-soft:rgba(14,159,110,.10);
  --negative:#E0364F;
  --negative-soft:rgba(224,54,79,.08);
  --neutral:#9AA0B5;
  --neutral-soft:#F1F2F8;
  --warn:#B77A00;
  --shadow:0 1px 2px rgba(17,21,39,.05),0 4px 16px -8px rgba(17,21,39,.08);
  --scrollbar-thumb:#CDD1E0;
  --pill-neutral-bg:#F1F2F8;
  --pill-neutral-border:#E3E5EF;
  --pill-neutral-text:#5B6178;
}