/* ==========================================================================
   MeProduce — Theme Bridge
   theme.css v1.0

   PURPOSE: Maps your existing CSS variable names → new design tokens.
   This lets you adopt tokens.css WITHOUT a mass find-and-replace.

   USAGE:
   1. Link tokens.css first, then theme.css, then your existing styles:
      <link rel="stylesheet" href="tokens.css">
      <link rel="stylesheet" href="theme.css">
      <link rel="stylesheet" href="your-existing-styles.css">  (or inline in index.html)

   2. Scan your existing CSS for hardcoded colour/size values.
      Replace them with the semantic tokens from tokens.css over time.

   3. As you migrate each section, delete that line from here.
      When this file is empty, migration is complete.

   HOW TO USE THIS FILE:
   Find your existing variable names below and update the right-hand
   values to point to the correct MeProduce token. Examples shown.
   ========================================================================== */

:root {

  /* -------------------------------------------------------------------------
     REPLACE THESE with your actual existing variable names.
     Pattern: --your-old-name: var(--new-mp-token);
     
     Common mappings to get you started — edit to match your codebase:
     ------------------------------------------------------------------------- */

  /* Backgrounds — update left side to match your existing names */
  /* --background:          var(--color-bg-base); */
  /* --bg-primary:          var(--color-bg-base); */
  /* --bg-card:             var(--color-bg-elevated); */
  /* --bg-input:            var(--color-input-bg); */
  /* --surface:             var(--color-bg-surface); */

  /* Text — update left side to match your existing names */
  /* --text-primary:        var(--color-text-primary); */
  /* --text-secondary:      var(--color-text-secondary); */
  /* --text-muted:          var(--color-text-muted); */
  /* --foreground:          var(--color-text-primary); */

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

  /* Accent / brand */
  /* --accent:              var(--color-accent); */
  /* --primary:             var(--color-accent); */
  /* --brand:               var(--color-accent); */
  /* --highlight:           var(--color-accent); */

  /* Buttons */
  /* --btn-bg:              var(--color-btn-primary-bg); */
  /* --btn-text:            var(--color-btn-primary-text); */

  /* -------------------------------------------------------------------------
     JOB STAGE COLOURS
     If you have existing stage colour variables, map them here.
     ------------------------------------------------------------------------- */

  /* --stage-pitch:         var(--color-stage-pitch-text); */
  /* --stage-pitch-bg:      var(--color-stage-pitch-bg); */
  /* --stage-preprod:       var(--color-stage-preprod-text); */
  /* --stage-shoot:         var(--color-stage-shoot-text); */
  /* --stage-post:          var(--color-stage-post-text); */
  /* --stage-delivered:     var(--color-stage-delivered-text); */
  /* --stage-licensed:      var(--color-stage-licensed-text); */

  /* -------------------------------------------------------------------------
     HARDCODED VALUES TO MIGRATE
     As you find raw hex values in your CSS, move them here first,
     then replace with tokens in the next pass.

     Examples:
     --old-green:           var(--mp-green-600);
     --old-dark:            var(--color-bg-base);
     ------------------------------------------------------------------------- */

}


/* ==========================================================================
   MIGRATION GUIDE FOR CLAUDE CODE
   
   When asking Claude Code to migrate your existing styles, use this prompt:
   
   "Review the CSS in index.html. For each colour value, spacing value, 
   or typography value you find, replace it with the corresponding 
   CSS custom property from tokens.css. Use semantic tokens 
   (--color-*, --mp-space-*, --mp-text-*) rather than primitive tokens 
   (--mp-green-*, --mp-surface-*) wherever possible. Do not change 
   layout or structure, only replace raw values with variables."
   
   Run this section by section — nav first, then cards, then forms, etc.
   ========================================================================== */


/* ==========================================================================
   QUICK REFERENCE — most-used tokens
   
   COLOURS
   Background:   var(--color-bg-base)          #0e0e0c dark / #f5f2ec light
   Surface:      var(--color-bg-surface)        #141412 dark / #ffffff light
   Elevated:     var(--color-bg-elevated)       #191917 dark / #f0ece3 light
   Border:       var(--color-border)            #2a2a24 dark / #d0cdc4 light
   Text:         var(--color-text-primary)      #f0ece3 dark / #1a1a16 light
   Text muted:   var(--color-text-muted)        #6a6860 dark / #6a6860 light
   Accent:       var(--color-accent)            #3d9e72

   STAGE PILLS — HTML pattern:
   <span class="stage-pill stage-pill--pitch">Pitch</span>
   <span class="stage-pill stage-pill--preprod">Pre-production</span>
   <span class="stage-pill stage-pill--shoot">Shoot</span>
   <span class="stage-pill stage-pill--post">Post</span>
   <span class="stage-pill stage-pill--delivered">Delivered</span>
   <span class="stage-pill stage-pill--licensed">Licensed</span>

   BUTTONS — HTML pattern:
   <button class="btn btn--primary">Start free trial</button>
   <button class="btn btn--secondary">See how it works</button>
   <button class="btn btn--ghost">Cancel</button>

   WORDMARK — HTML pattern:
   <span class="mp-wordmark"><span class="wm-me">me</span><span class="wm-produce">produce</span></span>

   TYPOGRAPHY
   Mono:    font-family: var(--mp-font-mono)    — labels, metadata, nav, finance
   Sans:    font-family: var(--mp-font-sans)    — body, forms, task copy
   Display: font-family: var(--mp-font-display) — marketing headlines only

   SPACING
   4px  var(--mp-space-1)    8px  var(--mp-space-2)    12px var(--mp-space-3)
   16px var(--mp-space-4)   20px var(--mp-space-5)    24px var(--mp-space-6)
   32px var(--mp-space-8)   40px var(--mp-space-10)   48px var(--mp-space-12)

   DARK/LIGHT TOGGLE — JS pattern:
   const toggle = () => document.documentElement.classList.toggle('light');
   ========================================================================== */