/* Photios AI Design System v1.0 — semantic tokens as CSS custom properties.
 *
 * Generated from tokens.json. Use these, not hex values.
 * Every text colour here has been measured against the surface it sits on;
 * --color-decorative is the one grey that must never carry text.
 */

:root {
  /* Surfaces */
  --color-ground: #fafaf9;
  --color-surface: #ffffff;
  --color-sunken: #f5f5f4;
  --color-line: #e7e5e4;
  --color-line-strong: #d6d3d1;

  /* Text — the lightest permitted on text is --color-text-muted (4.9:1) */
  --color-ink: #1c1917;           /* 17.5:1 on white */
  --color-text-body: #44403c;     /* 10.3:1 */
  --color-text-muted: #766f69;    /*  4.9:1 */
  --color-icon: #8d8681;          /*  3.6:1 — icons and marks only */
  --color-decorative: #a8a29e;    /*  2.5:1 — never text */

  /* Action */
  --color-action: #2563eb;        /* 5.17:1 on white */
  --color-action-hover: #1d4ed8;
  --color-action-selected: #dbeafe;
  --color-action-tint: #eff6ff;

  /* Status — always paired with a word, never colour alone */
  --color-ok: #2f7256;
  --color-ok-bg: #edf7f2;
  --color-warn: #906a1d;
  --color-warn-bg: #fdf4e7;
  --color-critical: #b23f3f;
  --color-critical-bg: #fdeeee;
  --color-nodata: #766f69;        /* render on a 45deg hatch — not zero */

  /* Charts — maximum five series; see tokens.json for why brand blue is excluded */
  --chart-series-1: #0369a1;
  --chart-series-2: #065f46;
  --chart-series-3: #c2410c;
  --chart-series-4: #7e22ce;
  --chart-series-5: #334155;

  /* Type */
  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  --text-display: 2.5rem;
  --text-title: 1.6rem;
  --text-section: 1.1rem;
  --text-body: 0.95rem;
  --text-ui: 0.875rem;
  --text-meta: 0.8rem;
  --text-caption: 0.75rem;
  --text-label: 0.7rem;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Shape */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* Depth */
  --elevation-1: 0 2px 8px rgb(28 25 23 / 5%);
  --elevation-2: 0 10px 30px rgb(28 25 23 / 12%);
  --elevation-3: 0 24px 60px rgb(28 25 23 / 22%);
  --focus-ring: 0 0 0 2px var(--color-action);

  /* Motion */
  --motion-instant: 120ms;
  --motion-quick: 150ms;
  --motion-panel: 300ms;
  --motion-ease-panel: cubic-bezier(0.4, 0, 0.2, 1);

  /* Targets — WCAG 2.2 SC 2.5.8 */
  --target-minimum: 24px;
  --target-floor: 44px;
}

/* Indic scripts need more room than Latin at the same role. */
:lang(hi), :lang(mr), :lang(gu), :lang(ta), :lang(kn), :lang(ml), :lang(pa) {
  line-height: 1.8;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: 0ms;
    --motion-quick: 0ms;
    --motion-panel: 0ms;
  }
}