/*
 * Feder design tokens, v1.0 (2026-09-26)
 * Mirrors tokens/feder-tokens.json. Two layers:
 *   1. Primitive tokens (--feder-*): the fixed palette and scales.
 *   2. Theme aliases (--fd-*): what components should consume. Switch with
 *      data-theme="dark" | "light" on any ancestor. Dark is the default.
 *
 * Usage rules that the values alone cannot enforce:
 *   - Emerald (--feder-emerald, --feder-emerald-deep) is identity only: the
 *     logo mark. Never a status, action, link, selection or chart color.
 *     In product UI, dashboards and alert emails the logo is monochrome.
 *   - Status colors are text/icon colors on a neutral badge background.
 *     Always show the label AND the icon (icons/status-*.svg) with the color.
 *   - Amber appears in product only inside the warning treatment.
 *   - Primary actions are neutral (off-white on dark, navy on light).
 *   - Links and focus rings are neutral plus underline/outline, never blue.
 *
 * Fonts are not loaded here. See README.md > "Font loading".
 */

:root {
  /* Identity */
  --feder-emerald: #10B981;       /* mark on dark */
  --feder-emerald-deep: #047857;  /* mark on light */
  --feder-amber: #F59E0B;         /* brand accent; product use only as warning */

  /* Neutrals */
  --feder-navy: #0F172A;
  --feder-surface-dark: #172033;
  --feder-rule-dark: #334155;     /* decorative only */
  --feder-off-white: #F8FAFC;
  --feder-white: #FFFFFF;
  --feder-gray: #94A3B8;
  --feder-text-secondary-light: #475569;
  --feder-rule-light: #CBD5E1;    /* decorative only */
  --feder-outline: #64748B;       /* functional control boundary */

  /* Status: fixed meaning, paired with label + icon */
  --feder-healthy-dark: #34D399;
  --feder-healthy-light: #15803D;
  --feder-warning-dark: #FBBF24;
  --feder-warning-light: #92400E;
  --feder-critical-dark: #F87171;
  --feder-critical-light: #B91C1C;
  --feder-info-dark: #60A5FA;
  --feder-info-light: #1D4ED8;
  --feder-inactive-dark: #94A3B8;
  --feder-inactive-light: #475569;

  /* Type */
  --feder-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --feder-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* size / line-height / weight / tracking */
  --feder-hero: 600 56px/64px var(--feder-font-sans);
  --feder-hero-tracking: -0.02em;
  --feder-section: 600 32px/40px var(--feder-font-sans);
  --feder-section-tracking: -0.02em;
  --feder-panel: 600 20px/28px var(--feder-font-sans);
  --feder-lead: 400 20px/28px var(--feder-font-sans);
  --feder-body: 400 16px/24px var(--feder-font-sans);
  --feder-control: 500 16px/24px var(--feder-font-sans);
  --feder-eyebrow: 500 12px/16px var(--feder-font-sans);
  --feder-eyebrow-tracking: 0.06em;
  --feder-data: 400 14px/20px var(--feder-font-mono);
  --feder-meta: 500 12px/16px var(--feder-font-mono);

  /* Space: 4px base, 8px rhythm */
  --feder-space-1: 4px;
  --feder-space-2: 8px;
  --feder-space-3: 12px;
  --feder-space-4: 16px;
  --feder-space-6: 24px;
  --feder-space-8: 32px;
  --feder-space-12: 48px;
  --feder-space-16: 64px;
  --feder-space-24: 96px;

  /* Shape, sizing, motion */
  --feder-radius-control: 4px;
  --feder-radius-panel: 8px;
  --feder-target-min: 44px;
  --feder-duration: 140ms;
}

@media (max-width: 767px) {
  :root {
    --feder-hero: 600 36px/40px var(--feder-font-sans);
    --feder-section: 600 28px/36px var(--feder-font-sans);
    --feder-lead: 400 18px/28px var(--feder-font-sans);
  }
}

/* Theme aliases: components use these */
:root,
[data-theme="dark"] {
  --fd-canvas: var(--feder-navy);
  --fd-surface: var(--feder-surface-dark);
  --fd-text: var(--feder-off-white);
  --fd-text-secondary: var(--feder-gray);
  --fd-rule: var(--feder-rule-dark);
  --fd-outline: var(--feder-outline);
  --fd-action-bg: var(--feder-off-white);
  --fd-action-text: var(--feder-navy);
  --fd-focus: var(--feder-off-white);
  --fd-mark: var(--feder-emerald); /* marketing only; product chrome uses --fd-text */
  --fd-healthy: var(--feder-healthy-dark);
  --fd-warning: var(--feder-warning-dark);
  --fd-critical: var(--feder-critical-dark);
  --fd-info: var(--feder-info-dark);
  --fd-inactive: var(--feder-inactive-dark);
  color-scheme: dark;
}

[data-theme="light"] {
  --fd-canvas: var(--feder-off-white);
  --fd-surface: var(--feder-white);
  --fd-text: var(--feder-navy);
  --fd-text-secondary: var(--feder-text-secondary-light);
  --fd-rule: var(--feder-rule-light);
  --fd-outline: var(--feder-outline);
  --fd-action-bg: var(--feder-navy);
  --fd-action-text: var(--feder-off-white);
  --fd-focus: var(--feder-navy);
  --fd-mark: var(--feder-emerald-deep);
  --fd-healthy: var(--feder-healthy-light);
  --fd-warning: var(--feder-warning-light);
  --fd-critical: var(--feder-critical-light);
  --fd-info: var(--feder-info-light);
  --fd-inactive: var(--feder-inactive-light);
  color-scheme: light;
}

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