// =============================================================================
// CashSDK — Brand color scheme  (Greenhouse-inspired jade + evergreen)
// -----------------------------------------------------------------------------
// The single source of truth for CashSDK color. The system is a green-mono
// palette in the spirit of Greenhouse's brand (brand.greenhouse.com): a jade
// GREEN signature, a deep EVERGREEN for dark surfaces, light tints for washes,
// and a warm neutral GROUND. Use greens most; the jade draws attention.
//
//   • Greenhouse Green (signature / primary)  #24A47F
//   • GH Green deep (hover / pressed)          #008561
//   • Evergreen (dark surfaces, ink, "Cash")   #15372C
//   • Evergreen deep (gradient base)           #031C17
//   • Ground (warm neutral background)         #EFEFEF
//   • Paper                                    #FFFFFF
//
// PRIMARY = the jade green (#24A47F). Do NOT reintroduce the former bright green
// (#28CC59), the old dark-green (#094628), or any blue/indigo as a brand color.
//
// These tokens mirror the Tailwind `brand` + `evergreen` scales in
// `packages/tailwind-config/tailwind.config.ts` and the CSS variables in
// `apps/assets/app/globals.css`. Keep them in sync. Full brand system docs:
// `docs/greenhouse/`.
// =============================================================================

// --- Core brand ---------------------------------------------------------------
$brand:        #24a47f; // Greenhouse Green — primary / accent / selection
$brand-hover:  #008561; // deep — pressed & hover (== $brand-600)
$evergreen:    #15372c; // deep forest — dark UI, wordmark "Cash", tile
$paper:        #ffffff; // "Cash" on dark; glyph on a brand/dark ground
$ground:       #efefef; // warm neutral background

// --- Brand green ramp (50 → 950): light mint → jade → evergreen ---------------
$brand-50:   #edfbf6;
$brand-100:  #d3f4ea;
$brand-200:  #a8e7d5;
$brand-300:  #74d5bb;
$brand-400:  #4cb398; // GH Green (light)
$brand-500:  #24a47f; // ← the jade — Greenhouse Green
$brand-600:  #008561; // ← deep — hover / pressed
$brand-700:  #0a6b51;
$brand-800:  #12503d;
$brand-900:  #15372c; // ← Evergreen
$brand-950:  #08201a;

// --- Evergreen (dark forest) --------------------------------------------------
$evergreen-default: #15372c;
$evergreen-deep:    #031c17;

// --- Ink / neutral surfaces ---------------------------------------------------
// Ink is now Evergreen (a very dark green), not a cool gray — the tile and
// dark type read as deep forest, matching the Greenhouse system.
$ink:        #15372c;
$neutral-0:    #ffffff;
$neutral-50:   #fafafa;
$neutral-100:  #f5f5f5;
$neutral-200:  #e5e5e5;
$neutral-500:  #737373;
$neutral-900:  #171717;
$neutral-950:  #0a0a0c;

// --- Semantic tokens ----------------------------------------------------------
// `on-brand` is the readable foreground for text/icons on a solid jade fill:
// dark ink (~6:1). White on #24A47F is ~3.1:1 (sub-AA) — reserve white for the
// deeper greens (brand-700+/evergreen), where it clears AA.
$primary:        $brand-500;
$primary-hover:  $brand-600;
$on-primary:     $evergreen;   // dark text/icon on a jade fill
$on-evergreen:   $paper;       // white text on evergreen / deep-green fills
$link:           $brand-600;   // links / inline emphasis on light backgrounds
$focus-ring:     rgba(36, 164, 127, 0.3); // $brand-500 @ 30%
$selection:      rgba(36, 164, 127, 0.22);

// Status colors are independent of the brand hue.
$success:  #16a34a;
$warning:  #ca8a04;
$danger:   #dc2626;

// --- Greenhouse accent palette (use sparingly, one theme at a time) -----------
// Not brand colors; documented so product surfaces can borrow a warm accent.
$marigold: #ffa52e; // warm orange
$zinnia:   #ff6519; // coral
$poppy:    #d8372a; // red
$iris:     #3574d6; // blue

// --- CSS custom properties ----------------------------------------------------
// Emit runtime variables so non-Sass surfaces (React inline styles, email,
// vanilla CSS) can consume the exact same values.
:root {
  --brand: #{$brand};
  --brand-hover: #{$brand-hover};
  --evergreen: #{$evergreen};
  --evergreen-deep: #{$evergreen-deep};
  --ground: #{$ground};
  --paper: #{$paper};
  --ink: #{$ink};

  --brand-50: #{$brand-50};
  --brand-100: #{$brand-100};
  --brand-200: #{$brand-200};
  --brand-300: #{$brand-300};
  --brand-400: #{$brand-400};
  --brand-500: #{$brand-500};
  --brand-600: #{$brand-600};
  --brand-700: #{$brand-700};
  --brand-800: #{$brand-800};
  --brand-900: #{$brand-900};
  --brand-950: #{$brand-950};

  --primary: #{$primary};
  --primary-hover: #{$primary-hover};
  --on-primary: #{$on-primary};
  --on-evergreen: #{$on-evergreen};
  --link: #{$link};
  --focus-ring: #{$focus-ring};
}