/* ============================================================
   Lux Design System — tokens.css
   The single source of colour, type and depth for the system.
   Load this BEFORE lux.css; every other stylesheet in the
   package resolves through these custom properties.

   Two themes ship here: the light "lux.do" default, and a dark
   theme whose values match the ads-console palette so both
   products can run off one file. Themes are selected by the OS
   (prefers-color-scheme) and can be pinned per document with
   <html data-theme="light"> or <html data-theme="dark">.

   Naming mirrors ads-console's --ac-* scale:
     --lux-bg / --lux-surface / --lux-bg-3 / --lux-bg-4  ~ --ac-bg..--ac-bg-4
     --lux-line / --lux-line-soft                        ~ --ac-line / --ac-line-soft
     --lux-ink / --lux-ink-2 / --lux-ink-4 / --lux-ink-6 ~ --ac-ink..--ac-ink-4
   ============================================================ */

:root {
  /* Native controls, scrollbars and form popups follow the theme. */
  color-scheme: light;

  /* ---------- Type ---------- */
  --lux-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --lux-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --lux-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Surfaces ---------- */
  --lux-bg: #fafafa; /* page */
  --lux-surface: #ffffff; /* cards, inputs, sidebar, modals */
  --lux-bg-3: #f1f1f1; /* hover fill on page bg; meter tracks */
  --lux-bg-4: #f5f5f5; /* selected / pressed fill */
  --lux-bg-hover: #fafafa; /* row hover on a white surface */

  /* Theme-independent surfaces. These do NOT flip in dark mode:
     --lux-canvas is a rendered customer page (heatmap preview),
     --lux-stage is the replay letterbox behind it. */
  --lux-canvas: #ffffff;
  --lux-stage: #0a0a0a;

  /* ---------- Lines ---------- */
  --lux-line: #e2e2e2; /* input / element outlines */
  --lux-line-soft: #ececec; /* card + table hairlines */
  --lux-divider: #f1f1f1; /* row dividers, card internals */
  --lux-line-faint: #f5f5f5; /* table cell rules */
  --lux-line-mid: #cfcfcf; /* dashed placeholders, disabled */
  --lux-line-strong: #c8c8c8; /* ghost button border */

  /* Select caret, drawn at the current theme's muted ink. */
  --lux-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a7a7a' stroke-width='1.2'/%3E%3C/svg%3E");

  /* ---------- Ink ---------- */
  --lux-ink: #0a0a0a; /* primary text, active nav, headings */
  --lux-ink-2: #3a3a3a; /* secondary body, mono data */
  --lux-lede: #4a4a4a; /* subtitle / lede */
  --lux-ink-3: #5a5a5a; /* tertiary */
  --lux-ink-4: #7a7a7a; /* muted labels, table headers */
  --lux-ink-5: #8a8a8a;
  --lux-ink-6: #9a9a9a; /* faint labels, placeholders */
  --lux-ink-7: #b0b0b0; /* faintest */
  --lux-ink-inv: #ffffff; /* text on an inked fill */

  /* ---------- Accent ---------- */
  --lux-accent: #d8613c;
  --lux-accent-ink: #9a4a22; /* accent used as body text */
  --lux-accent-line: #e6c4b8;
  --lux-accent-bg: #fdf6f3;
  --lux-accent-tint: rgba(216, 97, 60, 0.15);

  /* ---------- Semantic ---------- */
  --lux-ok: #2a6a3a;
  --lux-ok-line: #bcd6c2;
  --lux-ok-tint: rgba(42, 106, 58, 0.35);
  --lux-warn: #b07a2a;
  --lux-warn-tint: rgba(176, 122, 42, 0.4);
  --lux-err: #b03a2a;
  --lux-err-tint: rgba(176, 58, 42, 0.45);
  --lux-err-bg: rgba(176, 58, 42, 0.06);
  --lux-info: #3a6aaa;
  --lux-info-line: #bccde0;
  --lux-alt: #8a3a8a; /* fourth category (error-friction) */
  --lux-alt-tint: rgba(138, 58, 138, 0.4);

  /* Heatmap ramp — reads on both themes, so it does not flip. */
  --lux-heat-warm: rgba(214, 158, 46, 0.85);
  --lux-heat-hot: rgba(208, 48, 48, 0.85);

  /* ---------- Code block ---------- */
  --lux-code-bg: #0a0a0a;
  --lux-code-ink: #e8e8e8;
  --lux-code-key: #c8c8c8;
  --lux-code-str: #9bc2d6;
  --lux-code-val: #d8b46a;
  --lux-code-num: #e8a878;
  --lux-code-line: rgba(255, 255, 255, 0.22); /* chrome on the code block */
  --lux-code-ink-hi: #ffffff;

  /* ---------- Skeleton shimmer ---------- */
  --lux-skeleton: #ececec;
  --lux-skeleton-hi: #f5f5f5;

  /* ---------- Depth & glass ---------- */
  --lux-glass: rgba(255, 255, 255, 0.6); /* sidebar */
  --lux-glass-2: rgba(255, 255, 255, 0.86); /* overlay panels */
  --lux-veil: rgba(250, 250, 250, 0.7);
  --lux-bg-fade: rgba(250, 250, 250, 0); /* transparent end of --lux-bg */
  --lux-scrim: rgba(15, 15, 15, 0.38); /* off-canvas scrim */
  --lux-scrim-modal: rgba(15, 15, 15, 0.42);
  --lux-shadow-modal: 0 24px 60px -28px rgba(15, 15, 15, 0.45);
  --lux-shadow-panel: 0 0 60px rgba(15, 15, 15, 0.25);
}

/* ============================================================
   Dark theme. Values match ads-console's --ac-* palette.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --lux-bg: #0c0c0c;
    --lux-surface: #131313;
    --lux-bg-3: #1a1a1a;
    --lux-bg-4: #202020;
    --lux-bg-hover: #1a1a1a;

    --lux-line: #232323;
    --lux-line-soft: #1c1c1c;
    --lux-divider: #1c1c1c;
    --lux-line-faint: #181818;
    --lux-line-mid: #333333;
    --lux-line-strong: #3d3d3d;
    --lux-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238f8f8f' stroke-width='1.2'/%3E%3C/svg%3E");

    --lux-ink: #ececec;
    --lux-ink-2: #bdbdbd;
    --lux-lede: #b0b0b0;
    --lux-ink-3: #a3a3a3;
    --lux-ink-4: #8f8f8f;
    --lux-ink-5: #7d7d7d;
    --lux-ink-6: #6b6b6b;
    --lux-ink-7: #5a5a5a;
    --lux-ink-inv: #0c0c0c;

    --lux-accent: #d8613c;
    --lux-accent-ink: #e8a06a;
    --lux-accent-line: #4a2a1e;
    --lux-accent-bg: #1d1411;
    --lux-accent-tint: rgba(216, 97, 60, 0.18);

    --lux-ok: #58b878;
    --lux-ok-line: #234d31;
    --lux-ok-tint: rgba(88, 184, 120, 0.35);
    --lux-warn: #d89b4a;
    --lux-warn-tint: rgba(216, 155, 74, 0.4);
    --lux-err: #e0604f;
    --lux-err-tint: rgba(224, 96, 79, 0.45);
    --lux-err-bg: rgba(224, 96, 79, 0.08);
    --lux-info: #6a9bd8;
    --lux-info-line: #24374d;
    --lux-alt: #c87ac8;
    --lux-alt-tint: rgba(200, 122, 200, 0.4);

    --lux-code-bg: #080808;
    --lux-skeleton: #1a1a1a;
    --lux-skeleton-hi: #222222;

    --lux-glass: rgba(19, 19, 19, 0.6);
    --lux-glass-2: rgba(19, 19, 19, 0.86);
    --lux-veil: rgba(12, 12, 12, 0.7);
    --lux-bg-fade: rgba(12, 12, 12, 0);
    --lux-scrim: rgba(0, 0, 0, 0.55);
    --lux-scrim-modal: rgba(0, 0, 0, 0.6);
    --lux-shadow-modal: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
    --lux-shadow-panel: 0 0 60px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --lux-bg: #0c0c0c;
  --lux-surface: #131313;
  --lux-bg-3: #1a1a1a;
  --lux-bg-4: #202020;
  --lux-bg-hover: #1a1a1a;

  --lux-line: #232323;
  --lux-line-soft: #1c1c1c;
  --lux-divider: #1c1c1c;
  --lux-line-faint: #181818;
  --lux-line-mid: #333333;
  --lux-line-strong: #3d3d3d;
  --lux-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238f8f8f' stroke-width='1.2'/%3E%3C/svg%3E");

  --lux-ink: #ececec;
  --lux-ink-2: #bdbdbd;
  --lux-lede: #b0b0b0;
  --lux-ink-3: #a3a3a3;
  --lux-ink-4: #8f8f8f;
  --lux-ink-5: #7d7d7d;
  --lux-ink-6: #6b6b6b;
  --lux-ink-7: #5a5a5a;
  --lux-ink-inv: #0c0c0c;

  --lux-accent: #d8613c;
  --lux-accent-ink: #e8a06a;
  --lux-accent-line: #4a2a1e;
  --lux-accent-bg: #1d1411;
  --lux-accent-tint: rgba(216, 97, 60, 0.18);

  --lux-ok: #58b878;
  --lux-ok-line: #234d31;
  --lux-ok-tint: rgba(88, 184, 120, 0.35);
  --lux-warn: #d89b4a;
  --lux-warn-tint: rgba(216, 155, 74, 0.4);
  --lux-err: #e0604f;
  --lux-err-tint: rgba(224, 96, 79, 0.45);
  --lux-err-bg: rgba(224, 96, 79, 0.08);
  --lux-info: #6a9bd8;
  --lux-info-line: #24374d;
  --lux-alt: #c87ac8;
  --lux-alt-tint: rgba(200, 122, 200, 0.4);

  --lux-code-bg: #080808;
  --lux-skeleton: #1a1a1a;
  --lux-skeleton-hi: #222222;

  --lux-glass: rgba(19, 19, 19, 0.6);
  --lux-glass-2: rgba(19, 19, 19, 0.86);
  --lux-veil: rgba(12, 12, 12, 0.7);
  --lux-bg-fade: rgba(12, 12, 12, 0);
  --lux-scrim: rgba(0, 0, 0, 0.55);
  --lux-scrim-modal: rgba(0, 0, 0, 0.6);
  --lux-shadow-modal: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
  --lux-shadow-panel: 0 0 60px rgba(0, 0, 0, 0.5);
}

/* ads-console compatibility shim.
   Lets ads-console delete its own :root block and keep every
   existing var(--ac-*) call site working. */
:root {
  --ac-bg: var(--lux-bg);
  --ac-bg-2: var(--lux-surface);
  --ac-bg-3: var(--lux-bg-3);
  --ac-bg-4: var(--lux-bg-4);
  --ac-line: var(--lux-line);
  --ac-line-soft: var(--lux-line-soft);
  --ac-ink: var(--lux-ink);
  --ac-ink-2: var(--lux-ink-2);
  --ac-ink-3: var(--lux-ink-4);
  --ac-ink-4: var(--lux-ink-6);
  --ac-accent: var(--lux-accent);
  --ac-ok: var(--lux-ok);
  --ac-warn: var(--lux-warn);
  --ac-err: var(--lux-err);
  --ac-info: var(--lux-info);
  --ac-sans: var(--lux-sans);
  --ac-serif: var(--lux-serif);
  --ac-mono: var(--lux-mono);
}