/* ==========================================================================
   MeProduce — Design Tokens
   tokens.css v1.0
   
   Usage: Add before all other stylesheets in index.html
   <link rel="stylesheet" href="tokens.css">
   
   Architecture:
   - Primitive tokens  → raw values, never used directly in components
   - Semantic tokens   → what components actually reference
   - Dark mode default, light mode via media query + .light class
   ========================================================================== */


/* --------------------------------------------------------------------------
   PRIMITIVE TOKENS — raw palette, never reference these in components
   -------------------------------------------------------------------------- */
:root {

  /* Neutral scale */
  --mp-black:          #0e0e0c;
  --mp-surface-1:      #141412;
  --mp-surface-2:      #191917;
  --mp-surface-3:      #222220;
  --mp-border-subtle:  #1e1e1a;
  --mp-border:         #2a2a24;
  --mp-border-strong:  #3a3a32;
  --mp-text-dim:       #4a4a44;
  --mp-text-muted:     #6a6860;
  --mp-text-secondary: #8a8880;
  --mp-text-tertiary:  #c0bcb4;
  --mp-text-primary:   #f0ece3;
  --mp-white:          #f5f2ec;

  /* Brand — Mineral Green */
  --mp-green-900:      #0e3828;
  --mp-green-800:      #1a5a3e;
  --mp-green-700:      #2a7a58;
  --mp-green-600:      #3d9e72;   /* ← primary accent */
  --mp-green-500:      #5ab88a;
  --mp-green-400:      #7acca4;

  /* Stage — Pitch (violet) */
  --mp-violet-900:     #1a1228;
  --mp-violet-800:     #241c30;
  --mp-violet-700:     #3a2a50;
  --mp-violet-600:     #5a3e90;
  --mp-violet-500:     #8a64c8;   /* ← pitch text/icon */
  --mp-violet-400:     #aa88e0;

  /* Stage — Pre-production (blue) */
  --mp-blue-900:       #0e1828;
  --mp-blue-800:       #162030;
  --mp-blue-700:       #1c2c3e;
  --mp-blue-600:       #3a6090;
  --mp-blue-500:       #5a8fcc;   /* ← pre-prod text/icon */
  --mp-blue-400:       #7aaedc;

  /* Stage — Shoot (yellow-green) */
  --mp-lime-900:       #141e0e;
  --mp-lime-800:       #1c2418;
  --mp-lime-700:       #283020;
  --mp-lime-600:       #608830;
  --mp-lime-500:       #8ab84a;   /* ← shoot text/icon */
  --mp-lime-400:       #aacc70;

  /* Stage — Post-production (amber) */
  --mp-amber-900:      #1e1410;
  --mp-amber-800:      #241c14;
  --mp-amber-700:      #322418;
  --mp-amber-600:      #a06830;
  --mp-amber-500:      #d4944a;   /* ← post text/icon */
  --mp-amber-400:      #e8b478;

  /* Stage — Delivered (teal) */
  --mp-teal-900:       #0e1e1e;
  --mp-teal-800:       #142020;
  --mp-teal-700:       #1a2e2e;
  --mp-teal-600:       #228878;
  --mp-teal-500:       #3ab8a8;   /* ← delivered text/icon */
  --mp-teal-400:       #60ccc0;

  /* Functional — Error/Warning/Info */
  --mp-red-900:        #1e0e0e;
  --mp-red-800:        #2a1414;
  --mp-red-700:        #3a1e1e;
  --mp-red-600:        #aa4040;
  --mp-red-500:        #e05050;
  --mp-red-400:        #f07878;

  /* Typography scale — in rem (base 16px) */
  --mp-text-xs:   0.625rem;   /*  10px */
  --mp-text-sm:   0.6875rem;  /*  11px */
  --mp-text-base: 0.8125rem;  /*  13px */
  --mp-text-md:   0.875rem;   /*  14px */
  --mp-text-lg:   1rem;       /*  16px */
  --mp-text-xl:   1.125rem;   /*  18px */
  --mp-text-2xl:  1.375rem;   /*  22px */
  --mp-text-3xl:  1.75rem;    /*  28px */
  --mp-text-4xl:  2.25rem;    /*  36px */
  --mp-text-5xl:  3rem;       /*  48px */
  --mp-text-6xl:  4rem;       /*  64px */

  /* Spacing scale — 4px base */
  --mp-space-1:   0.25rem;    /*  4px */
  --mp-space-2:   0.5rem;     /*  8px */
  --mp-space-3:   0.75rem;    /* 12px */
  --mp-space-4:   1rem;       /* 16px */
  --mp-space-5:   1.25rem;    /* 20px */
  --mp-space-6:   1.5rem;     /* 24px */
  --mp-space-8:   2rem;       /* 32px */
  --mp-space-10:  2.5rem;     /* 40px */
  --mp-space-12:  3rem;       /* 48px */
  --mp-space-16:  4rem;       /* 64px */
  --mp-space-20:  5rem;       /* 80px */
  --mp-space-24:  6rem;       /* 96px */

  /* Border radius */
  --mp-radius-sm:   3px;
  --mp-radius-md:   6px;
  --mp-radius-lg:   8px;
  --mp-radius-xl:   12px;
  --mp-radius-full: 9999px;

  /* Border width */
  --mp-border-width:        0.5px;
  --mp-border-width-strong: 1px;
  --mp-border-width-heavy:  2px;

  /* Shadows */
  --mp-shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
  --mp-shadow-md:  0 2px 8px rgba(0,0,0,0.4);
  --mp-shadow-lg:  0 8px 24px rgba(0,0,0,0.5);
  --mp-shadow-xl:  0 16px 48px rgba(0,0,0,0.6);

  /* Motion */
  --mp-duration-fast:   100ms;
  --mp-duration-base:   180ms;
  --mp-duration-slow:   320ms;
  --mp-ease:            cubic-bezier(0.16, 1, 0.3, 1);
  --mp-ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --mp-ease-out:        cubic-bezier(0, 0, 0.2, 1);

  /* Z-index scale */
  --mp-z-base:    0;
  --mp-z-raised:  10;
  --mp-z-overlay: 100;
  --mp-z-modal:   200;
  --mp-z-toast:   300;
  --mp-z-tooltip: 400;

  /* Font families */
  --mp-font-mono:      'DM Mono', 'Fira Mono', 'Courier New', monospace;
  --mp-font-sans:      'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mp-font-display:   'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Font weights */
  --mp-weight-light:   300;
  --mp-weight-regular: 400;
  --mp-weight-medium:  500;

  /* Line heights */
  --mp-leading-tight:  1.1;
  --mp-leading-snug:   1.3;
  --mp-leading-base:   1.5;
  --mp-leading-relaxed:1.65;

  /* Letter spacing */
  --mp-tracking-tight:  -0.02em;
  --mp-tracking-normal:  0;
  --mp-tracking-wide:    0.04em;
  --mp-tracking-wider:   0.08em;
  --mp-tracking-widest:  0.12em;

}


/* --------------------------------------------------------------------------
   SEMANTIC TOKENS — DARK MODE (default)
   These are what components reference. Switch these, not primitives.
   -------------------------------------------------------------------------- */
:root {

  /* Backgrounds */
  --color-bg-base:          var(--mp-black);
  --color-bg-surface:       var(--mp-surface-1);
  --color-bg-elevated:      var(--mp-surface-2);
  --color-bg-overlay:       var(--mp-surface-3);
  --color-bg-inset:         var(--mp-black);

  /* Borders */
  --color-border-subtle:    var(--mp-border-subtle);
  --color-border:           var(--mp-border);
  --color-border-strong:    var(--mp-border-strong);

  /* Text */
  --color-text-primary:     var(--mp-text-primary);
  --color-text-secondary:   var(--mp-text-secondary);
  --color-text-muted:       var(--mp-text-muted);
  --color-text-dim:         var(--mp-text-muted);
  --color-text-inverse:     var(--mp-black);
  --color-text-on-accent:   var(--mp-black);

  /* Brand accent */
  --color-accent:           var(--mp-green-600);
  --color-accent-hover:     var(--mp-green-500);
  --color-accent-subtle:    var(--mp-green-900);
  --color-accent-border:    var(--mp-green-800);
  --color-accent-text:      var(--mp-green-600);

  /* Wordmark */
  --color-wordmark-light:   var(--mp-text-tertiary);
  --color-wordmark-bold:    var(--mp-text-primary);

  /* Interactive */
  --color-btn-primary-bg:       var(--mp-green-600);
  --color-btn-primary-text:     var(--mp-black);
  --color-btn-primary-hover:    var(--mp-green-500);
  --color-btn-secondary-bg:     var(--mp-surface-2);
  --color-btn-secondary-text:   var(--mp-text-primary);
  --color-btn-secondary-border: var(--mp-border);
  --color-btn-ghost-text:       var(--mp-text-secondary);
  --color-btn-ghost-hover-bg:   var(--mp-surface-2);

  /* Inputs */
  --color-input-bg:         var(--mp-surface-2);
  --color-input-border:     var(--mp-border);
  --color-input-border-focus: var(--mp-green-600);
  --color-input-text:       var(--mp-text-primary);
  --color-input-placeholder:var(--mp-text-dim);

  /* Nav */
  --color-nav-bg:           var(--mp-surface-1);
  --color-nav-border:       var(--mp-border-subtle);
  --color-nav-item:         var(--mp-text-dim);
  --color-nav-item-active:  var(--mp-text-primary);
  --color-nav-item-hover:   var(--mp-text-secondary);

  /* Cards */
  --color-card-bg:          var(--mp-surface-2);
  --color-card-border:      var(--mp-surface-3);
  --color-card-hover-border:var(--mp-border);

  /* Tables */
  --color-table-header-bg:  var(--mp-surface-1);
  --color-table-row-bg:     transparent;
  --color-table-row-alt:    var(--mp-surface-2);
  --color-table-row-hover:  var(--mp-surface-2);
  --color-table-border:     var(--mp-border-subtle);

  /* Stage — Pitch */
  --color-stage-pitch-bg:   var(--mp-violet-800);
  --color-stage-pitch-text: var(--mp-violet-500);
  --color-stage-pitch-border:var(--mp-violet-700);
  --color-stage-pitch-dot:  var(--mp-violet-500);

  /* Stage — Pre-production */
  --color-stage-preprod-bg:    var(--mp-blue-800);
  --color-stage-preprod-text:  var(--mp-blue-500);
  --color-stage-preprod-border:var(--mp-blue-700);
  --color-stage-preprod-dot:   var(--mp-blue-500);

  /* Stage — Shoot */
  --color-stage-shoot-bg:    var(--mp-lime-800);
  --color-stage-shoot-text:  var(--mp-lime-500);
  --color-stage-shoot-border:var(--mp-lime-700);
  --color-stage-shoot-dot:   var(--mp-lime-500);

  /* Stage — Post-production */
  --color-stage-post-bg:    var(--mp-amber-800);
  --color-stage-post-text:  var(--mp-amber-500);
  --color-stage-post-border:var(--mp-amber-700);
  --color-stage-post-dot:   var(--mp-amber-500);

  /* Stage — Delivered */
  --color-stage-delivered-bg:    var(--mp-teal-800);
  --color-stage-delivered-text:  var(--mp-teal-500);
  --color-stage-delivered-border:var(--mp-teal-700);
  --color-stage-delivered-dot:   var(--mp-teal-500);

  /* Stage — Licensed */
  --color-stage-licensed-bg:    var(--mp-green-900);
  --color-stage-licensed-text:  var(--mp-green-600);
  --color-stage-licensed-border:var(--mp-green-800);
  --color-stage-licensed-dot:   var(--mp-green-600);

  /* Finance states */
  --color-finance-profit-text:   var(--mp-green-600);
  --color-finance-profit-bg:     var(--mp-green-900);
  --color-finance-profit-border: var(--mp-green-800);

  --color-finance-outstanding-text:   var(--mp-amber-500);
  --color-finance-outstanding-bg:     var(--mp-amber-800);
  --color-finance-outstanding-border: var(--mp-amber-700);

  --color-finance-overbudget-text:   var(--mp-red-500);
  --color-finance-overbudget-bg:     var(--mp-red-800);
  --color-finance-overbudget-border: var(--mp-red-700);

  --color-finance-estimate-text:   var(--mp-text-secondary);
  --color-finance-estimate-bg:     var(--mp-surface-2);
  --color-finance-estimate-border: var(--mp-border);

  /* System feedback */
  --color-success-text:   var(--mp-green-600);
  --color-success-bg:     var(--mp-green-900);
  --color-warning-text:   var(--mp-amber-500);
  --color-warning-bg:     var(--mp-amber-900);
  --color-error-text:     var(--mp-red-500);
  --color-error-bg:       var(--mp-red-900);
  --color-info-text:      var(--mp-blue-500);
  --color-info-bg:        var(--mp-blue-900);

  /* Calendar */
  --color-cal-bg:           var(--mp-surface-1);
  --color-cal-border:       var(--mp-border-subtle);
  --color-cal-day-text:     var(--mp-text-dim);
  --color-cal-today-bg:     var(--mp-surface-2);
  --color-cal-today-text:   var(--mp-text-primary);
  --color-cal-today-border: var(--mp-green-600);

  /* Scrollbar */
  --color-scrollbar-track: var(--mp-surface-1);
  --color-scrollbar-thumb: var(--mp-border);

  /* Skeleton / loading */
  --color-skeleton-base:    var(--mp-surface-2);
  --color-skeleton-shimmer: var(--mp-surface-3);

}


/* --------------------------------------------------------------------------
   SEMANTIC TOKENS — LIGHT MODE
   Applied via media query AND .light class (for manual toggle)
   -------------------------------------------------------------------------- */
/* Driven by the app's existing manual toggle (body.theme-light), NOT the OS
   preference — otherwise migrated components would flip to light based on the
   user's system theme while the rest of the app stayed dark. */
body.theme-light {
  --color-bg-base:          #f5f2ec;
  --color-bg-surface:       #ffffff;
  --color-bg-elevated:      #f0ece3;
  --color-bg-overlay:       #e8e4dc;
  --color-bg-inset:         #edeae2;

  --color-border-subtle:    #e0ddd4;
  --color-border:           #d0cdc4;
  --color-border-strong:    #b0ada4;

  --color-text-primary:     #1a1a16;
  --color-text-secondary:   #4a4a44;
  --color-text-muted:       #5a5852;
  --color-text-dim:         #4a4a44;
  --color-text-inverse:     #f0ece3;
  --color-text-on-accent:   #ffffff;

  --color-accent:           var(--mp-green-600);
  --color-accent-hover:     var(--mp-green-500);
  --color-accent-subtle:    #e0f2ea;
  --color-accent-border:    #b0ddc8;
  --color-accent-text:      var(--mp-green-600);

  --color-wordmark-light:   #8a8880;
  --color-wordmark-bold:    #1a1a16;

  --color-btn-primary-bg:       var(--mp-green-600);
  --color-btn-primary-text:     #ffffff;
  --color-btn-primary-hover:    var(--mp-green-500);
  --color-btn-secondary-bg:     #ffffff;
  --color-btn-secondary-text:   #1a1a16;
  --color-btn-secondary-border: #d0cdc4;
  --color-btn-ghost-text:       #4a4a44;
  --color-btn-ghost-hover-bg:   #f0ece3;

  --color-input-bg:             #ffffff;
  --color-input-border:         #d0cdc4;
  --color-input-border-focus:   var(--mp-green-600);
  --color-input-text:           #1a1a16;
  --color-input-placeholder:    #8a8880;

  --color-nav-bg:               #ffffff;
  --color-nav-border:           #e0ddd4;
  --color-nav-item:             #8a8880;
  --color-nav-item-active:      #1a1a16;
  --color-nav-item-hover:       #4a4a44;

  --color-card-bg:              #ffffff;
  --color-card-border:          #e0ddd4;
  --color-card-hover-border:    #d0cdc4;

  --color-table-header-bg:      #f0ece3;
  --color-table-row-alt:        #f8f6f2;
  --color-table-row-hover:      #f0ece3;
  --color-table-border:         #e0ddd4;

  --color-stage-pitch-bg:       #ede8f8;
  --color-stage-pitch-text:     #5a3e90;
  --color-stage-pitch-border:   #d0c4ec;

  --color-stage-preprod-bg:     #e4edf8;
  --color-stage-preprod-text:   #2a5090;
  --color-stage-preprod-border: #b8cce8;

  --color-stage-shoot-bg:       #edf4e0;
  --color-stage-shoot-text:     #4a7020;
  --color-stage-shoot-border:   #c4dcaa;

  --color-stage-post-bg:        #faf0e4;
  --color-stage-post-text:      #8a5020;
  --color-stage-post-border:    #f0d0a8;

  --color-stage-delivered-bg:   #e0f4f2;
  --color-stage-delivered-text: #1a7068;
  --color-stage-delivered-border:#a8dcd8;

  --color-stage-licensed-bg:    #e0f2ea;
  --color-stage-licensed-text:  var(--mp-green-600);
  --color-stage-licensed-border:#b0ddc8;

  --color-finance-profit-text:  var(--mp-green-600);
  --color-finance-profit-bg:    #e0f2ea;
  --color-finance-profit-border:#b0ddc8;

  --color-finance-outstanding-text:  #8a5020;
  --color-finance-outstanding-bg:    #faf0e4;
  --color-finance-outstanding-border:#f0d0a8;

  --color-finance-overbudget-text:  #8a2020;
  --color-finance-overbudget-bg:    #fae8e8;
  --color-finance-overbudget-border:#f0b8b8;

  --color-cal-bg:               #ffffff;
  --color-cal-border:           #e0ddd4;
  --color-cal-day-text:         #8a8880;
  --color-cal-today-bg:         #e0f2ea;
  --color-cal-today-text:       var(--mp-green-600);
  --color-cal-today-border:     var(--mp-green-600);

  --color-scrollbar-track:      #f0ece3;
  --color-scrollbar-thumb:      #d0cdc4;

  --color-skeleton-base:        #e8e4dc;
  --color-skeleton-shimmer:     #f0ece3;
}

/* Manual .light class — same as above, kept for the standalone marketing page */
.light {
  --color-bg-base:          #f5f2ec;
  --color-bg-surface:       #ffffff;
  --color-bg-elevated:      #f0ece3;
  --color-bg-overlay:       #e8e4dc;
  --color-bg-inset:         #edeae2;
  --color-border-subtle:    #e0ddd4;
  --color-border:           #d0cdc4;
  --color-border-strong:    #b0ada4;
  --color-text-primary:     #1a1a16;
  --color-text-secondary:   #4a4a44;
  --color-text-muted:       #5a5852;
  --color-text-dim:         #4a4a44;
  --color-text-inverse:     #f0ece3;
  --color-text-on-accent:   #ffffff;
  --color-accent:           var(--mp-green-600);
  --color-accent-hover:     var(--mp-green-500);
  --color-accent-subtle:    #e0f2ea;
  --color-accent-border:    #b0ddc8;
  --color-accent-text:      var(--mp-green-600);
  --color-wordmark-light:   #8a8880;
  --color-wordmark-bold:    #1a1a16;
  --color-btn-primary-bg:   var(--mp-green-600);
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover:var(--mp-green-500);
  --color-btn-secondary-bg: #ffffff;
  --color-btn-secondary-text:#1a1a16;
  --color-btn-secondary-border:#d0cdc4;
  --color-input-bg:         #ffffff;
  --color-input-border:     #d0cdc4;
  --color-input-border-focus:var(--mp-green-600);
  --color-input-text:       #1a1a16;
  --color-input-placeholder:#8a8880;
  --color-nav-bg:           #ffffff;
  --color-nav-border:       #e0ddd4;
  --color-nav-item:         #8a8880;
  --color-nav-item-active:  #1a1a16;
  --color-card-bg:          #ffffff;
  --color-card-border:      #e0ddd4;
  --color-table-header-bg:  #f0ece3;
  --color-table-row-alt:    #f8f6f2;
  --color-table-border:     #e0ddd4;
  --color-stage-pitch-bg:   #ede8f8;
  --color-stage-pitch-text: #5a3e90;
  --color-stage-pitch-border:#d0c4ec;
  --color-stage-preprod-bg: #e4edf8;
  --color-stage-preprod-text:#2a5090;
  --color-stage-preprod-border:#b8cce8;
  --color-stage-shoot-bg:   #edf4e0;
  --color-stage-shoot-text: #4a7020;
  --color-stage-shoot-border:#c4dcaa;
  --color-stage-post-bg:    #faf0e4;
  --color-stage-post-text:  #8a5020;
  --color-stage-post-border:#f0d0a8;
  --color-stage-delivered-bg:#e0f4f2;
  --color-stage-delivered-text:#1a7068;
  --color-stage-delivered-border:#a8dcd8;
  --color-stage-licensed-bg:#e0f2ea;
  --color-stage-licensed-text:var(--mp-green-600);
  --color-stage-licensed-border:#b0ddc8;
  --color-finance-profit-text:var(--mp-green-600);
  --color-finance-profit-bg:#e0f2ea;
  --color-finance-outstanding-text:#8a5020;
  --color-finance-outstanding-bg:#faf0e4;
  --color-finance-overbudget-text:#8a2020;
  --color-finance-overbudget-bg:#fae8e8;
  --color-cal-bg:           #ffffff;
  --color-cal-border:       #e0ddd4;
  --color-cal-today-bg:     #e0f2ea;
  --color-cal-today-text:   var(--mp-green-600);
  --color-cal-today-border: var(--mp-green-600);
  --color-scrollbar-track:  #f0ece3;
  --color-scrollbar-thumb:  #d0cdc4;
}

/* Force dark regardless of system preference */
.dark {
  color-scheme: dark;
}

/* Force light regardless of system preference */  
.light {
  color-scheme: light;
}


/* --------------------------------------------------------------------------
   TYPOGRAPHY — Google Fonts import
   Remove if self-hosting or if already imported elsewhere
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:wght@300;400;500&family=Playfair+Display:wght@400;500&display=swap');


/* --------------------------------------------------------------------------
   BASE RESET — minimal, non-destructive
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--mp-font-sans);
  font-size: 16px;
  line-height: var(--mp-leading-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--mp-border-strong); }


/* --------------------------------------------------------------------------
   UTILITY CLASSES — typography
   -------------------------------------------------------------------------- */

/* Font families */
.font-mono    { font-family: var(--mp-font-mono); }
.font-sans    { font-family: var(--mp-font-sans); }
.font-display { font-family: var(--mp-font-display); }

/* Weights */
.font-light   { font-weight: var(--mp-weight-light); }
.font-regular { font-weight: var(--mp-weight-regular); }
.font-medium  { font-weight: var(--mp-weight-medium); }

/* Sizes */
.text-xs   { font-size: var(--mp-text-xs); }
.text-sm   { font-size: var(--mp-text-sm); }
.text-base { font-size: var(--mp-text-base); }
.text-md   { font-size: var(--mp-text-md); }
.text-lg   { font-size: var(--mp-text-lg); }
.text-xl   { font-size: var(--mp-text-xl); }
.text-2xl  { font-size: var(--mp-text-2xl); }
.text-3xl  { font-size: var(--mp-text-3xl); }
.text-4xl  { font-size: var(--mp-text-4xl); }
.text-5xl  { font-size: var(--mp-text-5xl); }

/* Tracking */
.tracking-tight   { letter-spacing: var(--mp-tracking-tight); }
.tracking-normal  { letter-spacing: var(--mp-tracking-normal); }
.tracking-wide    { letter-spacing: var(--mp-tracking-wide); }
.tracking-wider   { letter-spacing: var(--mp-tracking-wider); }
.tracking-widest  { letter-spacing: var(--mp-tracking-widest); }
.uppercase        { text-transform: uppercase; }

/* Semantic text colours */
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-dim       { color: var(--color-text-dim); }
.text-accent    { color: var(--color-accent-text); }


/* --------------------------------------------------------------------------
   UTILITY CLASSES — components
   -------------------------------------------------------------------------- */

/* Wordmark */
.mp-wordmark {
  font-family: var(--mp-font-mono);
  font-size: var(--mp-text-xl);
  letter-spacing: var(--mp-tracking-tight);
  line-height: 1;
}
.mp-wordmark .wm-me      { font-weight: var(--mp-weight-light); color: var(--color-wordmark-light); }
.mp-wordmark .wm-produce { font-weight: var(--mp-weight-medium); color: var(--color-wordmark-bold); }

/* Stage pills */
.stage-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--mp-font-mono);
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-medium);
  letter-spacing: var(--mp-tracking-wider);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--mp-radius-sm);
  border: var(--mp-border-width) solid;
  line-height: 1.4;
  white-space: nowrap;
}

.stage-pill--pitch {
  background: var(--color-stage-pitch-bg);
  color: var(--color-stage-pitch-text);
  border-color: var(--color-stage-pitch-border);
}
.stage-pill--preprod {
  background: var(--color-stage-preprod-bg);
  color: var(--color-stage-preprod-text);
  border-color: var(--color-stage-preprod-border);
}
.stage-pill--shoot {
  background: var(--color-stage-shoot-bg);
  color: var(--color-stage-shoot-text);
  border-color: var(--color-stage-shoot-border);
}
.stage-pill--post {
  background: var(--color-stage-post-bg);
  color: var(--color-stage-post-text);
  border-color: var(--color-stage-post-border);
}
.stage-pill--delivered {
  background: var(--color-stage-delivered-bg);
  color: var(--color-stage-delivered-text);
  border-color: var(--color-stage-delivered-border);
}
.stage-pill--licensed {
  background: var(--color-stage-licensed-bg);
  color: var(--color-stage-licensed-text);
  border-color: var(--color-stage-licensed-border);
}

/* Finance pills */
.finance-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--mp-font-mono);
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-medium);
  letter-spacing: var(--mp-tracking-wide);
  padding: 3px 8px;
  border-radius: var(--mp-radius-sm);
  border: var(--mp-border-width) solid;
}
.finance-pill--profit      { background: var(--color-finance-profit-bg); color: var(--color-finance-profit-text); border-color: var(--color-finance-profit-border); }
.finance-pill--outstanding { background: var(--color-finance-outstanding-bg); color: var(--color-finance-outstanding-text); border-color: var(--color-finance-outstanding-border); }
.finance-pill--overbudget  { background: var(--color-finance-overbudget-bg); color: var(--color-finance-overbudget-text); border-color: var(--color-finance-overbudget-border); }
.finance-pill--estimate    { background: var(--color-finance-estimate-bg); color: var(--color-finance-estimate-text); border-color: var(--color-finance-estimate-border); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mp-font-mono);
  font-size: var(--mp-text-sm);
  font-weight: var(--mp-weight-medium);
  letter-spacing: var(--mp-tracking-wide);
  border-radius: var(--mp-radius-sm);
  border: var(--mp-border-width) solid transparent;
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--mp-duration-fast) var(--mp-ease),
              color var(--mp-duration-fast) var(--mp-ease),
              border-color var(--mp-duration-fast) var(--mp-ease);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.btn--primary {
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
}
.btn--primary:hover { background: var(--color-btn-primary-hover); }

.btn--secondary {
  background: var(--color-btn-secondary-bg);
  color: var(--color-btn-secondary-text);
  border-color: var(--color-btn-secondary-border);
}
.btn--secondary:hover { border-color: var(--color-border-strong); }

.btn--ghost {
  background: transparent;
  color: var(--color-btn-ghost-text);
}
.btn--ghost:hover { background: var(--color-btn-ghost-hover-bg); }

.btn--sm { font-size: var(--mp-text-xs); padding: 5px 10px; }
.btn--lg { font-size: var(--mp-text-base); padding: 11px 22px; }

/* Inputs */
.mp-input {
  background: var(--color-input-bg);
  border: var(--mp-border-width) solid var(--color-input-border);
  border-radius: var(--mp-radius-sm);
  color: var(--color-input-text);
  font-family: var(--mp-font-sans);
  font-size: var(--mp-text-base);
  padding: 8px 12px;
  width: 100%;
  transition: border-color var(--mp-duration-fast) var(--mp-ease);
  outline: none;
}
.mp-input::placeholder { color: var(--color-input-placeholder); }
.mp-input:focus { border-color: var(--color-input-border-focus); }

/* Labels */
.mp-label {
  font-family: var(--mp-font-mono);
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-regular);
  letter-spacing: var(--mp-tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-dim);
}

/* Cards */
.mp-card {
  background: var(--color-card-bg);
  border: var(--mp-border-width) solid var(--color-card-border);
  border-radius: var(--mp-radius-md);
  padding: var(--mp-space-4);
  transition: border-color var(--mp-duration-base) var(--mp-ease);
}
.mp-card:hover { border-color: var(--color-card-hover-border); }

/* Mono value display (budgets, dates, codes) */
.mp-mono-value {
  font-family: var(--mp-font-mono);
  font-size: var(--mp-text-sm);
  color: var(--color-text-muted);
  letter-spacing: var(--mp-tracking-wide);
}

/* Section label / eyebrow */
.mp-eyebrow {
  font-family: var(--mp-font-mono);
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-regular);
  letter-spacing: var(--mp-tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: var(--mp-space-3);
}

/* Dividers */
.mp-divider {
  border: none;
  border-top: var(--mp-border-width) solid var(--color-border-subtle);
  margin: var(--mp-space-6) 0;
}

/* Accent rule (used under wordmark, section markers) */
.mp-accent-rule {
  width: 24px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
  margin: var(--mp-space-4) 0;
}