/* ==========================================================================
   DESIGN TOKENS — the single source of truth for the whole interface.
   Everything else styles itself only from these variables, so changing a
   token here (or from Settings) restyles the entire app coherently.
   ========================================================================== */

:root {
  /* ---- neutral ramp (warm grey, Notion-like) ------------------------------ */
  --n0:#ffffff; --n1:#fbfbfa; --n2:#f7f7f5; --n3:#f1f1ef;
  --n4:#e9e9e7; --n5:#dfdfdc; --n6:#c7c7c4;
  --n7:#9b9a97; --n8:#787774; --n9:#5f5e5b; --n10:#37352f;

  /* ---- semantic surface + text ------------------------------------------- */
  --bg:            var(--n0);   /* page background                            */
  --bg-sunken:     var(--n2);   /* sidebar, wells                             */
  --bg-raised:     var(--n0);   /* cards, popovers                            */
  --bg-hover:      rgba(55,53,47,.055);
  --bg-active:     rgba(55,53,47,.09);
  --border:        rgba(55,53,47,.11);
  --border-strong: rgba(55,53,47,.20);

  --text:       var(--n10);
  --text-muted: var(--n8);
  --text-faint: var(--n7);
  --text-on-accent:#ffffff;

  /* ---- accent (user-customisable; --accent is set inline by PHP) --------- */
  --accent:        #2383e2;
  --accent-hover:  color-mix(in srgb, var(--accent) 86%, black);
  --accent-soft:   color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 42%, transparent);

  /* ---- status ------------------------------------------------------------ */
  --ok:#0f7b6c;      --ok-soft:color-mix(in srgb,#0f7b6c 12%,transparent);
  --warn:#cb912f;    --warn-soft:color-mix(in srgb,#cb912f 14%,transparent);
  --danger:#e03e3e;  --danger-soft:color-mix(in srgb,#e03e3e 12%,transparent);
  --info:#337ea9;

  /* ---- tag palette (deterministic per label) ----------------------------- */
  --tag1:#e3e2e0; --tag2:#ffe2dd; --tag3:#fdecc8; --tag4:#dbeddb;
  --tag5:#d3e5ef; --tag6:#e8deee; --tag7:#f5e0e9; --tag8:#eee0da;

  /* ---- typography (font + size are customisable) ------------------------- */
  --font-sans:"Inter var","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",
              "Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,
              "Times New Roman",serif;
  --font-mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;

  --font:      var(--font-sans);   /* overridden by data-font */
  --font-ui:   var(--font-sans);   /* chrome always stays sans for legibility */
  --fs:        16px;               /* base body size, overridden by data-size */

  --fs-xs:  calc(var(--fs) * .69);
  --fs-sm:  calc(var(--fs) * .81);
  --fs-md:  calc(var(--fs) * .875);
  --fs-base:var(--fs);
  --fs-lg:  calc(var(--fs) * 1.15);
  --fs-xl:  calc(var(--fs) * 1.45);
  --fs-2xl: calc(var(--fs) * 1.9);
  --fs-3xl: calc(var(--fs) * 2.5);

  --lh-tight:1.25; --lh:1.55; --lh-loose:1.7;
  --fw-normal:400; --fw-medium:500; --fw-semi:600; --fw-bold:700;

  /* ---- spacing scale (4px rhythm; scaled by density) --------------------- */
  --space:4px;
  --s1:calc(var(--space) * 1);  --s2:calc(var(--space) * 2);
  --s3:calc(var(--space) * 3);  --s4:calc(var(--space) * 4);
  --s5:calc(var(--space) * 5);  --s6:calc(var(--space) * 6);
  --s8:calc(var(--space) * 8);  --s10:calc(var(--space) * 10);
  --s12:calc(var(--space) * 12);--s16:calc(var(--space) * 16);

  /* ---- shape (customisable) ---------------------------------------------- */
  --radius:4px;
  --radius-sm:calc(var(--radius) * .75);
  --radius-lg:calc(var(--radius) * 2);
  --radius-pill:999px;

  /* ---- elevation — deliberately restrained ------------------------------- */
  --shadow-sm:0 1px 2px rgba(15,15,15,.06);
  --shadow:0 2px 6px rgba(15,15,15,.08), 0 0 0 1px rgba(15,15,15,.04);
  --shadow-lg:0 12px 32px rgba(15,15,15,.13), 0 0 0 1px rgba(15,15,15,.05);

  /* ---- layout (customisable) --------------------------------------------- */
  --sidebar-w:248px;
  --page-w:900px;
  --page-pad:96px;
  --topbar-h:45px;

  /* ---- motion ------------------------------------------------------------ */
  --ease:cubic-bezier(.4,0,.2,1);
  --fast:120ms; --normal:200ms;
}

/* ==========================================================================
   THEMES
   ========================================================================== */

/* Dark: re-point the neutral ramp, everything downstream follows. */
html[data-mode="dark"] {
  --n0:#191919; --n1:#1e1e1e; --n2:#202020; --n3:#252525;
  --n4:#2f2f2f; --n5:#373737; --n6:#4a4a4a;
  --n7:#6f6f6f; --n8:#9b9b9b; --n9:#b8b8b8; --n10:#d4d4d4;

  --bg-hover:rgba(255,255,255,.055);
  --bg-active:rgba(255,255,255,.09);
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.18);

  --ok:#4dab9a; --warn:#ffdc49; --danger:#ff7369; --info:#529cca;

  --tag1:#373737; --tag2:#5c3b3b; --tag3:#59563b; --tag4:#354c4b;
  --tag5:#37455c; --tag6:#493c5c; --tag7:#5c3b4d; --tag8:#59453b;

  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 2px 8px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05);
  --shadow-lg:0 14px 38px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  --text-on-accent:#ffffff;
}

/* ==========================================================================
   CUSTOMISATION — attributes set on <html> from saved settings
   ========================================================================== */

html[data-font="serif"] { --font:var(--font-serif); }
html[data-font="mono"]  { --font:var(--font-mono); }

html[data-size="sm"] { --fs:14px; }
html[data-size="md"] { --fs:15px; }
html[data-size="lg"] { --fs:16px; }
html[data-size="xl"] { --fs:17.5px; }

html[data-radius="square"] { --radius:0px; }
html[data-radius="soft"]   { --radius:4px; }
html[data-radius="round"]  { --radius:8px; }
html[data-radius="pill"]   { --radius:14px; }

html[data-width="narrow"] { --page-w:680px; }
html[data-width="normal"] { --page-w:900px; }
html[data-width="wide"]   { --page-w:1140px; }
html[data-width="full"]   { --page-w:100%; --page-pad:48px; }

html[data-density="compact"] {
  --space:3.4px;
  --lh:1.45;
  --topbar-h:40px;
  --page-pad:64px;
}

html[data-sidebar="sm"] { --sidebar-w:210px; }
html[data-sidebar="md"] { --sidebar-w:248px; }
html[data-sidebar="lg"] { --sidebar-w:300px; }