/* ==========================================================================
   AR design system: shared tokens + base for albertusrevo.com and /lab.
   Accent comes from the AR logo (#2352ff). Neutrals are warm paper / ink.
   Theme: [data-theme] on <html> is set by /assets/theme.js; the media query
   below is the no-JS fallback.
   ========================================================================== */
:root{
  /* Neutrals */
  --bg: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #efeee9;
  --surface-3: #e6e4dd;
  --ink: #121214;
  --ink-2: #2c2c30;
  --muted: #67665f;
  --faint: #8a8880;
  --line: #e4e2db;
  --line-strong: #cfccc2;
  --plate: #ffffff;              /* logo plates stay white in both themes */

  /* Brand */
  --accent: #2352ff;             /* text + icons on bg (5.2:1) */
  --accent-fill: #2352ff;        /* filled buttons (white text 5.6:1) */
  --accent-hover: #1a43e0;
  --on-accent: #ffffff;
  --accent-soft: #e7ecff;
  --accent-line: #c4d0ff;

  /* Status */
  --ok: #15803d;
  --warn: #b45309;
  --danger: #dc2626;
  --info: #2563eb;

  /* Inverse panels (dark slab in light mode, lifted slab in dark mode) */
  --inverse: #121214;
  --on-inverse: #f6f5f1;
  --on-inverse-muted: #a3a29c;

  /* Type */
  /* Pairing: Cormorant Garamond (display) + Source Sans 3 (text), Source Code Pro for numbers/labels */
  --font-sans: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Source Code Pro', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --fw-display: 500;

  /* Shape */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Depth */
  --shadow-xs: 0 1px 2px rgb(18 18 20 / .05);
  --shadow-sm: 0 1px 2px rgb(18 18 20 / .04), 0 2px 8px -2px rgb(18 18 20 / .06);
  --shadow-md: 0 1px 2px rgb(18 18 20 / .04), 0 12px 32px -12px rgb(18 18 20 / .14);
  --shadow-lg: 0 2px 4px rgb(18 18 20 / .04), 0 24px 64px -16px rgb(18 18 20 / .22);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: .15s;
  --dur-2: .25s;
  --dur-3: .45s;

  color-scheme: light;
}

:root[data-theme="dark"]{
  --bg: #0d0d0f;
  --surface: #151518;
  --surface-2: #1c1c20;
  --surface-3: #25252a;
  --ink: #f2f1ed;
  --ink-2: #d6d5d0;
  --muted: #a3a29c;
  --faint: #75746e;
  --line: #26262b;
  --line-strong: #37373d;
  --plate: #f4f4f2;
  --accent: #7c96ff;
  --accent-fill: #2f5bff;
  --accent-hover: #4a70ff;
  --on-accent: #ffffff;
  --accent-soft: #161d3d;
  --accent-line: #2a3878;
  --ok: #4ade80;
  --warn: #fbbf24;
  --danger: #f87171;
  --info: #60a5fa;
  --inverse: #1c1c20;
  --on-inverse: #f2f1ed;
  --on-inverse-muted: #a3a29c;
  --shadow-xs: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .3), 0 2px 8px -2px rgb(0 0 0 / .4);
  --shadow-md: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -12px rgb(0 0 0 / .6);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / .3), 0 24px 64px -16px rgb(0 0 0 / .7);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #0d0d0f;
    --surface: #151518;
    --surface-2: #1c1c20;
    --surface-3: #25252a;
    --ink: #f2f1ed;
    --ink-2: #d6d5d0;
    --muted: #a3a29c;
    --faint: #75746e;
    --line: #26262b;
    --line-strong: #37373d;
    --plate: #f4f4f2;
    --accent: #7c96ff;
    --accent-fill: #2f5bff;
    --accent-hover: #4a70ff;
    --on-accent: #ffffff;
    --accent-soft: #161d3d;
    --accent-line: #2a3878;
    --ok: #4ade80;
    --warn: #fbbf24;
    --danger: #f87171;
    --info: #60a5fa;
    --inverse: #1c1c20;
    --on-inverse: #f2f1ed;
    --on-inverse-muted: #a3a29c;
    --shadow-xs: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .3), 0 2px 8px -2px rgb(0 0 0 / .4);
    --shadow-md: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -12px rgb(0 0 0 / .6);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / .3), 0 24px 64px -16px rgb(0 0 0 / .7);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums; /* Cormorant defaults to old-style figures */
}
::selection{ background: color-mix(in srgb, var(--accent) 24%, transparent); }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
button, input, select, textarea{ font: inherit; color: inherit; }
input::placeholder, textarea::placeholder{ color: var(--faint); opacity: 1; }
.mono{ font-family: var(--font-mono); }
.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Thin, theme-aware scrollbars */
*{ scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track{ background: transparent; }

/* ---------- Theme toggle (shared) ---------- */
.theme-toggle{
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease, background var(--dur-1) ease, transform var(--dur-2) var(--ease);
}
.theme-toggle:hover{ color: var(--ink); border-color: var(--line-strong); }
.theme-toggle:active{ transform: scale(.94); }
.theme-toggle i{ font-size: 17px; line-height: 1; }
.theme-toggle .ph-sun{ display: none; }
:root[data-theme="dark"] .theme-toggle .ph-sun{ display: inline; }
:root[data-theme="dark"] .theme-toggle .ph-moon{ display: none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}