/* Design tokens. Every color, gradient and shadow in the portal is defined here; app.css uses
   var() only (past PM bugs came from hardcoded fills overriding variables). A theme change is a
   change to this file only.
   Look (decision 2026-10-06): the X CVLT Project Manager's matte dashboard - values taken from the
   PM's styles.css (dashboard cards, calendar, payments rows, .spj table, .nkp panels). */
:root {
  color-scheme: dark;

  /* surfaces */
  --page:        #050507;
  --page-dots:   rgba(255, 255, 255, .045);
  --panel-solid: #0e0e11;
  --table-bg:    #0b0b0d;
  --th-bg:       #111114;
  --row-hover:   #131317;
  --tab-bg:      #101013;
  --tab-on:      #e9e9ee;
  --seg-on:      #222327;
  --input-bg:    #121216;

  /* ink */
  --ink:    #eeeef2;
  --ink-95: rgba(244, 246, 250, .95);
  --ink-85: rgba(238, 238, 242, .85);
  --ink-72: rgba(238, 238, 242, .72);
  --ink-62: rgba(238, 238, 242, .62);
  --ink-50: rgba(238, 238, 242, .5);
  --ink-42: rgba(238, 238, 242, .42);
  --ink-35: rgba(238, 238, 242, .35);
  --ink-30: rgba(238, 238, 242, .3);
  --ink-22: rgba(238, 238, 242, .22);
  --ink-dark: #0b0b0d;          /* text on light buttons / active tabs */
  --ink-dark-50: rgba(11, 11, 13, .5);
  --on-swatch-light: rgba(0, 0, 0, .58);
  --on-swatch-dark: rgba(255, 255, 255, .85);

  /* white fills and lines (by strength) */
  --fill-1: rgba(255, 255, 255, .012);
  --fill-2: rgba(255, 255, 255, .028);
  --fill-3: rgba(255, 255, 255, .035);
  --fill-4: rgba(255, 255, 255, .045);
  --fill-5: rgba(255, 255, 255, .055);
  --fill-6: rgba(255, 255, 255, .07);
  --fill-7: rgba(255, 255, 255, .10);
  --fill-8: rgba(255, 255, 255, .14);
  --line-1: rgba(255, 255, 255, .045);
  --line-2: rgba(255, 255, 255, .06);
  --line-3: rgba(255, 255, 255, .075);
  --line-4: rgba(255, 255, 255, .11);
  --line-5: rgba(255, 255, 255, .16);
  --line-6: rgba(255, 255, 255, .3);
  --line-7: rgba(255, 255, 255, .34);
  --well:   rgba(0, 0, 0, .26);
  --scrim:  rgba(3, 3, 5, .72);
  --dark-ring: rgba(9, 9, 13, .95);

  /* shadows + gradients */
  --inset-hi:   inset 0 1px 0 rgba(255, 255, 255, .055);
  --inset-on:   inset 0 1px 0 rgba(255, 255, 255, .26);
  --card-drop:  0 10px 24px -16px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .35);
  --panel-drop: 0 18px 40px -18px rgba(0, 0, 0, .7);
  --big-drop:   0 30px 70px rgba(0, 0, 0, .55);
  --glow-on:    0 0 18px rgba(255, 255, 255, .13);
  --glow-today: 0 0 16px rgba(255, 255, 255, .65);
  --well-shadow: inset 0 2px 6px rgba(0, 0, 0, .4);
  --btn-light:  linear-gradient(180deg, #f5f6f8, #c6cad3);
  --btn-light-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 18px rgba(255, 255, 255, .12);
  --blade-silver: linear-gradient(180deg, #fff, rgba(198, 202, 211, .5));
  --blade-ember: #C6C6C6;
  --hairline: linear-gradient(90deg, transparent 6%, rgba(218, 162, 122, .45) 28%, rgba(238, 238, 242, .5) 50%, rgba(125, 220, 156, .4) 74%, transparent 94%);
  --big-number: linear-gradient(180deg, #fff, rgba(190, 230, 205, .78));
  --title-glow: 0 0 40px rgba(255, 255, 255, .14);

  /* the PM's named colors (option pills, stages, accents, calendar kinds) */
  --c-gray:   #A2A2A2;
  --c-brown:  #b28c6e;
  --c-orange: #ff9646;
  --c-amber:  #ffc85a;
  --c-green:  #5adc96;
  --c-teal:   #50d2d2;
  --c-blue:   #64aaff;
  --c-purple: #b48cff;
  --c-pink:   #ff78be;
  --c-red:    #ff6969;

  /* states */
  --ok:         #8fe0a8;
  --ok-fill:    rgba(80, 200, 130, .12);
  --ok-line:    rgba(110, 220, 155, .26);
  --warn:       #ffcf8f;
  --warn-fill:  rgba(255, 196, 110, .12);
  --warn-line:  rgba(255, 200, 130, .28);
  --warn-glow:  0 0 26px rgba(255, 170, 70, .10);
  --bad:        #ff9f9f;
  --bad-fill:   rgba(255, 120, 90, .07);
  --bad-line:   rgba(255, 150, 120, .24);
  --done:       #7ddc9c;
  --peach:      #daa27a;
  --flight:     #9db9ff;

  /* panel icon tints (the PM's NK_TINTS) */
  --tint-peach:  #ecbf9c;
  --tint-violet: #cbb6ff;
  --tint-amber:  #f0cc8f;
  --tint-green:  #9be8b4;
  --tint-blue:   #b9cfff;
  --tint-muted:  #989898;

  /* waveform + media placeholders */
  --wave:        rgba(255, 214, 180, .85);
  --wave-bg:     #0b0b0e;
  --wave-marker: #ffc85a;
  --media-ph:    #16161b;

  /* the Deliveries tab = the PM's Delivery + Preview page (design handoff "Delivery + Preview (Phase 9)") */
  --dl-page:     #07070a;
  --dl-panel:    #0e0e11;
  --dl-box:      #111115;
  --dl-player:   #050506;
  --dl-folder:   #2c2c35;
  --dl-ink:      #eeeef2;
  --dl-ink-85:   rgba(238, 238, 242, .85);
  --dl-ink-72:   rgba(238, 238, 242, .72);
  --dl-ink-60:   rgba(238, 238, 242, .6);
  --dl-ink-50:   rgba(238, 238, 242, .5);
  --dl-ink-45:   rgba(238, 238, 242, .45);
  --dl-ink-40:   rgba(238, 238, 242, .4);
  --dl-ink-35:   rgba(238, 238, 242, .35);
  --dl-ink-30:   rgba(238, 238, 242, .3);
  --dl-ring:     rgba(238, 238, 242, .18);
  --dl-l03:      rgba(255, 255, 255, .03);
  --dl-l04:      rgba(255, 255, 255, .04);
  --dl-l05:      rgba(255, 255, 255, .05);
  --dl-l06:      rgba(255, 255, 255, .06);
  --dl-l07:      rgba(255, 255, 255, .07);
  --dl-l08:      rgba(255, 255, 255, .08);
  --dl-l09:      rgba(255, 255, 255, .09);
  --dl-l10:      rgba(255, 255, 255, .10);
  --dl-l13:      rgba(255, 255, 255, .13);
  --dl-l14:      rgba(255, 255, 255, .14);
  --dl-l18:      rgba(255, 255, 255, .18);
  --dl-l20:      rgba(255, 255, 255, .2);
  --dl-l25:      rgba(255, 255, 255, .25);
  --dl-l28:      rgba(255, 255, 255, .28);
  --dl-white:    #ffffff;
  --dl-parent:   rgba(0, 0, 0, .12);
  --dl-chip-bg:  rgba(0, 0, 0, .72);
  --dl-shadow:   0 0 5px rgba(0, 0, 0, .7);
  --dl-dot-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  --dl-text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  --dl-fade:     linear-gradient(180deg, transparent, rgba(0, 0, 0, .85));
  --dl-green:    #7ddc9c;
  --dl-green-bg: rgba(10, 24, 16, .85);
  --dl-green-chip: rgba(125, 220, 156, .14);
  --dl-icon-green: #9be8b4;
  --dl-teal:     #9fe6e6;
  --dl-blue:     #8fb4ff;
  --dl-pick:     rgba(143, 180, 255, .13);   /* v0.3.5: a selected file / folder */
  --dl-pick-ring: rgba(143, 180, 255, .55);
  --dl-menu-bg:  #18181d;
  --dl-menu-shadow: 0 14px 36px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  --dl-amber:    #e8b46a;
  --dl-amber-bg: rgba(232, 180, 106, .14);
  --dl-amber-line: rgba(232, 180, 106, .3);
  --dl-black:    #0b0b0d;
  --dl-mark-line: #000000;

  /* shape + motion */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px; --r-2xl: 22px; --r-pill: 999px;
  --t-fast: .12s;
  --t-slow: .18s;

  /* Gilmer is the PM's brand font; it renders where installed and is not self-hosted until its web
     licence is confirmed. */
  --sans: 'Gilmer', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-slow: 0s; }
}