/* Perpetuum UI Kit tokens (Violet Bloom), for the plain-HTML Perpetuum tools.
   Source: Cerebrum vault, Areas/Perpetuum/UI Kit/globals.css. Live: https://design.perpetuum.agency
   Light is the default; <html class="dark"> switches. theme.js sets the class before first paint.

   Contrast rules from the kit:
   - dark mode: --primary is display-only (buttons, fills, large type). Violet at body size uses --primary-text.
   - the orange warning tone is a fill colour; orange text uses --warm-text.

   Three roles, so one glance tells what can be clicked:
   - action: --primary. Solid violet is only on what does something when you click it.
   - information: --info (the kit's blue, chart-4 and accent-foreground) and --info-b (the kit's green, chart-1).
     Labels, signals, badges and data. Tinted, never solid, so they don't pass for a button.
   - warning: --warm. Late, failed, missing or test data, and what moves down. Nothing else.
   The --info tokens are named here; the kit itself only has the colours. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  color-scheme:light;
  --background:oklch(0.9940 0 0);
  --card:oklch(1 0 0);
  --card-2:oklch(0.9777 0.0051 247.8763);
  --inset:oklch(1 0 0);
  --sidebar:oklch(0.9777 0.0051 247.8763);
  --foreground:oklch(0.1600 0 0);
  --muted-fg:oklch(0.4386 0 0);
  --faint-fg:oklch(0.5400 0 0);
  --border:oklch(0.9300 0.0094 286.2156);
  --border-strong:oklch(0.8700 0.0100 286.2156);
  --hover:oklch(0 0 0 / .035);

  --primary:oklch(0.5393 0.2713 286.7462);
  --primary-text:oklch(0.5393 0.2713 286.7462);
  --primary-fg:oklch(1 0 0);
  --primary-soft:oklch(0.5393 0.2713 286.7462 / .10);
  --primary-line:oklch(0.5393 0.2713 286.7462 / .45);

  --info:oklch(0.5828 0.1809 259.7276);
  --info-text:oklch(0.5445 0.1903 259.4848);
  --info-soft:oklch(0.5828 0.1809 259.7276 / .10);
  --info-line:oklch(0.5828 0.1809 259.7276 / .40);
  --info-b:oklch(0.7459 0.1483 156.4499);
  --info-b-text:oklch(0.4500 0.1200 156);
  --info-b-soft:oklch(0.7459 0.1483 156.4499 / .16);
  --info-b-line:oklch(0.6200 0.1400 156 / .45);

  --warm:oklch(0.7336 0.1758 50.5517);
  --warm-text:oklch(0.5300 0.1500 45);
  --warm-fg:oklch(0.2400 0.0600 50);
  --warm-soft:oklch(0.7336 0.1758 50.5517 / .14);
  --warm-line:oklch(0.7336 0.1758 50.5517 / .55);

  --success:oklch(0.7459 0.1483 156.4499);
  --success-text:oklch(0.5000 0.1300 156);
  --destructive:oklch(0.6290 0.1902 23.0704);

  --radius:1.4rem; --radius-md:calc(var(--radius)*.8); --radius-sm:calc(var(--radius)*.6);
  --shadow:0 2px 3px 0 hsl(0 0% 0% / .06);
  --shadow-lg:0 2px 3px 0 hsl(0 0% 0% / .16),0 8px 24px -8px hsl(0 0% 0% / .18);
  --scrim:oklch(0.2 0.01 280 / .72);

  --fd:'Lora',Georgia,serif;
  --fb:'Plus Jakarta Sans',system-ui,sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,monospace;
  /* The kit pulls all letters together by 0.025em. At the small sizes of this tool that runs words into each other,
     so running text keeps the font's own spacing here. Headings set their own, tighter spacing. */
  --tracking:0;
}
.dark{
  color-scheme:dark;
  --background:oklch(0.2223 0.0060 271.1393);
  --card:oklch(0.2568 0.0076 274.6528);
  --card-2:oklch(0.2940 0.0130 272.9312);
  --inset:oklch(0.2223 0.0060 271.1393);
  --sidebar:oklch(0.2011 0.0039 286.0396);
  --foreground:oklch(0.9551 0 0);
  --muted-fg:oklch(0.7058 0 0);
  --faint-fg:oklch(0.6400 0 0);
  --border:oklch(0.3289 0.0092 268.3843);
  --border-strong:oklch(0.4000 0.0100 268.3843);
  --hover:oklch(1 0 0 / .04);

  --primary:oklch(0.6132 0.2294 291.7437);
  --primary-text:oklch(0.7200 0.1900 291.7437);
  --primary-soft:oklch(0.6132 0.2294 291.7437 / .16);
  --primary-line:oklch(0.7200 0.1900 291.7437 / .55);

  --info:oklch(0.6691 0.1569 260.1063);
  --info-text:oklch(0.7857 0.1153 246.6596);
  --info-soft:oklch(0.6691 0.1569 260.1063 / .18);
  --info-line:oklch(0.7857 0.1153 246.6596 / .45);
  --info-b:oklch(0.8003 0.1821 151.7110);
  --info-b-text:oklch(0.8003 0.1821 151.7110);
  --info-b-soft:oklch(0.8003 0.1821 151.7110 / .13);
  --info-b-line:oklch(0.8003 0.1821 151.7110 / .40);

  --warm:oklch(0.8000 0.1400 62);
  --warm-text:oklch(0.8000 0.1400 62);
  --warm-soft:oklch(0.8000 0.1400 62 / .14);
  --warm-line:oklch(0.8000 0.1400 62 / .5);

  --success:oklch(0.8003 0.1821 151.7110);
  --success-text:oklch(0.8003 0.1821 151.7110);
  --destructive:oklch(0.7106 0.1661 22.2162);

  --shadow:0 2px 3px 0 hsl(0 0% 0% / .16);
  --shadow-lg:0 2px 3px 0 hsl(0 0% 0% / .3),0 12px 32px -8px hsl(0 0% 0% / .5);
  --scrim:oklch(0.12 0.005 280 / .88);
}

/* Perpetuum mark: violet disc with the infinity loop, as in the kit sidebar */
.pmark{width:38px;height:38px;border-radius:50%;background:var(--primary);color:var(--primary-fg);display:grid;place-items:center;flex:none}
/* A client's own logo, where the mark would be. */
.plogo{width:38px;height:38px;border-radius:11px;flex:none;display:block;object-fit:contain}
.pmark svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* light/dark toggle (kit: round icon button, top right) */
.theme-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--foreground);
 display:grid;place-items:center;cursor:pointer;flex:none;transition:border-color .15s}
.theme-btn:hover{border-color:var(--border-strong)}
.theme-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .sun{display:none}
.dark .theme-btn .sun{display:block}
.dark .theme-btn .moon{display:none}