/* Polaris Tap — Obsidian design tokens (ADR-0006). The only source of visual values:
   every other stylesheet uses these custom properties, never a hex code, pixel size or
   font name of its own.

   Themes: dark is the default. <html data-theme="dark|light"> picks one outright (the
   admin's toggle, a card owner's chosen card theme); with no data-theme the page follows
   the OS, dark unless it asks for light. tests/unit/design-tokens.test.ts reads this file
   and checks every text and control pair for WCAG AA in both themes. */

:root {
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 32px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --tracking-tight: -0.01em;
  --tracking-wordmark: 0.22em;
  --tracking-label: 0.16em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-sm: 8px;
  --radius-input: 12px;
  --radius-button: 15px;
  --radius-tile: 15px;
  --radius-avatar: 24px;
  --radius-pill: 999px;

  --border-w: 1px;
  --focus-w: 2px;
  --input-h: 46px;
  --button-h: 54px;
  --button-h-sm: 38px;
  --touch-min: 44px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --shield-sm: 22px;
  --shield-lg: 64px;
  --swatch-size: 32px;
  --band-h: 150px;
  --avatar-size: 104px;
  --avatar-overlap: 52px;
  --avatar-sm: 36px;
  --sidebar-w: 240px;
  --mobile-max: 440px;
  --form-max: 560px;
  --content-max: 1180px;

  --motion-fast: 120ms;
  --motion-base: 200ms;
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --z-sticky: 10;
  --z-skip: 50;

  --shadow-raised: 0 1px 0 rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .18);
  --shadow-sticky: 0 -12px 24px rgba(0, 0, 0, .25);

  /* The eight button colors a card owner can pick (ADR-0007). They match ACCENT_SWATCHES in
     src/cards/accent-color.ts; the token test fails if they drift. */
  --swatch-forest: #3f7d3a;
  --swatch-navy: #1f4e8c;
  --swatch-crimson: #a4262c;
  --swatch-plum: #6b3fa0;
  --swatch-teal: #0f766e;
  --swatch-amber: #b45309;
  --swatch-graphite: #2b2f2c;
  --swatch-royal: #3b4cca;
}

/* Dark (default). */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0f0e;
  --surface: #161917;
  --inset: #121513;
  --band: #121513;
  --border: #232825;
  --border-strong: #2a302c;
  --control-border: #69716b;
  --divider: #1e2320;
  --text: #f2f3f1;
  --text-2: #a3aaa5;
  --text-3: #7c857f;
  --brand: #3f7d3a;
  --brand-hover: #356b31;
  --on-brand: #ffffff;
  --brand-text: #7cc873;
  --shield: #5fae56;
  --focus: #7cc873;
  --ok-text: #7cc873;
  --ok-soft: #17241a;
  --warn-text: #e8b45a;
  --warn-soft: #2a2214;
  --danger: #a4262c;
  --danger-text: #f28b82;
  --danger-soft: #2b1616;
  --on-danger: #ffffff;
  --neutral-soft: #1e2320;
  --sticky-bg: rgba(13, 15, 14, .94);
  /* A card's accent, before its owner's stylesheet (/c/<slug>/theme.css) sets its own. */
  --accent: #3f7d3a;
  --on-accent: #ffffff;
  --accent-text: #7cc873;
  --accent-edge: #3f7d3a;
}

:root[data-theme="light"] {
  color-scheme: light;
  --page: #f6f7f5;
  --surface: #ffffff;
  --inset: #f0f2ef;
  --band: #e9ece8;
  --border: #dde2de;
  --border-strong: #c9d0cb;
  --control-border: #7d8780;
  --divider: #e6eae7;
  --text: #101311;
  --text-2: #56605a;
  --text-3: #5f6963;
  --brand: #3f7d3a;
  --brand-hover: #356b31;
  --on-brand: #ffffff;
  --brand-text: #2e6b2a;
  --shield: #3f7d3a;
  --focus: #2e6b2a;
  --ok-text: #2e6b2a;
  --ok-soft: #e3f0e1;
  --warn-text: #7f4d00;
  --warn-soft: #fbf0dc;
  --danger: #a4262c;
  --danger-text: #a4262c;
  --danger-soft: #fbe7e6;
  --on-danger: #ffffff;
  --neutral-soft: #eceeeb;
  --sticky-bg: rgba(246, 247, 245, .94);
  --accent: #3f7d3a;
  --on-accent: #ffffff;
  --accent-text: #2e6b2a;
  --accent-edge: #3f7d3a;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --page: #f6f7f5;
    --surface: #ffffff;
    --inset: #f0f2ef;
    --band: #e9ece8;
    --border: #dde2de;
    --border-strong: #c9d0cb;
    --control-border: #7d8780;
    --divider: #e6eae7;
    --text: #101311;
    --text-2: #56605a;
    --text-3: #5f6963;
    --brand: #3f7d3a;
    --brand-hover: #356b31;
    --on-brand: #ffffff;
    --brand-text: #2e6b2a;
    --shield: #3f7d3a;
    --focus: #2e6b2a;
    --ok-text: #2e6b2a;
    --ok-soft: #e3f0e1;
    --warn-text: #7f4d00;
    --warn-soft: #fbf0dc;
    --danger: #a4262c;
    --danger-text: #a4262c;
    --danger-soft: #fbe7e6;
    --on-danger: #ffffff;
    --neutral-soft: #eceeeb;
    --sticky-bg: rgba(246, 247, 245, .94);
    --accent: #3f7d3a;
    --on-accent: #ffffff;
    --accent-text: #2e6b2a;
    --accent-edge: #3f7d3a;
  }
}