/* justiceapex.ai design tokens. Plain custom properties, no build step.
   Light is the default. Dark follows the visitor's system setting. */

:root {
  /* Color: surfaces */
  --color-paper: #EFEBE3;
  --color-surface: #FBF9F4;
  --color-panel: #E7E2D6;
  --color-notice: #E6EFEE;

  /* Color: text */
  --color-ink: #132033;
  --color-muted: #4A5570;
  --color-on-accent: #FFFFFF;

  /* Color: lines and accent */
  --color-rule: #D8D1C3;
  --color-field-border: #7A8190;
  --color-accent: #1F6F6A;
  --color-accent-strong: #134A46;
  --color-focus: #0B4F7A;

  /* Color: states */
  --color-error: #9B1C1C;
  --color-error-bg: #FBEDEA;
  --color-success: #14633A;
  --color-success-bg: #E8F3EC;

  /* Type: families (system fonts only, nothing downloaded) */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Type: scale (fluid between a 320 pixel phone and a 1440 pixel desktop) */
  --text-small: 0.9375rem;
  --text-body: 1.0625rem;
  --text-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem);
  --text-h3: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5625rem);
  --text-h2: clamp(1.75rem, 1.45rem + 1.3vw, 2.375rem);
  --text-h1: clamp(2.25rem, 1.65rem + 2.9vw, 4rem);
  --text-label: 0.75rem;

  /* Type: line heights and tracking */
  --leading-tight: 1.1;
  --leading-heading: 1.2;
  --leading-body: 1.65;
  --tracking-label: 0.14em;
  --tracking-h1: -0.01em;

  /* Spacing (4 pixel base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  /* Layout */
  --gutter: 1rem;
  --gutter-wide: 2rem;
  --width-page: 72.5rem;
  --width-read: 40rem;
  --width-form: 34rem;
  --tap-min: 2.75rem;

  /* Shape and depth */
  --radius-0: 0;
  --radius-1: 0.25rem;
  --radius-2: 0.5rem;
  --border-width: 1px;
  --border-strong: 2px;
  --shadow-card: 0 1px 0 var(--color-rule), 0 18px 40px rgba(19, 32, 51, 0.07);

  /* Focus */
  --focus-ring: 3px solid var(--color-focus);
  --focus-offset: 3px;

  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 360ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (min-width: 48rem) {
  :root { --gutter: 2rem; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: #0E1622;
    --color-surface: #151F2E;
    --color-panel: #1B2638;
    --color-notice: #16302E;
    --color-ink: #ECE8DF;
    --color-muted: #A9B3C6;
    --color-on-accent: #0E1622;
    --color-rule: #2A3647;
    --color-field-border: #7C879B;
    --color-accent: #6FCBC2;
    --color-accent-strong: #A5E3DC;
    --color-focus: #8FC9F2;
    --color-error: #FF9A8F;
    --color-error-bg: #2A1A1D;
    --color-success: #7FD6A0;
    --color-success-bg: #142A20;
    --shadow-card: 0 1px 0 var(--color-rule), 0 18px 40px rgba(0, 0, 0, 0.35);
  }
}

[data-theme="dark"] {
  --color-paper: #0E1622;
  --color-surface: #151F2E;
  --color-panel: #1B2638;
  --color-notice: #16302E;
  --color-ink: #ECE8DF;
  --color-muted: #A9B3C6;
  --color-on-accent: #0E1622;
  --color-rule: #2A3647;
  --color-field-border: #7C879B;
  --color-accent: #6FCBC2;
  --color-accent-strong: #A5E3DC;
  --color-focus: #8FC9F2;
  --color-error: #FF9A8F;
  --color-error-bg: #2A1A1D;
  --color-success: #7FD6A0;
  --color-success-bg: #142A20;
  --shadow-card: 0 1px 0 var(--color-rule), 0 18px 40px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}