/*
 * VEDA AI design tokens (v0.1.0)
 *
 * Semantic custom properties only. This file never styles elements, so it can
 * be loaded alone and mapped onto an existing component library.
 *
 * Theme contract:
 *   - Implicit: follows `prefers-color-scheme`.
 *   - Explicit: `<html data-veda-theme="light|dark">` overrides the OS setting.
 *   Both themes expose the same token names.
 *
 * The two dark blocks below must stay identical (checked by tests/tokens.test.mjs).
 */

:root {
  color-scheme: light;

  /* Color: text and surfaces */
  /* Palette follows the existing VEDA AI web UI: ground, ink, nila (indigo), svara (red) */
  --veda-color-text: #1b1e2e;
  --veda-color-text-muted: #4a5263;
  --veda-color-bg: #f7f6f3;
  --veda-color-surface: #fffefb;
  --veda-color-surface-subtle: #efede8;
  --veda-color-border: #767c88;
  --veda-color-border-subtle: #d8d5cd;

  /* Color: links and actions */
  --veda-color-link: #2f4b7c;
  --veda-color-link-visited: #5f3b8c;
  --veda-color-action: #2f4b7c;
  --veda-color-action-hover: #233a61;
  --veda-color-on-action: #ffffff;
  --veda-color-brand: #b3402e;

  /* Color: status (always paired with text, never color alone) */
  --veda-color-info: #2f4b7c;
  --veda-color-info-bg: #e8eff9;
  --veda-color-success: #1e6435;
  --veda-color-success-bg: #e6f2ea;
  --veda-color-warning: #7a4f00;
  --veda-color-warning-bg: #fbf0d6;
  --veda-color-danger: #a8231a;
  --veda-color-danger-bg: #fbe9e7;

  /* Color: AI-generated content, search hits, focus */
  --veda-color-ai: #5a3a8a;
  --veda-color-ai-bg: #f1ecf8;
  --veda-color-mark-bg: #fbe7a1;
  --veda-color-mark-text: #1b1e2e;
  --veda-color-focus: #b4460a;

  /* Font families: system fonts only; no network font is required */
  --veda-font-sans: system-ui, -apple-system, "Segoe UI", "Noto Sans",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI",
    "Yu Gothic", Meiryo, "Noto Sans CJK JP", "DejaVu Sans", sans-serif;
  --veda-font-serif: "Noto Serif", "Gentium Plus", "Charis SIL", Georgia,
    "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Noto Serif CJK JP",
    "DejaVu Serif", serif;
  /* Transliteration: fonts with complete Latin Extended Additional coverage first */
  --veda-font-translit: "Noto Sans", "Gentium Plus", "Charis SIL", "Segoe UI",
    "DejaVu Sans", "Arial Unicode MS", var(--veda-font-sans);
  --veda-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono",
    "Noto Sans Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;

  /* Font sizes (rem, so the user's browser setting is respected) */
  --veda-font-size-sm: 0.875rem; /* 14px: minimum for labels and notes */
  --veda-font-size-md: 1rem; /* 16px: body text */
  --veda-font-size-lg: 1.125rem;
  --veda-font-size-xl: 1.25rem;
  --veda-font-size-2xl: 1.5rem;
  --veda-font-size-3xl: 1.75rem; /* largest heading on wide screens */

  /* Line height and letter spacing */
  --veda-line-height-ja: 1.8;
  --veda-line-height-latn: 1.6;
  --veda-line-height-translit: 1.75;
  --veda-line-height-heading: 1.4;
  --veda-line-height-ui: 1.4;
  --veda-letter-spacing-ja: 0.02em;

  /* Spacing scale */
  --veda-space-1: 0.25rem;
  --veda-space-2: 0.5rem;
  --veda-space-3: 0.75rem;
  --veda-space-4: 1rem;
  --veda-space-5: 1.5rem;
  --veda-space-6: 2rem;
  --veda-space-7: 3rem;

  /* Widths */
  --veda-measure-ja: 40em; /* about 40 full-width characters */
  --veda-measure-latn: 68ch;
  --veda-content-max: 72rem;
  --veda-content-wide: 96rem;

  /* Borders, radius, shadow */
  --veda-border-width: 1px;
  --veda-border-width-strong: 2px;
  --veda-radius-sm: 0.25rem;
  --veda-radius-md: 0.375rem;
  --veda-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.08);

  /* Focus and targets */
  --veda-focus-width: 3px;
  --veda-focus-offset: 2px;
  --veda-target-min: 2.75rem; /* 44px */

  /* Motion and stacking */
  --veda-duration: 150ms;
  --veda-z-header: 100;
  --veda-z-overlay: 200;
  --veda-z-toast: 300;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-veda-theme="light"]) {
    color-scheme: dark;
    --veda-color-text: #ece9e2;
    --veda-color-text-muted: #b9bdc6;
    --veda-color-bg: #14151c;
    --veda-color-surface: #1c1e28;
    --veda-color-surface-subtle: #262935;
    --veda-color-border: #838a98;
    --veda-color-border-subtle: #3a3e4c;
    --veda-color-link: #9db6e0;
    --veda-color-link-visited: #cbaef2;
    --veda-color-action: #9db6e0;
    --veda-color-action-hover: #bdd0ee;
    --veda-color-on-action: #11131b;
    --veda-color-brand: #e0765f;
    --veda-color-info: #9db6e0;
    --veda-color-info-bg: #1a2638;
    --veda-color-success: #86d39f;
    --veda-color-success-bg: #15281c;
    --veda-color-warning: #efc262;
    --veda-color-warning-bg: #2d2412;
    --veda-color-danger: #ff9d92;
    --veda-color-danger-bg: #331b19;
    --veda-color-ai: #cdb6f3;
    --veda-color-ai-bg: #251e33;
    --veda-color-mark-bg: #6b5512;
    --veda-color-mark-text: #fdf8e8;
    --veda-color-focus: #ffb36b;
    --veda-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  }
}

:root[data-veda-theme="dark"] {
  color-scheme: dark;
  --veda-color-text: #ece9e2;
  --veda-color-text-muted: #b9bdc6;
  --veda-color-bg: #14151c;
  --veda-color-surface: #1c1e28;
  --veda-color-surface-subtle: #262935;
  --veda-color-border: #838a98;
  --veda-color-border-subtle: #3a3e4c;
  --veda-color-link: #9db6e0;
  --veda-color-link-visited: #cbaef2;
  --veda-color-action: #9db6e0;
  --veda-color-action-hover: #bdd0ee;
  --veda-color-on-action: #11131b;
  --veda-color-brand: #e0765f;
  --veda-color-info: #9db6e0;
  --veda-color-info-bg: #1a2638;
  --veda-color-success: #86d39f;
  --veda-color-success-bg: #15281c;
  --veda-color-warning: #efc262;
  --veda-color-warning-bg: #2d2412;
  --veda-color-danger: #ff9d92;
  --veda-color-danger-bg: #331b19;
  --veda-color-ai: #cdb6f3;
  --veda-color-ai-bg: #251e33;
  --veda-color-mark-bg: #6b5512;
  --veda-color-mark-text: #fdf8e8;
  --veda-color-focus: #ffb36b;
  --veda-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --veda-duration: 0ms;
  }
}