/* ============================================================================
   Montivory — Color tokens
   Palette is the MTVR AI Stylesheet (DesignBridge). MTVR brand tokens are the
   source of truth; the --color-* semantic aliases map onto them so components
   stay portable. Navy #182b45 anchors the brand; Mont Blue #0064f0 is the
   interactive/CTA colour.
   ============================================================================ */
:root {
  /* ------------------------------------------------------------------ */
  /* MTVR brand palette (source of truth — exact Figma values)          */
  /* ------------------------------------------------------------------ */
  /* Primary — Navy (100 = darkest brand navy) */
  --mtvr-navy-100: #182b45; --mtvr-navy-80: #46556a; --mtvr-navy-60: #74808f;
  --mtvr-navy-40:  #a3aab5; --mtvr-navy-20: #d1d5da;
  /* Primary — Mont Blue (interactive) */
  --mtvr-mont-blue-100: #0064f0; --mtvr-mont-blue-80: #3383f3; --mtvr-mont-blue-60: #66a2f6;
  --mtvr-mont-blue-40:  #99c1f9; --mtvr-mont-blue-20: #cce0fc;
  /* Primary — Aqua Blue */
  --mtvr-aqua-100: #00c8ff; --mtvr-aqua-80: #33d3ff; --mtvr-aqua-60: #66deff;
  --mtvr-aqua-40:  #99e9ff; --mtvr-aqua-20: #ccf4ff;
  /* Categorical accent hues. These drive badges, chips, tags and chart series
     ONLY — the status colours are separate literals in --mtvr-system-* /
     --mtvr-feedback-* below and are deliberately NOT derived from these, so a
     palette change here never moves success/warning/error.
     Every hue is light: pair with --mtvr-black-100 ink, never white (white is
     1.66–3.02:1 across the set, all failing). */
  /* Secondary — Sun Orange */
  --mtvr-yellow-100: #fcbc7e; --mtvr-yellow-80: #fdc998; --mtvr-yellow-60: #fdd7b2;
  --mtvr-yellow-40:  #fee4cb; --mtvr-yellow-20: #fef2e5;
  /* Secondary — Coral Red */
  --mtvr-coral-100: #fe967a; --mtvr-coral-80: #feab95; --mtvr-coral-60: #fec0af;
  --mtvr-coral-40:  #ffd5ca; --mtvr-coral-20: #ffeae4;
  /* Secondary — Blossom */
  --mtvr-pink-100: #ef6fc3; --mtvr-pink-80: #f28ccf; --mtvr-pink-60: #f5a9db;
  --mtvr-pink-40:  #f9c5e7; --mtvr-pink-20: #fce2f3;
  /* Secondary — Violet Sky */
  --mtvr-violet-100: #8988f9; --mtvr-violet-80: #a1a0fa; --mtvr-violet-60: #b8b8fb;
  --mtvr-violet-40:  #d0cffd; --mtvr-violet-20: #e7e7fe;
  /* Secondary — Grass Green */
  --mtvr-green-100: #6fc695; --mtvr-green-80: #8cd1aa; --mtvr-green-60: #a9ddbf;
  --mtvr-green-40:  #c5e8d5; --mtvr-green-20: #e2f4ea;
  /* Black & White / neutrals */
  --mtvr-black-100: #1a1a1a; --mtvr-black-80: #333333; --mtvr-black-60: #666666;
  --mtvr-black-40:  #999999; --mtvr-black-20: #cccccc;
  --mtvr-ivory-white: #f2f2f2; --mtvr-white: #ffffff;
  --mtvr-ivory: #eeefef; /* Montivory main body background (@kind color) */
  --mtvr-background-soft-blue: #faf8ff;
  --mtvr-text-placeholder: #a5a7aa;

  /* System / status (brand-exact) */
  --mtvr-system-positive: #1dda88; --mtvr-system-negative: #f55037; --mtvr-system-warning: #f9b800;
  --mtvr-text-positive: #20854a; --mtvr-text-warning: #b5762d; --mtvr-text-negative: #f55037;
  --mtvr-feedback-positive-fill: #ccfae4; --mtvr-feedback-warning-fill: #fcf4cc;
  --mtvr-feedback-danger-fill: #fddcd7;  --mtvr-feedback-neutral-fill: #faf8ff;

  /* Button roles (from DESIGN.md) */
  --mtvr-button-primary-default:  #0064f0; --mtvr-button-primary-hover: #3383f3;
  --mtvr-button-primary-press:    #004db9; --mtvr-button-primary-disabled: #0064f080;
  --mtvr-button-outline-default:  #a3aab5; --mtvr-button-outline-hover: #3383f3;
  --mtvr-button-outline-press:    #004db9; --mtvr-button-outline-disabled: #a3aab580;
  --mtvr-button-text-default:     #1a1a1a; --mtvr-button-text-hover: #3383f3;
  --mtvr-button-text-press:       #004db9; --mtvr-button-text-disabled: #1a1a1a80;
  --mtvr-button-ghost-hover:      #cce0fc; --mtvr-button-ghost-press: #99c1f9;
  --mtvr-button-warning-default:  #f55037; --mtvr-button-warning-hover: #f7735f;
  --mtvr-button-warning-press:    #d53a23; --mtvr-button-warning-disabled: #f5503780;

  /* Input roles (from DESIGN.md) */
  --mtvr-input-outline-default: #a3aab5; --mtvr-input-hover: #3383f3;
  --mtvr-input-active: #004db9; --mtvr-input-disabled-fill: #f2f2f2;

  /* Chart — general series */
  --mtvr-chart-default-100: #1878ff; --mtvr-chart-default-80: #4d97ff; --mtvr-chart-default-70: #6ba9ff;
  --mtvr-chart-default-60: #88baff; --mtvr-chart-default-50: #b4d3ff;
  --mtvr-chart-c1: #3988ff; --mtvr-chart-c2: #fb67ca; --mtvr-chart-c3: #00d0ff;
  --mtvr-chart-c4: #6d28e5; --mtvr-chart-c5: #fb654e;
  --mtvr-chart-completed: #1dda88; --mtvr-chart-warning: #ffc82c; --mtvr-chart-critical: #f55037;

  /* Brand gradient paint styles */
  --mtvr-gradient-warm:     radial-gradient(#ffffff 15%, #ffebc1 100%); /* @kind color */
  --mtvr-gradient-blue:     radial-gradient(#ffffff 9%, #e4f9ff 70%, #ccf4ff 100%); /* @kind color */
  --mtvr-gradient-platinum: radial-gradient(#00d0ff 0%, #182b45 100%); /* @kind color */
  --mtvr-gradient-gold:     radial-gradient(#f0c800 0%, #d19e36 100%); /* @kind color */
  --mtvr-gradient-silver:   radial-gradient(#a3aab5 0%, #46556a 100%); /* @kind color */
  --mtvr-gradient-bronze:   radial-gradient(#fb654e 0%, #fb654e 100%); /* @kind color */

  /* Legacy navy ramp (light→dark) kept for internal component use */
  --navy-50:  #f4f6fa; --navy-100: #e7ecf3; --navy-200: #ccd6e5; --navy-300: #a3b4cf;
  --navy-400: #6f86ab; --navy-500: #45597d; --navy-600: #2d4162; --navy-700: #21324e;
  --navy-800: #182b45; --navy-900: #101d30; --navy-950: #0a1320;
  /* Legacy neutral ramp — clean grey scale aligned to the MTVR Black system */
  --neutral-50: #f2f2f2; --neutral-100: #e6e6e6; --neutral-200: #cccccc; --neutral-300: #b3b3b3;
  --neutral-400: #999999; --neutral-500: #808080; --neutral-600: #666666;
  --neutral-700: #4d4d4d; --neutral-800: #333333; --neutral-900: #1a1a1a;

  /* ------------------------------------------------------------------ */
  /* Semantic aliases — mapped onto the MTVR palette                    */
  /* ------------------------------------------------------------------ */
  /* Accent (interactive / CTA), --color-*-accent/link/focus, --color-background-inverted
     and the --gradient-* paints are BRAND-OWNED — see tokens/brands.css. */

  /* Backgrounds */
  --color-background-body:     var(--mtvr-ivory-white);
  --color-background-surface:  var(--mtvr-white);
  --color-background-card:     var(--mtvr-white);
  --color-background-popover:  var(--mtvr-white);
  --color-background-muted:    var(--mtvr-background-soft-blue);
  --color-background-soft-blue: var(--mtvr-background-soft-blue);

  /* Overlays */
  --color-overlay:         rgba(24, 43, 69, 0.48);
  --color-overlay-hover:   rgba(24, 43, 69, 0.06);
  --color-overlay-pressed: rgba(24, 43, 69, 0.12);

  /* Text */
  --color-text-primary:     var(--mtvr-black-100);
  --color-text-secondary:   var(--mtvr-black-60);
  --color-text-disabled:    var(--mtvr-black-40);
  --color-text-placeholder: var(--mtvr-text-placeholder);
  --color-text-on-dark:     var(--mtvr-white);
  --color-text-inverted:    var(--mtvr-white);

  /* Icon */
  --color-icon-primary:   var(--mtvr-black-100);
  --color-icon-secondary: var(--mtvr-black-60);
  --color-icon-disabled:  var(--mtvr-black-40);

  /* Borders */
  --color-border:            var(--mtvr-black-20);
  /* Hairline for use ON a tinted or gradient light surface, where the grey
     border disappears — white reads as a seam rather than a line. */
  --color-border-inverted:   var(--mtvr-white);
  --color-card-border:       #e6e6e6;
  --color-border-emphasized: var(--mtvr-navy-40);
  --color-border-strong:     var(--mtvr-navy-60);

  /* Button roles — Layer-2 aliases so Button never touches --mtvr-*.
     Filled roles follow the brand accent, so switching --brand-* reskins every
     button. --color-on-accent matters here: Beacon's accent is a light gold and
     its label ink is #241a02, not white. */
  --color-button-primary-bg:        var(--color-accent);
  --color-button-primary-bg-hover:  var(--color-accent-hover);
  --color-button-primary-bg-press:  var(--color-accent-active);
  --color-button-primary-fg:        var(--color-on-accent);
  --color-button-outline-border:       var(--color-border-emphasized);
  --color-button-outline-border-hover: var(--color-accent-hover);
  --color-button-outline-border-press: var(--color-accent-active);
  --color-button-outline-fg:           var(--color-text-primary);
  --color-button-outline-fg-hover:     var(--color-text-accent);
  --color-button-text-fg:        var(--color-text-primary);
  --color-button-text-fg-hover:  var(--color-text-accent);
  --color-button-text-bg-hover:  var(--color-background-muted);
  --color-button-text-bg-press:  var(--color-accent-muted);
  --color-button-warning-bg:       var(--color-error);
  --color-button-warning-bg-hover: var(--mtvr-button-warning-hover);
  --color-button-warning-bg-press: var(--mtvr-button-warning-press);
  --color-button-warning-fg:       var(--color-on-error);

  /* SegmentedControl active-segment label. Follows the button ink by default;
     a brand may override it on its own. */
  --color-segmented-active-fg: var(--color-on-accent);

  /* Input outline states — Layer-2 aliases so components never touch --mtvr-*. */
  --color-input-border:          var(--mtvr-input-outline-default);
  --color-input-border-hover:    var(--mtvr-input-hover);
  --color-input-border-focus:    var(--mtvr-input-active);
  --color-input-background-disabled: var(--mtvr-input-disabled-fill);

  /* Semantic / status
     The three -text inks below are NOT the upstream --mtvr-text-* values. Those
     were picked to sit on white, and each fails AA on its OWN -muted fill, which
     is exactly the pairing Badge/Chip/Alert use: positive 4.07:1, warning
     3.39:1, negative 2.69:1. Each is darkened along its own hue to the first
     step clearing 4.8:1 on that fill (4.8, not 4.5, for rounding headroom);
     computed, not eyeballed. Fills stay the upstream --mtvr-system-* values.
     Same class of bug as --brand-accent-ink, fixed the same way. */
  --color-success:        var(--mtvr-system-positive);
  --color-success-text:   #1d7843;  /* 4.81:1 on -muted, 5.50:1 on white */
  --color-success-muted:  var(--mtvr-feedback-positive-fill);
  --color-on-success:     var(--mtvr-black-100);  /* the success green is light — white fails at 1.84:1 */
  --color-warning:        var(--mtvr-system-warning);
  --color-warning-text:   #936024;  /* 4.81:1 on -muted, 5.33:1 on white */
  --color-warning-muted:  var(--mtvr-feedback-warning-fill);
  --color-on-warning:     var(--mtvr-black-100);
  --color-error:          var(--mtvr-system-negative);
  --color-error-text:     #ae3927;  /* 4.80:1 on -muted, 6.15:1 on white */
  --color-error-muted:    var(--mtvr-feedback-danger-fill);
  --color-on-error:       var(--mtvr-white);
  --color-info:           var(--mtvr-navy-100);
  --color-info-muted:     var(--mtvr-feedback-neutral-fill);

  /* Categorical (badges, tags, charts) — mapped to MTVR secondaries */
  --color-aqua-blue:  var(--mtvr-aqua-100);   --color-aqua-blue-muted:  var(--mtvr-aqua-20);
  --color-sun-orange: var(--mtvr-yellow-100); --color-sun-orange-muted: var(--mtvr-yellow-20);
  /* Kept: the hue was renamed Sun Orange, but consumers reference this name. */
  --color-yellow-sand: var(--mtvr-yellow-100); --color-yellow-sand-muted: var(--mtvr-yellow-20);
  --color-violet-sky:  var(--mtvr-violet-100); --color-violet-sky-muted:  var(--mtvr-violet-20);
  --color-coral-red:  var(--mtvr-coral-100);  --color-coral-red-muted:  var(--mtvr-coral-20);
  --color-blossom:    var(--mtvr-pink-100);   --color-blossom-muted:    var(--mtvr-pink-20);
  --color-grass-green: var(--mtvr-green-100);  --color-grass-green-muted: var(--mtvr-green-20);
  --color-blossom-pink:  var(--mtvr-pink-100);   --color-blossom-pink-muted:  var(--mtvr-pink-20);
  /* Slate sits at navy-80, not navy-60: as a categorical FILL it has to carry a
     label, and navy-60 (#74808f) is mid-tone — 4.02:1 under white and 4.33:1
     under black, failing both. navy-80 clears 7.59:1 with inverted ink. */
  --color-slate: var(--mtvr-navy-80);    --color-slate-muted: var(--mtvr-ivory-white);

  /* Categorical INK — for a label sitting on the matching -muted tint, which is
     how Badge/Chip/Tag pair them. The hues are pastel: each is only 1.5–2.5:1 on
     its own tint, so the hue itself CANNOT be the ink. Each value is its hue
     darkened along the same channel ratio to the first step clearing 4.8:1 on
     that tint (computed, not eyeballed); all clear 5.3:1+ on white too.
     Same pattern as --color-text-accent and the status -text tokens. */
  --color-sun-orange-ink:   #866443;  /* 4.89:1 on tint, 5.39:1 on white */
  --color-coral-red-ink:    #935747;  /* 4.90:1 on tint, 5.68:1 on white */
  --color-blossom-ink:      #99477d;  /* 4.88:1 on tint, 5.91:1 on white */
  --color-violet-sky-ink:   #5d5ca9;  /* 4.81:1 on tint, 5.85:1 on white */
  --color-grass-green-ink:  #407356;  /* 4.83:1 on tint, 5.52:1 on white */
  /* Aqua predates the set but pairs the same way: #00c8ff is 1.68:1 on its own tint. */
  --color-aqua-blue-ink:    #00708f;  /* 4.83:1 on tint, 5.66:1 on white */
  --color-slate-ink:        var(--mtvr-navy-80);  /* 6.78:1 on tint, 7.59:1 on white */
  --color-yellow-sand-ink:  var(--color-sun-orange-ink);
  --color-blossom-pink-ink: var(--color-blossom-ink);


  /* Effects */
  --color-skeleton:   var(--mtvr-ivory-white);
  --color-track:      var(--mtvr-black-20);
  --color-shadow:     rgba(24, 43, 69, 0.12);
  --color-tint-hover: var(--mtvr-navy-100);

  /* On-gradient text/button colours (gradient paints live in brands.css).
     -primary = on --gradient-primary; -secondary = on --gradient-secondary. */
  --on-gradient-primary:         var(--mtvr-white);
  --on-gradient-primary-button:  var(--mtvr-white);
  --on-gradient-secondary:        var(--brand-dark);
  --on-gradient-secondary-alt:    var(--mtvr-white);
  --on-gradient-secondary-button: var(--mtvr-white);
  --on-gradient-tertiary:         var(--mtvr-white);   /* on its dark end */
  --on-gradient-tertiary-alt:     var(--brand-dark);   /* on its light end */
  --on-gradient-tertiary-button:  var(--mtvr-white);
  /* Hero is a near-white page wash in every brand — never invert type on it. */
  --on-gradient-hero:             var(--color-text-primary);
  /* Muted ink for the light nav washes (--gradient-sidebar / -nav-bar). The
     normal --color-text-secondary (#666) reaches only 4.28:1 on the ramp's Mont
     Blue 20 foot, so secondary roles that sit low in a rail — collapse label,
     section headings, idle icons — use navy-80 instead: 5.65:1 at the foot,
     7.59:1 on the white top half, and still visibly lighter than
     --color-text-primary (12.96:1 at the foot), so muted still reads muted.
     All four figures are computed WCAG ratios, not estimates. */
  --on-gradient-wash-muted:       var(--mtvr-navy-80);
  /* Interaction layer for UI sitting ON a dark gradient (gradient nav rails,
     inverted panels). Translucent white, so it works over any brand's ramp
     and over both gradient ends — a solid tint would band. */
  --on-gradient-primary-muted:   rgba(255, 255, 255, 0.72);
  --on-gradient-primary-hover:   rgba(255, 255, 255, 0.10);
  --on-gradient-primary-active:  rgba(255, 255, 255, 0.18);
  --on-gradient-primary-border:  rgba(255, 255, 255, 0.16);
}