/* ============================================================
   COLOR — RevenueSafe Green + warm cream & ink
   One proprietary vivid emerald built into a role-locked ramp.
   Pick the stop by contrast, not by eye.
   ============================================================ */
:root {
  /* --- RevenueSafe Green ramp (master value = 400 / #11D073) --- */
  --green-50:  #EDF8F2; /* washes, section fills */
  --green-100: #CCF0DE; /* hover fills, tints */
  --green-200: #9EEBC6; /* light accents */
  --green-300: #51ECA1; /* light accents, charts */
  --green-400: #11D073; /* RevenueSafe Green · the mark */
  --green-500: #0DAF61; /* accent, hover */
  --green-600: #099250; /* large text & UI on white */
  --green-700: #067942; /* body & links on white */
  --green-800: #055A31; /* deep accents */
  --green-900: #043E22; /* deepest text */

  /* --- Neutrals: warm paper & ink --- */
  --paper:  #FAF9F6; /* primary background */
  --cream:  #F2F0EB; /* surfaces */
  --line:   #E2DFD8; /* borders */
  --muted:  #4E554B; /* secondary text — darkened for 50+ legibility (~6.8:1 on paper) */
  --ink-2:  #142118; /* elevated ink */
  --ink:    #0C1A0E; /* text */
  --white:  #FFFFFF;

  /* --- The mark --- */
  --brand-green: var(--green-400); /* #11D073 — the only color the mark takes */

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  /* Surfaces & backgrounds */
  --surface-page:    var(--paper);
  --surface-card:    var(--white);
  --surface-sunken:  var(--cream);
  --surface-wash:    var(--green-50);
  --surface-ink:     var(--ink);
  --surface-ink-2:   var(--ink-2);

  /* Text */
  --text-body:       var(--ink);
  --text-muted:      var(--muted);
  --text-on-ink:     var(--paper);
  --text-link:       var(--green-700); /* body & links on white — 5.49:1 */
  --text-link-hover: var(--green-800);
  --text-brand:      var(--green-600); /* large text & UI on white — 4.0:1 */

  /* Borders */
  --border-default:  var(--line);
  --border-strong:   var(--muted);
  --border-brand:    var(--green-400);

  /* Interactive / accent */
  --accent:          var(--green-400);
  --accent-hover:    var(--green-500);
  --accent-active:   var(--green-600);
  --accent-fill:     var(--green-50);
  --accent-fill-hover: var(--green-100);
  --on-accent:       var(--white); /* white on green-700 = 5.49:1 */

  /* Focus ring */
  --focus-ring:      var(--green-400);

  /* ============================================================
     CLIP-CORNER CTA (button shape borrowed from the site build;
     colors stay on the brand-guidelines green ramp above).
     ============================================================ */
  --clip-sm:  8px;   /* small buttons / chips */
  --clip-md: 12px;   /* standard CTAs */
  --clip-lg: 14px;   /* large final CTAs */
  --shadow-glow: 0 8px 24px rgba(17,208,115,0.35); /* lifted CTA glow — green-400 */
}

/* ============================================================
   STATUS / SEMANTIC FEEDBACK — proprietary & palette-harmonious.
   Not off-the-shelf red/amber/blue. Every status shares the warm,
   green-leaning undertone of the paper-and-ink world:
     success = the brand green itself;
     warning = honey ochre (warm gold, never sour yellow);
     danger  = warm terracotta brick (never fire-engine red);
     info    = deep pine-teal — a cousin of the green, not a blue.
   Fills are warm cream-tints that sit beside --cream. All -700 text
   stops clear AA (≥4.5:1) on paper; -50 are quiet fills.
   ============================================================ */
:root {
  --success-50:  #EAF6EF; --success-500: #0DAF61; --success-700: #067942;
  --warning-50:  #F6ECD6; --warning-500: #C98A1E; --warning-700: #7A5310;
  --danger-50:   #F6E7E0; --danger-500:  #C65540; --danger-700:  #9E3322;
  --info-50:     #E6F0EC; --info-500:    #2E7D74; --info-700:    #1E574F;

  --status-success:      var(--success-700);
  --status-success-fill: var(--success-50);
  --status-warning:      var(--warning-700);
  --status-warning-fill: var(--warning-50);
  --status-danger:       var(--danger-700);
  --status-danger-fill:  var(--danger-50);
  --status-info:         var(--info-700);
  --status-info-fill:    var(--info-50);

  /* Form-field states */
  --field-border:        var(--line);
  --field-border-focus:  var(--green-600);
  --field-border-error:  var(--danger-500);
  --field-error-text:    var(--danger-700);
}

/* ============================================================
   DARK THEME — warm ink base, one green, lighter text stops.
   Opt in with <html data-theme="dark"> or class="theme-dark"
   on any container. Semantic aliases are remapped; base ramps
   are unchanged so the brand green stays constant.
   ============================================================ */
:root[data-theme="dark"], .theme-dark {
  --surface-page:   var(--ink);
  --surface-card:   var(--ink-2);
  --surface-sunken: #0A1510;
  --surface-wash:   rgba(17,208,115,0.10);
  --surface-ink:    #050D08;
  --surface-ink-2:  var(--ink-2);

  --text-body:       var(--paper);
  --text-muted:      #9EA89F; /* ~6.2:1 on ink-2 */
  --text-on-ink:     var(--paper);
  --text-link:       var(--green-300);
  --text-link-hover: var(--green-200);
  --text-brand:      var(--green-400);

  --border-default: rgba(226,223,216,0.14);
  --border-strong:  rgba(226,223,216,0.34);
  --border-brand:   var(--green-400);

  --accent:            var(--green-400);
  --accent-hover:      var(--green-300);
  --accent-active:     var(--green-500);
  --accent-fill:       rgba(17,208,115,0.12);
  --accent-fill-hover: rgba(17,208,115,0.20);
  --on-accent:         var(--ink);

  --focus-ring: var(--green-400);

  /* Status: use lighter mid stops for contrast on ink */
  --status-success: var(--success-500);
  --status-warning: #E0A840;
  --status-danger:  #E08A72;
  --status-info:    #5BA79C;
  --status-success-fill: rgba(13,175,97,0.14);
  --status-warning-fill: rgba(201,138,30,0.16);
  --status-danger-fill:  rgba(198,85,64,0.16);
  --status-info-fill:    rgba(46,125,116,0.16);

  --field-border: rgba(226,223,216,0.20);
}