/*
  LawScroll Diary — Design Tokens
  Seed color: #4B3869 ("Judicial Plum") — a deep, muted violet. Chosen
  deliberately over the expected navy/blue: violet has real legal-tradition
  grounding (barrister and academic legal dress), and it's clearly distinct
  from core.lawscroll.in's own teal, so Diary keeps its own identity within
  the ecosystem rather than just being "a darker version of the same color."

  Every color below is expressed as a token so light/dark mode and any future
  admin-configurable palette only ever require changing values here — nothing
  else in the CSS should ever reference a raw hex value.
*/

:root {
  /* ---- Color: light (default) ---- */
  --color-primary: #4B3869;
  --color-primary-container: #EADDFF;
  --color-on-primary: #FFFFFF;
  --color-on-primary-container: #24123D;

  --color-surface: #FDFAFF;
  --color-surface-container: #F3EDFA;
  --color-surface-container-high: #ECE4F4;
  --color-on-surface: #1C1B1F;
  --color-on-surface-variant: #49454E;
  --color-outline: #7B757F;
  --color-outline-variant: #CBC4CF;

  --color-success: #1E6E3C;
  --color-success-container: #D9F2DE;
  --color-on-success-container: #0B3D1E;

  --color-error: #8E2A2A;
  --color-error-container: #F8DEDC;
  --color-on-error-container: #410E0B;

  --color-warning: #8A5A00;
  --color-warning-container: #FCE8C6;
  --color-on-warning-container: #402D00;

  --elevation-1: 0 1px 2px rgba(28,27,31,0.10), 0 1px 3px rgba(28,27,31,0.08);
  --elevation-2: 0 2px 6px rgba(28,27,31,0.14);

  /* ---- Typography ---- */
  --font-family-base: 'Google Sans Flex', 'Roboto', system-ui, -apple-system, sans-serif;
  --font-size-xs: 0.8125rem;   /* 13px — meta text, timestamps */
  --font-size-sm: 0.9375rem;   /* 15px — secondary body */
  --font-size-base: 1rem;      /* 16px — body */
  --font-size-md: 1.125rem;    /* 18px — emphasized body / card titles */
  --font-size-lg: 1.375rem;    /* 22px — section headings */
  --font-size-xl: 1.875rem;    /* 30px — page titles */
  --line-height-base: 1.5;

  /* ---- Spacing (4px base unit) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ---- Shape ---- */
  --radius-sm: 8px;   /* inputs, buttons, badges */
  --radius-md: 12px;  /* cards */
  --radius-lg: 20px;  /* sheets/panels */

  /* ---- Layout ---- */
  --content-max-width: 880px;
  --topbar-height: 60px;
  --bottomnav-height: 64px;
}

/* ---- Dark mode: follows OS preference by default ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #D4BBFF;
    --color-primary-container: #392A54;
    --color-on-primary: #3A2657;
    --color-on-primary-container: #EADDFF;

    --color-surface: #141218;
    --color-surface-container: #201E24;
    --color-surface-container-high: #2B2930;
    --color-on-surface: #E6E1E9;
    --color-on-surface-variant: #CAC4D0;
    --color-outline: #948F99;
    --color-outline-variant: #49454E;

    --color-success: #94D6A3;
    --color-success-container: #0F4A25;
    --color-on-success-container: #B0EFBC;

    --color-error: #F2B8B0;
    --color-error-container: #5F1615;
    --color-on-error-container: #F9DEDC;

    --color-warning: #F5C56B;
    --color-warning-container: #4A3300;
    --color-on-warning-container: #FCE8C6;

    --elevation-1: 0 1px 2px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.25);
    --elevation-2: 0 2px 6px rgba(0,0,0,0.4);
  }
}

/* ---- Explicit override via the theme toggle (see nav.js) ---- */
:root[data-theme="dark"] {
  --color-primary: #D4BBFF;
  --color-primary-container: #392A54;
  --color-on-primary: #3A2657;
  --color-on-primary-container: #EADDFF;
  --color-surface: #141218;
  --color-surface-container: #201E24;
  --color-surface-container-high: #2B2930;
  --color-on-surface: #E6E1E9;
  --color-on-surface-variant: #CAC4D0;
  --color-outline: #948F99;
  --color-outline-variant: #49454E;
  --color-success: #94D6A3;
  --color-success-container: #0F4A25;
  --color-on-success-container: #B0EFBC;
  --color-error: #F2B8B0;
  --color-error-container: #5F1615;
  --color-on-error-container: #F9DEDC;
  --color-warning: #F5C56B;
  --color-warning-container: #4A3300;
  --color-on-warning-container: #FCE8C6;
  --elevation-1: 0 1px 2px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.25);
  --elevation-2: 0 2px 6px rgba(0,0,0,0.4);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-on-surface);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0 0 var(--space-3); color: var(--color-on-surface); }
h1 { font-size: var(--font-size-xl); }
h2 { font-size: var(--font-size-lg); }
h3 { font-size: var(--font-size-md); }
p { margin: 0 0 var(--space-3); }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--color-on-surface-variant); font-size: var(--font-size-sm); }

::selection { background: var(--color-primary-container); color: var(--color-on-primary-container); }

/* Visible keyboard focus everywhere — never suppressed */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}