/*
 * 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 (75% saturation reduction) === */
  --ceetrix-green: #939E5C;
  --ceetrix-green-rgb: 147, 158, 92;

  /* === Green-Tinted Light Scale (75% saturation reduction) === */
  --ceetrix-25:  #FEFEFD;   /* Near white - barely perceptible tint */
  --ceetrix-50:  #FCFDFA;   /* Near white - very subtle tint */
  --ceetrix-100: #F6F8ED;   /* Very light sage */
  --ceetrix-200: #EEF2DC;   /* Light sage */
  --ceetrix-300: #D9E4BE;   /* Soft sage */
  --ceetrix-400: #C4D69A;   /* Medium light */
  --ceetrix-500: #939E5C;   /* Core brand (attenuated) */

  /* === Green-Tinted Dark Scale (75% saturation reduction) === */
  --ceetrix-600: #858F52;   /* Slightly darker */
  --ceetrix-700: #727C47;   /* Dark olive */
  --ceetrix-800: #5B623A;   /* Deeper */
  --ceetrix-900: #44482D;   /* Very dark olive */
  --ceetrix-950: #25261C;   /* Near black - subtle olive tint */

  /* === Semantic Aliases (75% saturation reduction) === */

  /* Text colors (attenuated tint) */
  --text-primary:    #202215;   /* Near-black with subtle tint */
  --text-secondary:  #454A2F;   /* Dark olive-grey */
  --text-tertiary:   #606842;   /* Medium olive-grey */
  --text-muted:      #8A9468;   /* Muted olive */
  --text-on-dark:    #F6F8ED;   /* Light text for dark backgrounds */
  --text-on-brand:   #202215;   /* Text on brand color */

  /* Background colors (attenuated tint) */
  --bg-base:         #FCFDFA;   /* Main background - warm white */
  --bg-subtle:       #F6F8ED;   /* Subtle background */
  --bg-muted:        #EEF2DC;   /* Muted sections */
  --bg-dark:         #191A16;   /* Dark mode base */
  --bg-dark-subtle:  #25261C;   /* Dark mode elevated */
  --bg-dark-muted:   #303224;   /* Dark mode sections */

  /* Border colors (attenuated tint) */
  --border-light:    #D9E4BE;   /* Light borders */
  --border-default:  #C4D69A;   /* Default borders */
  --border-strong:   #858F52;   /* Emphasized borders */
  --border-dark:     #303224;   /* Dark mode borders */

  /* Interactive states (attenuated) */
  --interactive:         #939E5C;
  --interactive-hover:   #C4D69A;
  --interactive-active:  #858F52;
  --interactive-focus:   rgba(147, 158, 92, 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);

  /* RGB values for transparency calculations */
  --negative-rgb:        248, 113, 113;
  --status-success-rgb:  74, 222, 128;
  --status-warning-rgb:  234, 179, 8;
  --status-error-rgb:    239, 68, 68;

  /* === Spacing Scale === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  /* === Border Radius Scale === */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* === Shadow Scale === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

  /* === Typography Scale === */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* === Z-Index Scale === */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-modal-backdrop: 200;
  --z-modal: 210;
  --z-toast: 300;

  /* === Transition Scale === */
  --duration-fast: 100ms;
  --duration-normal: 150ms;
  --duration-slow: 200ms;
  --easing-default: ease;
  --easing-out: ease-out;
  --easing-in-out: ease-in-out;
}

/* === Base Styles === */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-base);
  color: var(--text-primary);
}

#root {
  width: 100%;
  height: 100%;
}

/* === Dark Mode (75% saturation reduction) === */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary:    #F6F8ED;
    --text-secondary:  #D9E4BE;
    --text-tertiary:   #858F52;
    --text-muted:      #5B623A;

    --bg-base:         #141512;
    --bg-subtle:       #191A16;
    --bg-muted:        #25261C;

    --border-light:    #303224;
    --border-default:  #454A2F;
    --border-strong:   #5B623A;
  }
}

/* === Optional: Manual Dark Mode Class (75% saturation reduction) === */
.dark {
  --text-primary:    #F6F8ED;
  --text-secondary:  #D9E4BE;
  --text-tertiary:   #858F52;
  --text-muted:      #5B623A;

  --bg-base:         #141512;
  --bg-subtle:       #191A16;
  --bg-muted:        #25261C;

  --border-light:    #303224;
  --border-default:  #454A2F;
  --border-strong:   #5B623A;
}

/* === 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-25  { background-color: var(--ceetrix-25); }
.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);
}

/* === View Transitions === */
@view-transition {
  navigation: auto;
}

::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 200ms;
  animation-timing-function: ease-out;
}

/* Smooth height transitions for sections */
::view-transition-group(*) {
  animation-duration: 200ms;
}

/* === Editor Styles === */
.prose-editor {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
}

.prose-editor p {
  margin: 0 0 0.75em;
}

.prose-editor h1, .prose-editor h2, .prose-editor h3 {
  font-weight: 600;
  margin: 1em 0 0.5em;
}

.prose-editor h2 {
  font-size: 1.25em;
}

.prose-editor code {
  background-color: var(--bg-muted);
  padding: 0.125em 0.25em;
  border-radius: 0.25em;
  font-size: 0.875em;
}

.prose-editor pre {
  background-color: var(--bg-muted);
  padding: 1em;
  border-radius: 0.5em;
  overflow-x: auto;
}

.prose-editor ul, .prose-editor ol {
  padding-left: 1.5em;
  margin: 0.5em 0;
}

.prose-editor li {
  margin: 0.25em 0;
}

/* === Navigation Highlight Animation (Story 234) === */
.highlighted {
  animation: highlight-pulse 2s ease-out;
}

@keyframes highlight-pulse {
  0% { background-color: var(--ceetrix-green); }
  100% { background-color: transparent; }
}

/* For elements that need to preserve their bg color after highlight */
.highlighted-preserve {
  animation: highlight-pulse-preserve 2s ease-out;
}

@keyframes highlight-pulse-preserve {
  0%, 10% { background-color: var(--ceetrix-300); }
  100% { background-color: inherit; }
}