/* Seenlark app tokens
 * Derived from the marketing system (/workspace/dse/deliverables/seenlark-x-fin/)
 * plus an app-density layer. Marketing names are kept where the value is shared.
 * App-only tokens are prefixed --app- or live under the "App density / charts / status" blocks.
 * Fonts: Inter, Newsreader 300 (page titles only), IBM Plex Mono (numbers and labels).
 * Accent is Seenlark cobalt #2b36d9 — the only accent.
 * Do not reuse ElevenLabs or fin.ai logos, photographs, or copy.
 */

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: Newsreader;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/newsreader:vf@latest/latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-mono@latest/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-mono@latest/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

:root {
  /* Surfaces — shared with marketing */
  --color-paper: #faf9f6;
  --color-white: #ffffff;
  --color-chalk: #f1eee9;
  --color-cream: #f4f3ec;
  --color-canvas: #e7e3db;
  --color-clay: #d3cec6;
  --color-linen: #dedbd6;

  /* Ink scale — marketing uses #000; the app uses a slightly lifted ink for long reading (inferred). */
  --color-ink: #0f1115;
  --color-ink-90: #191919;
  --color-ink-80: #313130;
  --color-ink-70: #4a4a49;
  --color-ink-60: #626260;
  --color-ink-50: #7b7b78;
  --color-ink-40: #949491;
  --color-ink-30: #acaca8;
  --color-ink-20: #c5c5c1;
  --color-ink-10: #ddddd8;
  --color-ink-05: #e9e9e5;

  /* Accent — Seenlark cobalt, the only accent */
  --accent: #2b36d9;
  --accent-hover: #222aa9;
  --accent-tint: #dddef2;
  --accent-tint-strong: #c0c2ee;
  --accent-soft: color-mix(in oklab, #2b36d9 8%, #faf9f6);
  --accent-on-paper-contrast: 7.58; /* AA small text, documented */

  /* Buttons (marketing) */
  --button-height: 2rem;          /* app is denser than marketing 2.5rem — inferred */
  --button-height-lg: 2.5rem;
  --button-padding-x: 0.75rem;
  --button-radius: 0.25rem;       /* 4px, locked */
  --button-primary-background: #111;
  --button-primary-foreground: #fff;
  --button-primary-hover-background: #0007cb;

  /* Borders */
  --color-border: oklab(0 0 0 / 0.1);
  --color-border-07: oklab(0.177637 0.00000810623 0.00000356138 / 0.07);
  --color-border-15: oklab(0 0 0 / 0.15);
  --color-border-20: oklab(0 0 0 / 0.2);
  --color-overlay: oklab(0.12 0 0 / 0.28);
  --color-overlay-soft: oklab(0.12 0 0 / 0.16);

  /* Type */
  --font-sans: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-serif: Newsreader, ui-serif, Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Radius */
  --radius-button: 4px;
  --radius-control: 4px;
  --radius-card: 8px;             /* app surfaces; inferred from ElevenLabs/Fingerprint, documented */
  --radius-pill: 999px;
  --radius-dialog: 12px;

  /* Space — 4px base, 8px rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* ---------- App density (app-only) ---------- */
  --app-sidebar-width: 232px;
  --app-sidebar-collapsed: 56px;
  --app-topbar-height: 56px;
  --app-content-pad-x: 40px;
  --app-content-pad-y: 32px;
  --app-content-max: 1280px;
  --app-row-height: 52px;         /* table body */
  --app-row-height-compact: 40px;
  --app-table-header-height: 36px;
  --app-kpi-number: 40px;
  --app-kpi-number-sm: 28px;
  --app-title-size: 36px;
  --app-control-height: 32px;
  --app-icon: 16px;
  --app-focus-ring: 2px;

  /* Shadow — almost none; one level for floating chrome */
  --shadow-float: 0 8px 24px oklab(0 0 0 / 0.08), 0 1px 2px oklab(0 0 0 / 0.06);
  --shadow-tooltip: 0 4px 16px oklab(0 0 0 / 0.1), 0 1px 2px oklab(0 0 0 / 0.06);
  --shadow-none: none;

  /* ---------- Chart palette ---------- */
  /* Four engines. Cobalt is ChatGPT (primary series). The other three are muted and distinct. */
  --engine-chatgpt: #2b36d9;
  --engine-chatgpt-fill: color-mix(in oklab, #2b36d9 12%, transparent);
  --engine-claude: #9a6b42;
  --engine-claude-fill: color-mix(in oklab, #9a6b42 12%, transparent);
  --engine-gemini: #2a7d6f;
  --engine-gemini-fill: color-mix(in oklab, #2a7d6f 12%, transparent);
  --engine-perplexity: #5b6480;
  --engine-perplexity-fill: color-mix(in oklab, #5b6480 12%, transparent);

  /* Competitors / extra series — neutrals, never a second accent */
  --series-ink: #0f1115;
  --series-2: #4a4a49;
  --series-3: #7b7b78;
  --series-4: #acaca8;
  --series-own: #2b36d9;

  --chart-grid: oklab(0 0 0 / 0.08);
  --chart-axis: #949491;
  --chart-line-width: 1.75px;
  --chart-fill-opacity: 0.12;
  --chart-dot: 6px;
  --chart-tooltip-radius: 6px;

  /* ---------- Status ---------- */
  --status-success: #246338;
  --status-success-bg: #e7f3ea;
  --status-success-border: color-mix(in oklab, #246338 22%, transparent);
  --status-warning: #8a6414;
  --status-warning-bg: #f7f0d8;
  --status-warning-border: color-mix(in oklab, #8a6414 22%, transparent);
  --status-danger: #b42318;
  --status-danger-bg: #f8e8e6;
  --status-danger-border: color-mix(in oklab, #b42318 22%, transparent);
  --status-info: #2b36d9;
  --status-info-bg: #dddef2;
  --status-neutral: #626260;
  --status-neutral-bg: #eeeae4;
  --status-running: #2b36d9;
  --status-partial: #8a6414;
  --status-completed: #246338;
  --status-failed: #b42318;

  /* Sentiment */
  --sent-pos: #246338;
  --sent-neu: #7b7b78;
  --sent-neg: #b42318;

  /* Delta */
  --delta-up: #246338;
  --delta-down: #b42318;
  --delta-flat: #7b7b78;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 120ms;
  --duration: 180ms;
  --duration-slow: 280ms;

  /* Z */
  --z-sidebar: 40;
  --z-topbar: 45;
  --z-dropdown: 60;
  --z-overlay: 80;
  --z-dialog: 90;
  --z-tooltip: 100;
  --z-toast: 110;

  /* Breakpoints (documented; used in app.css) */
  --bp-390: 390px;
  --bp-768: 768px;
  --bp-1024: 1024px;
  --bp-1440: 1440px;
}