/*
 * Ceetrix Brand Palette
 * 
 * Based on core brand green: #B7E202
 * All neutrals carry a subtle green tint for cohesive brand feeling.
 */

:root {
  /* === Typography === */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* === Core Brand Color === */
  --ceetrix-green: #B7E202;
  --ceetrix-green-rgb: 183, 226, 2;

  /* === Green-Tinted Light Scale (for light mode / light elements) === */
  --ceetrix-50:  #FCFEF5;   /* Near white - subtle green tint */
  --ceetrix-100: #F6FCDA;   /* Very light green */
  --ceetrix-200: #EEFABC;   /* Light green */
  --ceetrix-300: #DDF589;   /* Soft green */
  --ceetrix-400: #CBF056;   /* Medium light */
  --ceetrix-500: #B7E202;   /* Core brand green */

  /* === Green-Tinted Dark Scale (for dark mode / dark elements) === */
  --ceetrix-600: #9AC402;   /* Slightly darker */
  --ceetrix-700: #7DA002;   /* Dark green */
  --ceetrix-800: #5F7A02;   /* Deeper */
  --ceetrix-900: #415401;   /* Very dark green */
  --ceetrix-950: #1F2A01;   /* Near black - dark green tint */

  /* === Semantic Aliases === */
  
  /* Text colors (green-tinted) */
  --text-primary:    #1A2301;   /* Near-black with green tint */
  --text-secondary:  #3D4F0A;   /* Dark green-grey */
  --text-tertiary:   #5C7312;   /* Medium green-grey */
  --text-muted:      #8BA33D;   /* Muted green */
  --text-on-dark:    #F6FCDA;   /* Light text for dark backgrounds */
  --text-on-brand:   #1A2301;   /* Text on brand green */

  /* Background colors (green-tinted) */
  --bg-base:         #FCFEF5;   /* Main background - warm white */
  --bg-subtle:       #F6FCDA;   /* Subtle background */
  --bg-muted:        #EEFABC;   /* Muted sections */
  --bg-dark:         #141A02;   /* Dark mode base */
  --bg-dark-subtle:  #1F2A01;   /* Dark mode elevated */
  --bg-dark-muted:   #2A3802;   /* Dark mode sections */

  /* Border colors (green-tinted) */
  --border-light:    #DDF589;   /* Light borders */
  --border-default:  #CBF056;   /* Default borders */
  --border-strong:   #9AC402;   /* Emphasized borders */
  --border-dark:     #2A3802;   /* Dark mode borders */

  /* Interactive states */
  --interactive:         #B7E202;
  --interactive-hover:   #CBF056;
  --interactive-active:  #9AC402;
  --interactive-focus:   rgba(183, 226, 2, 0.4);

  /* Status colors (green-shifted for harmony) */
  --status-success:  #4ADE80;   /* Success - shifted green */
  --status-warning:  #EAB308;   /* Warning - warm yellow */
  --status-error:    #EF4444;   /* Error - stays red for clarity */
  --status-info:     #7DD3FC;   /* Info - cyan with green harmony */

  /* Positive/Negative (for trading/data interfaces) */
  --positive:        #4ADE80;
  --positive-bg:     rgba(74, 222, 128, 0.15);
  --negative:        #F87171;
  --negative-bg:     rgba(248, 113, 113, 0.15);
}

/* === Base Styles === */
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Dark Mode === */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary:    #F6FCDA;
    --text-secondary:  #DDF589;
    --text-tertiary:   #9AC402;
    --text-muted:      #5F7A02;
    
    --bg-base:         #0D1201;
    --bg-subtle:       #141A02;
    --bg-muted:        #1F2A01;
    
    --border-light:    #2A3802;
    --border-default:  #3D4F0A;
    --border-strong:   #5F7A02;
  }
}

/* === Optional: Manual Dark Mode Class === */
.dark {
  --text-primary:    #F6FCDA;
  --text-secondary:  #DDF589;
  --text-tertiary:   #9AC402;
  --text-muted:      #5F7A02;
  
  --bg-base:         #0D1201;
  --bg-subtle:       #141A02;
  --bg-muted:        #1F2A01;
  
  --border-light:    #2A3802;
  --border-default:  #3D4F0A;
  --border-strong:   #5F7A02;
}

/* === Utility Classes === */

/* Backgrounds */
.bg-base    { background-color: var(--bg-base); }
.bg-subtle  { background-color: var(--bg-subtle); }
.bg-muted   { background-color: var(--bg-muted); }
.bg-brand   { background-color: var(--ceetrix-green); }

/* Text */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-muted     { color: var(--text-muted); }
.text-brand     { color: var(--ceetrix-green); }
.text-on-dark   { color: var(--text-on-dark); }

/* Borders */
.border-light   { border-color: var(--border-light); }
.border-default { border-color: var(--border-default); }
.border-strong  { border-color: var(--border-strong); }

/* Brand scale */
.bg-ceetrix-50  { background-color: var(--ceetrix-50); }
.bg-ceetrix-100 { background-color: var(--ceetrix-100); }
.bg-ceetrix-200 { background-color: var(--ceetrix-200); }
.bg-ceetrix-300 { background-color: var(--ceetrix-300); }
.bg-ceetrix-400 { background-color: var(--ceetrix-400); }
.bg-ceetrix-500 { background-color: var(--ceetrix-500); }
.bg-ceetrix-600 { background-color: var(--ceetrix-600); }
.bg-ceetrix-700 { background-color: var(--ceetrix-700); }
.bg-ceetrix-800 { background-color: var(--ceetrix-800); }
.bg-ceetrix-900 { background-color: var(--ceetrix-900); }
.bg-ceetrix-950 { background-color: var(--ceetrix-950); }

/* === Base Reset with Brand Colors === */
.ceetrix-light {
  background-color: var(--bg-base);
  color: var(--text-primary);
}

.ceetrix-dark {
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
}

/* Focus ring with brand color */
.focus-brand:focus {
  outline: 2px solid var(--interactive-focus);
  outline-offset: 2px;
}

/* Interactive element base */
.btn-brand {
  background-color: var(--ceetrix-green);
  color: var(--text-on-brand);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.btn-brand:hover {
  background-color: var(--interactive-hover);
}

.btn-brand:active {
  background-color: var(--interactive-active);
}

/* Card with green-tinted styling */
.card-brand {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.dark .card-brand {
  background-color: var(--bg-dark-subtle);
  border-color: var(--border-dark);
}