/* ── Copied file. Do not edit here. ────────────────────────────────────────────
 *
 * This is a verbatim copy of public/styles/medina19-platform-tokens.css in the Medina19
 * repository, which is the design authority for every Medina19 surface including this
 * one. ForgeOS is a Medina19 product and carries the Medina19 system; it does not have a
 * palette of its own.
 *
 * A change belongs upstream, in Medina19, and arrives here as a fresh copy. Editing this
 * file directly would give the one product a customer can buy a quietly different set of
 * colours from the system it is supposed to demonstrate. tests/test_design_system.py
 * compares this file against the header below and fails if it is edited in place.
 * ──────────────────────────────────────────────────────────────────────────── */

/* Medina19 platform design tokens.
 *
 * Controlling authority: the owner-supplied reference set of 2026-08-15 — one unified
 * platform, nineteen products, one shell.
 *
 * The scale architecture here (space, radius, shadow, type) is deliberately carried over
 * from the previous system rather than reinvented: it was already coherent, already
 * enforced by tests, and rebuilding it would have thrown away working structure to change
 * a palette. What changed is colour and identity.
 *
 * Two rules that the rest of the system depends on:
 *
 * 1. **Product accent is identity, never state.** Nineteen products carry nineteen
 *    accents, several of which are green or red. If accent and state shared a scale, a
 *    green product tile would read as a passing check and a red one as a failure. State
 *    lives in --m19-state-* and is never drawn from an accent.
 *
 * 2. **Nothing outside this file names a raw colour.** A hex in a component stylesheet is
 *    a colour that cannot be themed, cannot be audited, and will not follow the next
 *    change. The design-system test enforces it.
 */

:root {
  /* ── Brand ──────────────────────────────────────────────────────────────── */
  /* Indigo carries the platform: primary actions, active navigation, focus. */
  --m19-brand-700: #4338CA;
  --m19-brand-600: #4F46E5;
  --m19-brand-500: #6366F1;
  --m19-brand-400: #818CF8;
  --m19-brand-200: #C7D2FE;
  --m19-brand-100: #E0E7FF;
  --m19-brand-050: #EEF2FF;

  /* The mark is a spectrum. These are its stops, and they are the only place the
     spectrum is defined; a surface that needs it references them rather than
     re-picking approximate colours. */
  --m19-spectrum-1: #2563EB;
  --m19-spectrum-2: #7C3AED;
  --m19-spectrum-3: #DB2777;
  --m19-spectrum-4: #F97316;
  --m19-spectrum-5: #16A34A;
  --m19-spectrum: linear-gradient(135deg,
    var(--m19-spectrum-1) 0%, var(--m19-spectrum-2) 28%, var(--m19-spectrum-3) 52%,
    var(--m19-spectrum-4) 76%, var(--m19-spectrum-5) 100%);

  /* ── Ink and surface ────────────────────────────────────────────────────── */
  --m19-ink: #101828;
  --m19-ink-2: #344054;
  --m19-ink-3: #667085;
  --m19-ink-4: #98A2B3;
  --m19-canvas: #F7F8FC;
  --m19-surface: #FFFFFF;
  --m19-surface-2: #F4F5F9;
  --m19-surface-3: #EDEFF6;
  --m19-line: #E6E8F0;
  --m19-line-strong: #D3D7E4;

  /* ── State ──────────────────────────────────────────────────────────────── */
  /* Deliberately separate from every product accent. See rule 1 above.
   *
   * Three roles per state, and they are not interchangeable:
   *
   *   --m19-state-X       the fill. A dot, a bar, a border, an icon — a shape, never a
   *                       word. Measured against white it is around 2:1, which is fine
   *                       for a 3px rule and unreadable as type.
   *   --m19-state-X-soft  the ground a state sits on.
   *   --m19-state-X-ink   the only one of the three that may carry text. Every ink tone
   *                       clears 4.5:1 on both its own soft ground and plain surface, in
   *                       both themes, and the design-system test computes those ratios
   *                       rather than trusting this comment.
   *
   * The ink tones exist because the obvious thing to write — colour: var(--m19-state-
   * success) on background: var(--m19-state-success-soft) — measures 2.38:1. It looks
   * right to someone who can already read it, which is exactly why it needs a gate. */
  --m19-state-success: #12B76A;
  --m19-state-success-soft: #E7F8F0;
  --m19-state-success-ink: #05603A;
  --m19-state-warning: #F79009;
  --m19-state-warning-soft: #FEF3E2;
  --m19-state-warning-ink: #93370D;
  --m19-state-danger: #F04438;
  --m19-state-danger-soft: #FEECEB;
  --m19-state-danger-ink: #912018;
  --m19-state-info: #2E90FA;
  --m19-state-info-soft: #E8F2FE;
  --m19-state-info-ink: #175CD3;
  --m19-state-neutral: #667085;
  --m19-state-neutral-soft: #F2F4F7;
  --m19-state-neutral-ink: #475467;

  /* The ground behind a modal. It is deliberately not derived from --m19-ink: ink
     inverts between themes, and a scrim that inverted with it would put a white veil over
     a dark page. A dialog dims what is behind it in both themes or it does not work. */
  --m19-scrim: rgba(9, 12, 20, .55);

  /* ── Depth ──────────────────────────────────────────────────────────────── */
  /* Soft and shallow. The reference set uses depth to separate, not to decorate. */
  --m19-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --m19-shadow-sm: 0 2px 8px rgba(16, 24, 40, .06);
  --m19-shadow-md: 0 8px 24px rgba(16, 24, 40, .08);
  --m19-shadow-lg: 0 20px 48px rgba(16, 24, 40, .10);

  /* ── Shape ──────────────────────────────────────────────────────────────── */
  --m19-radius-xs: 6px;
  --m19-radius-sm: 8px;
  --m19-radius-md: 12px;
  --m19-radius-lg: 16px;
  --m19-radius-xl: 20px;
  --m19-radius-pill: 999px;

  /* ── Space ──────────────────────────────────────────────────────────────── */
  --m19-space-1: 4px;
  --m19-space-2: 8px;
  --m19-space-3: 12px;
  --m19-space-4: 16px;
  --m19-space-5: 20px;
  --m19-space-6: 24px;
  --m19-space-8: 32px;
  --m19-space-10: 40px;
  --m19-space-12: 48px;
  --m19-space-16: 64px;
  --m19-space-20: 80px;
  --m19-space-24: 96px;

  /* ── Type ───────────────────────────────────────────────────────────────── */
  --m19-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --m19-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --m19-text-xs: .75rem;
  --m19-text-sm: .8125rem;
  --m19-text-base: .875rem;
  --m19-text-md: 1rem;
  --m19-text-lg: 1.125rem;
  --m19-text-xl: 1.375rem;
  --m19-text-2xl: 1.75rem;
  --m19-text-3xl: 2.25rem;
  --m19-weight-regular: 400;
  --m19-weight-medium: 500;
  --m19-weight-semibold: 600;
  --m19-weight-bold: 700;

  /* ── Shell ──────────────────────────────────────────────────────────────── */
  --m19-rail-width: 232px;
  --m19-topbar-height: 60px;
  --m19-content-max: 1440px;
  --m19-reading-max: 720px;

  /* Platform minimum for anything a finger has to hit. Not negotiable per surface. */
  --m19-tap: 44px;

  /* ── Product accents ────────────────────────────────────────────────────── */
  /* One per product, in registry order. Identity only — never state.
     These mirror registry/platform-products.json, and a test asserts they agree, so a
     product cannot be given a colour here that the registry does not know about. */
  --m19-product-atelier: #7C5CF0;
  --m19-product-asterline: #D6336C;
  --m19-product-sculptura: #E03131;
  --m19-product-quillforge: #1C7ED6;
  --m19-product-auralis: #6741D9;
  --m19-product-frameforge: #F76707;
  --m19-product-lumaloop-ai: #1098AD;
  --m19-product-neora-ai-chatroom: #0CA678;
  --m19-product-verdant-city-studio: #2F9E44;
  --m19-product-civic-atlas: #3B5BDB;
  --m19-product-international-systems: #1971C2;
  --m19-product-product-design: #C2255C;
  --m19-product-finance: #087F5B;
  --m19-product-growth: #37B24D;
  --m19-product-operations-hub: #495057;
  --m19-product-automation-studio: #E8590C;
  --m19-product-knowledge-base: #1864AB;
  --m19-product-health-human-services: #0B7285;
  --m19-product-conservation: #2B8A3E;

  /* The glyph that sits on an accent. Nineteen accents span a wide luminance range, so a
     single label colour cannot work for all of them: white on Growth measures 2.75:1 and
     near-black on Auralis measures 2.82:1. Each accent therefore names the one of the two
     that is readable on it, chosen by measurement rather than by eye, and a test
     recomputes every pair.

     The floor here is 3:1, not 4.5:1. The glyph is a decorative initial — aria-hidden,
     always beside the product's name in real text — so it is a UI component under 1.4.11
     rather than type under 1.4.3. Two accents (QuillForge 4.23:1, Conservation 4.37:1)
     sit between the two thresholds, which is why nothing that must be read as text may be
     placed on an accent. A primary action uses brand, never accent, for that reason. */
  --m19-on-accent-light: #FFFFFF;
  --m19-on-accent-dark: #101828;
  --m19-product-atelier-ink: var(--m19-on-accent-light);
  --m19-product-asterline-ink: var(--m19-on-accent-light);
  --m19-product-sculptura-ink: var(--m19-on-accent-light);
  --m19-product-quillforge-ink: var(--m19-on-accent-dark);
  --m19-product-auralis-ink: var(--m19-on-accent-light);
  --m19-product-frameforge-ink: var(--m19-on-accent-dark);
  --m19-product-lumaloop-ai-ink: var(--m19-on-accent-dark);
  --m19-product-neora-ai-chatroom-ink: var(--m19-on-accent-dark);
  --m19-product-verdant-city-studio-ink: var(--m19-on-accent-dark);
  --m19-product-civic-atlas-ink: var(--m19-on-accent-light);
  --m19-product-international-systems-ink: var(--m19-on-accent-light);
  --m19-product-product-design-ink: var(--m19-on-accent-light);
  --m19-product-finance-ink: var(--m19-on-accent-light);
  --m19-product-growth-ink: var(--m19-on-accent-dark);
  --m19-product-operations-hub-ink: var(--m19-on-accent-light);
  --m19-product-automation-studio-ink: var(--m19-on-accent-dark);
  --m19-product-knowledge-base-ink: var(--m19-on-accent-light);
  --m19-product-health-human-services-ink: var(--m19-on-accent-light);
  --m19-product-conservation-ink: var(--m19-on-accent-light);
}

/* Dark is defined here so a surface never has to invent one. Only the roles change; every
   name above stays valid, which is what makes a component themeable without edits. */
@media (prefers-color-scheme: dark) {
  :root:not([data-m19-theme="light"]) {
    --m19-ink: #F5F6FA;
    --m19-ink-2: #C9CEDC;
    --m19-ink-3: #98A2B3;
    --m19-ink-4: #6C7590;
    --m19-canvas: #0E1017;
    --m19-surface: #161923;
    --m19-surface-2: #1D2130;
    --m19-surface-3: #252A3B;
    --m19-line: #272C3B;
    --m19-line-strong: #39405A;
    --m19-brand-700: #C7D2FE;
    --m19-brand-500: #818CF8;
    --m19-brand-400: #A5B4FC;
    --m19-brand-200: #3730A3;
    --m19-brand-100: #312E81;
    --m19-brand-050: #1E1B4B;
    --m19-state-success-soft: #10291F;
    --m19-state-success-ink: #75E0A7;
    --m19-state-warning-soft: #2C2113;
    --m19-state-warning-ink: #FEC84B;
    --m19-state-danger-soft: #2E1717;
    --m19-state-danger-ink: #FDA29B;
    --m19-state-info-soft: #12233A;
    --m19-state-info-ink: #84CAFF;
    --m19-state-neutral-soft: #1D2130;
    --m19-state-neutral-ink: #98A2B3;
    --m19-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --m19-shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);
    --m19-shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
    --m19-shadow-lg: 0 20px 48px rgba(0, 0, 0, .55);
  }
}

:root[data-m19-theme="dark"] {
  --m19-ink: #F5F6FA;
  --m19-ink-2: #C9CEDC;
  --m19-ink-3: #98A2B3;
  --m19-ink-4: #6C7590;
  --m19-canvas: #0E1017;
  --m19-surface: #161923;
  --m19-surface-2: #1D2130;
  --m19-surface-3: #252A3B;
  --m19-line: #272C3B;
  --m19-line-strong: #39405A;
  --m19-brand-700: #C7D2FE;
  --m19-brand-500: #818CF8;
  --m19-brand-400: #A5B4FC;
  --m19-brand-200: #3730A3;
  --m19-brand-100: #312E81;
  --m19-brand-050: #1E1B4B;
  --m19-state-success-soft: #10291F;
  --m19-state-success-ink: #75E0A7;
  --m19-state-warning-soft: #2C2113;
  --m19-state-warning-ink: #FEC84B;
  --m19-state-danger-soft: #2E1717;
  --m19-state-danger-ink: #FDA29B;
  --m19-state-info-soft: #12233A;
  --m19-state-info-ink: #84CAFF;
  --m19-state-neutral-soft: #1D2130;
  --m19-state-neutral-ink: #98A2B3;
  --m19-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --m19-shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);
  --m19-shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
  --m19-shadow-lg: 0 20px 48px rgba(0, 0, 0, .55);
}