/* SentrAI brand tokens. Two themes, Black and White, with a monochrome brand: the brand colour is the ink
   itself (black on White, white on Black). Violet, the logo's colour, is the optional accent.
   Values match the Risk Console (mvp/dashboard/sentrai_ui/theme.py, Mono accent).
   Risk colours (green / amber / red) are for risk bands and status only, never for branding.
   Use: <link rel="stylesheet" href="assets/brand/tokens.css">, then var(--sn-*). */
:root {
  /* Type: system fonts only, so everything renders offline. */
  --sn-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sn-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sn-weight-body: 400;
  --sn-weight-strong: 600;
  --sn-weight-display: 750;
  --sn-text-xs: .75rem;    /* 12px: timestamps, hashes */
  --sn-text-sm: .875rem;   /* 14px: labels, table cells */
  --sn-text-md: 1rem;      /* 16px: body */
  --sn-text-lg: 1.25rem;   /* 20px: card titles */
  --sn-text-xl: 1.75rem;   /* 28px: section titles */
  --sn-text-2xl: 2.5rem;   /* 40px: hero */
  --sn-leading: 1.6;
  --sn-leading-tight: 1.15;
  --sn-tracking-display: -.02em;

  /* Shape */
  --sn-radius-sm: 8px;
  --sn-radius: 14px;
  --sn-radius-pill: 999px;

  /* Fixed colours (same in both themes) */
  --sn-black-950: #0a0a0a;
  --sn-black-900: #141414;
  --sn-black-800: #1b1b1b;
  --sn-black-700: #262626;
  --sn-white: #ffffff;
  --sn-logo-indigo: #522bbe;
  --sn-logo-violet: #8057f0;
  --sn-logo-periwinkle: #697ef5;

  /* White theme (default) */
  --sn-bg: #fafafa;
  --sn-surface: #ffffff;
  --sn-surface-2: #f4f4f4;
  --sn-surface-3: #e8e8e8;
  --sn-ink: #0a0a0a;
  --sn-ink-soft: #404040;
  --sn-ink-muted: #666666;
  --sn-line: #dedede;
  --sn-line-soft: #ebebeb;
  --sn-brand: #0a0a0a;
  --sn-brand-2: #404040;
  --sn-brand-soft: #e8e8e8;
  --sn-brand-line: #b7b7b7;
  --sn-on-brand: #ffffff;
  --sn-accent: #7b54e6;
  --sn-accent-fill: #8057f0;
  --sn-safe: #15803d;
  --sn-warn: #a16207;
  --sn-danger: #dc2626;
  --sn-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .06);
  /* Depth: panels are set apart by shading, not outlines (a faint gradient, a soft shadow, a dotted page). */
  --sn-card: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
  --sn-card-shadow: 0 1px 2px rgba(10, 10, 10, .06), 0 8px 24px -10px rgba(10, 10, 10, .12);
  --sn-card-shadow-hover: 0 2px 4px rgba(10, 10, 10, .06), 0 16px 36px -12px rgba(10, 10, 10, .18);
  --sn-band: #f2f2f2;
  --sn-dots: rgba(0, 0, 0, .06);
  color-scheme: light;
}

/* Black theme: follows the OS unless a page forces White with data-theme="light". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sn-bg: #0a0a0a;
    --sn-surface: #141414;
    --sn-surface-2: #1b1b1b;
    --sn-surface-3: #262626;
    --sn-ink: #f5f5f5;
    --sn-ink-soft: #b3b3b3;
    --sn-ink-muted: #8c8c8c;
    --sn-line: #2e2e2e;
    --sn-line-soft: #212121;
    --sn-brand: #f5f5f5;
    --sn-brand-2: #b3b3b3;
    --sn-brand-soft: #262626;
    --sn-brand-line: #4c4c4c;
    --sn-on-brand: #0a0a0a;
    --sn-accent: #a88cf5;
    --sn-accent-fill: #8057f0;
    --sn-safe: #6fcf97;
    --sn-warn: #e8b34a;
    --sn-danger: #e5484d;
    --sn-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .4);
    --sn-card: linear-gradient(180deg, #1c1c1c 0%, #151515 100%);
    --sn-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .6), 0 12px 28px -14px rgba(0, 0, 0, .8);
    --sn-card-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 4px rgba(0, 0, 0, .6), 0 20px 40px -14px rgba(0, 0, 0, .9);
    --sn-band: #101010;
    --sn-dots: rgba(255, 255, 255, .045);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sn-bg: #0a0a0a;
  --sn-surface: #141414;
  --sn-surface-2: #1b1b1b;
  --sn-surface-3: #262626;
  --sn-ink: #f5f5f5;
  --sn-ink-soft: #b3b3b3;
  --sn-ink-muted: #8c8c8c;
  --sn-line: #2e2e2e;
  --sn-line-soft: #212121;
  --sn-brand: #f5f5f5;
  --sn-brand-2: #b3b3b3;
  --sn-brand-soft: #262626;
  --sn-brand-line: #4c4c4c;
  --sn-on-brand: #0a0a0a;
  --sn-accent: #a88cf5;
  --sn-accent-fill: #8057f0;
  --sn-safe: #6fcf97;
  --sn-warn: #e8b34a;
  --sn-danger: #e5484d;
  --sn-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .4);
  --sn-card: linear-gradient(180deg, #1c1c1c 0%, #151515 100%);
  --sn-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .6), 0 12px 28px -14px rgba(0, 0, 0, .8);
  --sn-card-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 4px rgba(0, 0, 0, .6), 0 20px 40px -14px rgba(0, 0, 0, .9);
  --sn-band: #101010;
  --sn-dots: rgba(255, 255, 255, .045);
  color-scheme: dark;
}