/*
 * Design Tokens — Operations Server Design System
 *
 * Canon ledger: CL-57 (cleaned during Phase F per the canonical decisions).
 * Source: derived from Design_Agent_FIles_RawV1/design_tokens.css with:
 *   (1) Inter + IBM Plex Mono font tokens added (CL-14)
 *   (2) Slate aliases added (CL-15)
 *   (3) AM per-pill tints (--am-tint-*) REMOVED per CL-41 wayfinding-deprecated
 *
 * Usage:
 *   color: var(--fg);
 *   background-color: var(--surface);
 *   font-family: var(--font-sans);
 */

:root {
  /* ===== Type ===== */
  /* CL-14 Decision #4 — Inter (sans) + IBM Plex Mono (mono). */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', Menlo, Monaco, Consolas, monospace;

  /* ===== Neutrals — Slate (CL-15) ===== */
  /* Use the slate scale for chrome, text, borders, backgrounds. */
  --color-slate-50:  #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  /* Legacy --color-gray-* aliases for back-compat with existing code that hasn't migrated yet.
     These resolve to the Slate values. New code should use --color-slate-* directly. */
  --color-gray-50:  var(--color-slate-50);
  --color-gray-200: var(--color-slate-200);
  --color-gray-300: var(--color-slate-300);
  --color-gray-400: var(--color-slate-400);
  --color-gray-500: var(--color-slate-500);
  --color-gray-600: var(--color-slate-600);
  --color-gray-700: var(--color-slate-700);
  --color-gray-800: var(--color-slate-800);
  --color-gray-900: var(--color-slate-900);

  /* ===== Primary accent — Blue (CL-16) ===== */
  /* Use for LINKS and FOCUS RINGS only. NOT for button fills (use --color-slate-900 per CL-22 / Decision #12). */
  --color-blue-50:  #eff6ff;
  --color-blue-200: #bfdbfe;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;

  /* ===== Semantic tokens — chrome ===== */
  --color-bg-primary:   #ffffff;                 /* page background — pure white (CL-15, confirmed Q-002) */
  --color-bg-secondary: var(--color-slate-50);   /* secondary surface */
  --color-bg-hover:     var(--color-slate-50);   /* hover wash — one step up from white */

  --surface:    var(--color-bg-primary);
  --surface-2:  var(--color-slate-100);
  --paper:      var(--color-bg-primary);         /* page background alias (used in archetype refs) */

  --border:        var(--color-slate-200);
  --border-strong: var(--color-slate-300);
  --border-faint:  #eef2f6;                /* one shade lighter than --border, for dense table/row dividers */

  --color-text-primary:   var(--color-slate-900);
  --color-text-secondary: var(--color-slate-600);
  --color-text-muted:     var(--color-slate-500);

  --fg:        var(--color-slate-900);  /* primary text */
  --fg-muted:  var(--color-slate-600);
  --fg-faint:  var(--color-slate-400);  /* drag handles, ×, ⋯, meta */

  /* ===== Interactive (Blue per CL-16) ===== */
  --color-interactive-primary:       var(--color-blue-500);
  --color-interactive-primary-hover: var(--color-blue-600);
  --color-interactive-focus:         var(--color-blue-500);

  /* Legacy alias used by SMTP campaign styles */
  --color-primary: var(--color-blue-500);

  /* Info banners */
  --color-info-bg:     var(--color-blue-50);
  --color-info-border: var(--color-blue-200);
  --color-info-icon:   var(--color-blue-400);
  --color-info-text:   var(--color-blue-800);

  /* ===== Status semantic colors — tinted treatment (pale bg + saturated text) ===== */
  /* Success — green */
  --color-success-bg:     #dcfce7;  /* green-100 */
  --color-success-border: #86efac;  /* green-300 */
  --color-success-text:   #166534;  /* green-800 */
  --color-success:        #16a34a;  /* green-600 */

  /* Danger / destructive — red */
  --color-danger-bg:     #fee2e2;   /* red-100 */
  --color-danger-border: #fca5a5;   /* red-300 */
  --color-danger-text:   #991b1b;   /* red-800 */
  --color-danger:        #dc2626;   /* red-600 — solid-red destructive button per CL-22 */

  /* Warning — amber (placeholder values; canonical values per CL-20 tinted treatment) */
  --color-warning-bg:     #fef3c7;  /* amber-100 */
  --color-warning-border: #fcd34d;  /* amber-300 */
  --color-warning-text:   #92400e;  /* amber-800 */

  /* ===== Event-type tints (existing app's event badges) ===== */
  /* Live events — Dark Blue */
  --event-type-live-bg:    #bfdbfe;    /* blue-200 */
  --event-type-live-text:  #1e3a8a;    /* blue-900 */

  /* Virtual events — Magenta/Pink */
  --event-type-virtual-bg:   #fce7f3;  /* pink-100 */
  --event-type-virtual-text: #9f1239;  /* rose-800 */

  /* Webinar events — Green */
  --event-type-webinar-bg:   #dcfce7;  /* green-100 */
  --event-type-webinar-text: #166534;  /* green-800 */

  /* Meal events — Orange/Amber */
  --event-type-meal-bg:   #fed7aa;     /* orange-200 */
  --event-type-meal-text: #9a3412;     /* orange-800 */

  /* ===== Chip-set category colors — for attachable taxonomy chips (Vertical / Topic / Event) ===== */
  /* Vertical — sky blue */
  --chip-vertical-bg:     #f0f9ff;     /* sky-50 */
  --chip-vertical-border: #bae6fd;     /* sky-200 */
  --chip-vertical-text:   #0c4a6e;     /* sky-900 */

  /* Topic — orange */
  --chip-topic-bg:        #fff7ed;     /* orange-50 */
  --chip-topic-border:    #fed7aa;     /* orange-200 */
  --chip-topic-text:      #9a3412;     /* orange-800 */

  /* Event — mint */
  --chip-event-bg:        #ecfdf5;     /* emerald-50 */
  --chip-event-border:    #a7f3d0;     /* emerald-200 */
  --chip-event-text:      #065f46;     /* emerald-800 */

  /* Rewrite tag (chat-thread) — pink */
  --chat-rewrite-tag-text: #be185d;    /* pink-700 */

  /* ===== Status pill tokens (Registration Tracker existing app pattern) ===== */
  /* High Risk - Red (pill) */
  --status-high-risk-bg:   #dc2626;
  --status-high-risk-text: #ffffff;

  /* Goal Met - Light Green (pill, lighter intensity for colorblind accessibility) */
  --status-goal-met-bg:    #86efac;
  --status-goal-met-text:  #166534;

  /* Medium Risk - Red text only */
  --status-medium-risk-text: #dc2626;

  /* Some Risk - Orange text only */
  --status-some-risk-text:   #ea580c;

  /* On Track - Blue text only */
  --status-on-track-text:    #3b82f6;

  /* Ahead - Blue pill (action item) */
  --status-ahead-bg:   #3b82f6;
  --status-ahead-text: #ffffff;

  /* Early - Gray text only */
  --status-early-text: var(--color-slate-500);

  /* No Goal - Purple text only */
  --status-no-goal-text: #9333ea;

  /* No Data - Light gray text only */
  --status-no-data-text: var(--color-slate-400);

  /* ===== Spacing scale (CL-17) — 4px base ===== */
  --s-1: 2px;
  --s-2: 4px;
  --s-3: 6px;
  --s-4: 12px;
  --s-5: 16px;
  --s-6: 24px;
  --s-7: 48px;

  /* ===== Radius scale (CL-18) — minimal ===== */
  --r-input: 3px;
  --r-pill:  4px;
  --r-card:  4px;
  --r-modal: 6px;

  /* ===== Shadow scale (CL-19) — subtle ===== */
  --sh-card:  0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
  --sh-menu:  0 2px 6px rgba(15,23,42,0.08), 0 1px 3px rgba(15,23,42,0.04);
  --sh-modal: 0 8px 24px rgba(15,23,42,0.12), 0 4px 8px rgba(15,23,42,0.06);

  /* ===== Motion (CL-21) — minimal: 100ms ease-out on color/bg/border, plus a narrow 500ms structural carve-out ===== */
  --t-fast: 100ms ease-out;

  /* Intentional structural layout transitions (see foundations/motion.md).
     Narrow carve-out for layout shifts that are semantically meaningful, frequent,
     and structural (not decorative). Used with the FLIP-lite max-height pattern.
     Reference implementations: archetypes/rich-detail/reference-create.html
     (create-zone collapse on commit); inline-edit textarea open. */
  --t-structural: 500ms ease-out;

  /* Background-activity pulse (P0.6 family) — slow opacity oscillation that
     signals "live, page is being updated by a background job." Distinct from
     --t-fast and --t-structural, which are for synchronous transitions. Used by
     the pulse-dot variant on status badges. */
  --t-pulse-bg-activity: 1.2s;

  /* ===== Typography scale =====
     Semantic-scale tokens so components reference a named size rather than
     a bare px value. Polaris/Material/Carbon-style: small numbered scale,
     used across the whole system. Adopt incrementally — existing canonical
     component CSS that still uses bare px values can migrate per-component. */
  --text-xs:   10.5px;  /* mono uppercase labels (stat-tile label, eyebrow) */
  --text-sm:   11.5px;  /* mono meta lines, table column headers */
  --text-md:   13px;    /* body / default reading size */
  --text-base: 13.5px;  /* row values, button text */
  --text-lg:   16px;    /* section heads, button-large */
  --text-xl:   18px;    /* sub-page titles, compact-detail field labels */
  --text-2xl:  22px;    /* compact-detail title */
  --text-3xl:  26px;    /* mono numerics (stat-tile count), launch-feature */
  --text-4xl:  30px;    /* rich-detail title */

  /* Line heights — paired with the scale above.
     Tight for headings and numerics; relaxed for body copy. */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.65;

  /* Letter spacing — uppercase labels need positive tracking; large
     headings need slight negative tracking for optical correctness. */
  --tracking-eyebrow: 0.08em;   /* mono uppercase eyebrows + labels */
  --tracking-wide:    0.1em;    /* state badges, prefix labels */
  --tracking-tight:   -0.01em;  /* title sizes */
  --tracking-tighter: -0.02em;  /* the very largest title (rich-detail name) */

  /* Font weights — semantic names so components don't reference 400/500/600/700 directly. */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
}

/*
 * REMOVED per CL-41 (Tinting-as-wayfinding deprecated):
 *   --am-tint-rose-*, --am-tint-amber-*, --am-tint-teal-*, --am-tint-indigo-*
 *   .am-domain-activity, .am-domain-creative, .am-domain-audience, .am-domain-sending
 *
 * The AM 4-pill domain tinting (rose=Activity, amber=Creative, teal=Audience, indigo=Sending)
 * was deprecated at msg #207. Subnav active state uses neutral weight+background only,
 * NOT a colored tint. See ../foundations/wayfinding-deprecated.md.
 *
 * If existing AM code references --am-tint-* during the hybrid migration (per CL-11 posture),
 * map to neutral slate equivalents on a per-call basis rather than restoring the tokens.
 */