/* Adab design system · light, friendly, one confident blue · design-system: design.md
 * Tokens only. app.css and the area sheets reference these by name; nothing inlines a colour or a font.
 * The same palette drives the public site (css/site.css) and the app. */
:root {

  /* Surfaces */
  --color-paper:        light-dark(#f7f8fa, #111318);   /* app background */
  --color-paper-2:      light-dark(#f1f2f6, #1a1d24);   /* wells, table heads, segmented tracks */
  --color-paper-3:      light-dark(#e9ebf0, #252933);   /* hover */
  --color-surface:      light-dark(#ffffff, #171a21);   /* cards, inputs, sidebar */
  --color-scrim:        light-dark(rgb(27 29 42 / 0.45), rgb(0 0 0 / 0.6));
  --color-canvas-email: oklch(100% 0 0);          /* email previews stay white: that is what inboxes show */

  /* Text */
  --color-ink:          light-dark(#1b1d2a, #eceef4);
  --color-ink-2:        light-dark(#4a4f5e, #b9bdca);     /* secondary text: 8.1:1 */
  --color-ink-3:        light-dark(#6b7080, #9196a5);     /* placeholders, meta: 4.8:1 */

  /* Lines */
  --color-rule:         light-dark(#e6e7ec, #2a2e38);
  --color-rule-strong:  light-dark(#d4d6de, #3d4250);

  /* The one accent: primary actions, current nav item, links, focus */
  --color-accent:       light-dark(#2d4be0, #7d93ff);
  --color-accent-hover: light-dark(#1e36b8, #9aabff);
  --color-accent-soft:  light-dark(#eef1fe, #1d2547);
  --color-accent-ink:   light-dark(#ffffff, #0b1233);
  --color-accent-text:  light-dark(#2d4be0, #9aabff);  /* links, counts: 6.1:1 */
  --color-focus:        light-dark(#2d4be0, #9aabff);

  /* Sunflower: highlights and moments of delight, never for text on white */
  --color-sun:          light-dark(#ffd25e, #f5c542);
  --color-sun-soft:     light-dark(#fff8e1, #2f2810);
  --color-sun-rule:     light-dark(#f3e2a6, #4a3f1a);
  --color-sun-ink:      light-dark(#6a4d00, #f3d27a);

  /* Status: a soft fill with strong text */
  --color-ok:           light-dark(#136b47, #6fd3a2);
  --color-ok-soft:      light-dark(#e3f5ec, #13301f);
  --color-warn:         light-dark(#6a4d00, #f3d27a);
  --color-warn-soft:    light-dark(#fff3cc, #2f2810);
  --color-bad:          light-dark(#a83a27, #f4968a);
  --color-bad-soft:     light-dark(#fdece8, #3b1a16);
  --color-info:         light-dark(#2d4be0, #9aabff);
  --color-info-soft:    light-dark(#ebeefe, #1d2547);

  /* Type: Bricolage Grotesque for display, Figtree for everything else */
  --font-body:    "Figtree Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque Variable", "Figtree Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono Variable", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.875rem;
  --leading:   1.55;
  --tracking-display: -0.02em;

  /* Space: 4-point scale */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  /* Shape: soft corners, pills for marks */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;
  --rule:        1px solid var(--color-rule);
  --color-shadow:       light-dark(rgb(27 29 42 / 0.06), rgb(0 0 0 / 0.3));
  --color-shadow-pop:   light-dark(rgb(27 29 42 / 0.2), rgb(0 0 0 / 0.55));
  --shadow-1:    0 1px 2px var(--color-shadow);
  --shadow-lift: 0 12px 28px -18px var(--color-shadow-pop);
  --shadow-pop:  0 20px 40px -16px var(--color-shadow-pop), 0 2px 6px var(--color-shadow);

  /* Motion */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short:   150ms;
  --dur:         250ms;

  /* Shell */
  --sidebar-w:           15.5rem;
  --sidebar-w-collapsed: 4.25rem;
  --control-h:           2.5rem;
  --page-max:            76rem;
}

/* Theme: each colour above is light-dark(light, dark). Light is the default; dark only when the
 * person picks it, or picks "Match my device" on a device set to dark. The server writes
 * data-theme from a cookie so the first paint is already right. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="system"] { color-scheme: light dark; }

/* Touch: controls grow to a 44px target on small screens. */
@media (max-width: 56rem) { :root { --control-h: 2.75rem; } }