/* Generated from brand/tokens.css — a browser-consumable mirror of the
   canonical tokens (tokens.css uses Tailwind's @theme, which a plain page
   ignores). Both themes are carried: :root is light, [data-theme="dark"] is
   dark, and the prefers-color-scheme block follows the OS unless the
   document opts out with data-theme="light". Do not edit; edit tokens.css. */
:root {
  --font-sans: Gotham, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serafina: Serafina;
  --font-work-sans: Work Sans;
  --text-decorative-1: 36px;
  --text-decorative-1--line-height: 1.2;
  --text-header-1: 36px;
  --text-header-1--line-height: 1.2;
  --text-header-2: 26px;
  --text-header-2--line-height: 1.2;
  --text-header-3: 20px;
  --text-header-3--line-height: 1.2;
  --text-header-4: 16px;
  --text-header-4--line-height: 1.2;
  --text-body: 14px;
  --text-body--line-height: 1.4;
  --text-small: 12px;
  --text-small--line-height: 1.2;
  --color-copley-blue: #0b6eba;
  --color-copley-black: #191b1a;
  --color-copley-deep-blue: #06416f;
  --color-copley-dark-blue: #07497c;
  --color-copley-stroke-blue: #85b6dc;
  --color-copley-light-blue: #e6f0f8;
  --color-copley-light-blue-2: #e4f4ff;
  --color-copley-light-saber: #64d9e2;
  --color-copley-divider-blue: #cee2f1;
  --color-copley-divider-light-gray: #d2d2d2;
  --color-copley-divider-gray: #dddfe1;
  --color-copley-charcoal: #484848;
  --color-copley-slate: #70707b;
  --color-copley-quicksilver: #a2a2a2;
  --color-copley-storm: #d6d6d6;
  --color-copley-light-gray: #f7f7f9;
  --color-copley-archive-red: #dc2626;
  --color-copley-launch-green: #16a34a;
  --color-copley-shopify-green: #5F8E3E;
  --color-copley-bookmark-purple: #8b5cf6;
  --color-copley-fb-blue: #1877f2;
  --color-platform-tiktok: #000000;
  --color-platform-linkedin: #0a66c2;
  --color-frost: #efefef;
  --color-graph-muted-purple: #9f7aea;
  --color-graph-muted-teal: #38b2ac;
  --color-graph-muted-indigo: #667eea;
  --color-graph-muted-rose: #ed64a6;
  --color-graph-muted-orange: #ed8936;
  --color-graph-muted-cyan: #4fd1c5;
  --color-evergreen: #008071;
  --color-lagoon: #07ae98;
  --color-mint: #7FD6B1;
  --color-success-green: #D6FFEF;
  --color-alert-yellow: #b58a09;
  --color-radius: 0.625rem;
  --background-image-copley-gradient: linear-gradient(
    to top left,
    #2c8ad1 0%,
    #25618d 30%,
    #1e3b4f 60%,
    #1a2328 83%,
    #191b1a 94%
  );
  --color-canvas: var(--canvas);
  --color-surface: var(--surface);
  --color-surface-raised: var(--surface-raised);
  --color-surface-sunken: var(--surface-sunken);
  --color-surface-hover: var(--surface-hover);
  --color-surface-selected: var(--surface-selected);
  --color-ink: var(--ink);
  --color-ink-secondary: var(--ink-secondary);
  --color-ink-muted: var(--ink-muted);
  --color-ink-placeholder: var(--ink-placeholder);
  --color-ink-inverse: var(--ink-inverse);
  --color-ink-link: var(--ink-link);
  --color-ink-link-hover: var(--ink-link-hover);
  --color-line: var(--line);
  --color-line-strong: var(--line-strong);
  --color-line-subtle: var(--line-subtle);
  --color-action: var(--action);
  --color-status-success-fill: var(--status-success-fill);
  --color-status-success-ink: var(--status-success-ink);
  --color-status-success-dot: var(--status-success-dot);
  --color-status-danger-fill: var(--status-danger-fill);
  --color-status-danger-ink: var(--status-danger-ink);
  --color-status-danger-dot: var(--status-danger-dot);
  --color-status-warning-fill: var(--status-warning-fill);
  --color-status-warning-ink: var(--status-warning-ink);
  --color-status-warning-dot: var(--status-warning-dot);
  --color-status-saved-fill: var(--status-saved-fill);
  --color-status-saved-ink: var(--status-saved-ink);
  --color-status-saved-dot: var(--status-saved-dot);
  --color-note-bg: var(--note-bg);
  --color-note-border: var(--note-border);
  --color-note-ink: var(--note-ink);
  --radius-card: var(--color-radius);
  --shadow-card: var(--elev-card);
  --shadow-popover: var(--elev-popover);
  --shadow-dialog: var(--elev-dialog);
  --color-background: var(--surface);
  --color-foreground: var(--ink);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--surface);
  --color-secondary-foreground: var(--ink);
  --color-muted: var(--surface-sunken);
  --color-muted-foreground: var(--ink-muted);
  --color-accent: var(--surface-hover);
  --color-accent-foreground: var(--ink);
  --color-destructive: var(--color-copley-archive-red);
  --color-border: var(--line);
  --color-input: var(--line-strong);
  --color-ring: var(--action);
  --color-sidebar: var(--surface);
}

:root {
  color-scheme: light;
  --canvas: var(--color-copley-light-gray);
  --surface: #ffffff;
  --surface-raised: #ffffff;
  /* One step below the canvas, so sunken fills (chat bubbles, muted wells)
     stay visible on canvas-colored panes — light-gray-on-light-gray is how
     the user bubble vanished (#9428). */
  --surface-sunken: var(--color-frost);
  --surface-hover: var(--color-copley-light-gray);
  --surface-selected: var(--color-copley-light-blue);
  --ink: var(--color-copley-black);
  --ink-secondary: var(--color-copley-charcoal);
  --ink-muted: #6a6a75; /* copley-slate is 4.25:1 on the sunken well */
  --ink-placeholder: var(--color-copley-quicksilver);
  --ink-inverse: #ffffff;
  --ink-link: var(--color-copley-blue);
  --ink-link-hover: var(--color-copley-deep-blue);
  --line: var(--color-copley-divider-gray);
  --line-strong: var(--color-copley-storm);
  --line-subtle: var(--color-frost);
  --action: var(--color-copley-blue);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --status-success-fill: var(--color-success-green);
  --status-success-ink: var(--color-evergreen);
  --status-success-dot: var(--color-copley-launch-green);
  --status-danger-fill: color-mix(in srgb, var(--color-copley-archive-red) 10%, #ffffff);
  --status-danger-ink: var(--color-copley-archive-red);
  --status-danger-dot: var(--color-copley-archive-red);
  --status-warning-fill: color-mix(in srgb, var(--color-alert-yellow) 10%, #ffffff);
  --status-warning-ink: #7a5c00; /* alert-yellow itself is 3.5:1 on white */
  --status-warning-dot: var(--color-alert-yellow);
  --status-saved-fill: color-mix(in srgb, var(--color-copley-bookmark-purple) 10%, #ffffff);
  --status-saved-ink: #6d3fd6; /* bookmark-purple itself is 3.9:1 on white */
  --status-saved-dot: var(--color-copley-bookmark-purple);
  --note-bg: #fff8dc;
  --note-border: #efe1a8;
  --note-ink: #8a6d00;
  --elev-card: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --elev-popover: 0 4px 12px -2px rgb(0 0 0 / 0.10);
  --elev-dialog: 0 20px 40px -8px rgb(0 0 0 / 0.16);
}

[data-theme='dark'] {
  color-scheme: dark;
  --night-0: #121413;
  --night-1: var(--color-copley-black);
  --night-2: #222524;
  --canvas: var(--night-0);
  --surface: var(--night-1);
  --surface-raised: var(--night-2);
  --surface-sunken: #0e100f;
  --surface-hover: #242726;
  --surface-selected: color-mix(in srgb, var(--color-copley-blue) 18%, var(--night-1));
  --ink: #f2f3f2;
  --ink-secondary: #b9bcba;
  --ink-muted: #8f9391;
  --ink-placeholder: #636765;
  --ink-inverse: #ffffff;
  --ink-link: var(--color-copley-stroke-blue); /* copley-blue is 2.9:1 on night-1 */
  --ink-link-hover: var(--color-copley-light-blue-2);
  --line: #2a2d2c;
  --line-strong: #363a38;
  --line-subtle: #202322;
  --action: var(--color-copley-blue);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --status-success-fill: color-mix(in srgb, var(--color-copley-launch-green) 16%, var(--night-1));
  --status-success-ink: var(--color-mint);
  --status-danger-fill: color-mix(in srgb, var(--color-copley-archive-red) 16%, var(--night-1));
  --status-danger-ink: #f4948e;
  --status-warning-fill: color-mix(in srgb, var(--color-alert-yellow) 16%, var(--night-1));
  --status-warning-ink: #e6c15a;
  --status-saved-fill: color-mix(in srgb, var(--color-copley-bookmark-purple) 16%, var(--night-1));
  --status-saved-ink: #c4b0fb;
  --note-bg: #2a2716;
  --note-border: #4a4322;
  --note-ink: #d9bd5c;
  --elev-card: 0 1px 2px 0 rgb(0 0 0 / 0.40);
  --elev-popover: 0 4px 12px -2px rgb(0 0 0 / 0.50);
  --elev-dialog: 0 20px 40px -8px rgb(0 0 0 / 0.60);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --night-0: #121413;
    --night-1: var(--color-copley-black);
    --night-2: #222524;
    --canvas: var(--night-0);
    --surface: var(--night-1);
    --surface-raised: var(--night-2);
    --surface-sunken: #0e100f;
    --surface-hover: #242726;
    --surface-selected: color-mix(in srgb, var(--color-copley-blue) 18%, var(--night-1));
    --ink: #f2f3f2;
    --ink-secondary: #b9bcba;
    --ink-muted: #8f9391;
    --ink-placeholder: #636765;
    --ink-inverse: #ffffff;
    --ink-link: var(--color-copley-stroke-blue);
    --ink-link-hover: var(--color-copley-light-blue-2);
    --line: #2a2d2c;
    --line-strong: #363a38;
    --line-subtle: #202322;
    --action: var(--color-copley-blue);
    --primary: oklch(0.985 0 0);
    --primary-foreground: oklch(0.21 0.006 285.885);
    --status-success-fill: color-mix(in srgb, var(--color-copley-launch-green) 16%, var(--night-1));
    --status-success-ink: var(--color-mint);
    --status-danger-fill: color-mix(in srgb, var(--color-copley-archive-red) 16%, var(--night-1));
    --status-danger-ink: #f4948e;
    --status-warning-fill: color-mix(in srgb, var(--color-alert-yellow) 16%, var(--night-1));
    --status-warning-ink: #e6c15a;
    --status-saved-fill: color-mix(in srgb, var(--color-copley-bookmark-purple) 16%, var(--night-1));
    --status-saved-ink: #c4b0fb;
    --note-bg: #2a2716;
    --note-border: #4a4322;
    --note-ink: #d9bd5c;
    --elev-card: 0 1px 2px 0 rgb(0 0 0 / 0.40);
    --elev-popover: 0 4px 12px -2px rgb(0 0 0 / 0.50);
    --elev-dialog: 0 20px 40px -8px rgb(0 0 0 / 0.60);
  }
}