/* All brand colors as CSS variables. Never use hex values outside this file. */

:root {
  /* Surfaces */
  --color-bg:           #FFFFFF;
  --color-surface:      #F4FAF4;
  --color-surface-alt:  #EBF5EB;

  /* Borders */
  --color-border:       #C8E0C8;
  --color-border-light: #E0EEE0;

  /* Brand green */
  --color-primary:       #2E7D32;
  --color-primary-dark:  #1B5E20;
  --color-primary-light: #E8F5E9;
  --color-primary-muted: #A5D6A7;

  /* Text */
  --color-text-heading:     #111B11;
  --color-text-body:        #2C3E2C;
  --color-text-muted:       #607060;
  --color-text-on-primary:  #FFFFFF;

  /* Semantic */
  --color-link:       #2E7D32;
  --color-link-hover: #1B5E20;
  --color-verified:   #2E7D32;
  --color-success:    #388E3C;
  --color-error:      #C62828;
  --color-warning:    #F57F17;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* Shape */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* Motion */
  --transition: 200ms ease;
}

[data-theme="dark"] {
  /* Surfaces */
  --color-bg:           #0C160C;
  --color-surface:      #142014;
  --color-surface-alt:  #1A2C1A;

  /* Borders */
  --color-border:       #2A402A;
  --color-border-light: #223222;

  /* Brand green — lighter for dark backgrounds */
  --color-primary:       #66BB6A;
  --color-primary-dark:  #81C784;
  --color-primary-light: #1A3A1A;
  --color-primary-muted: #2E5E2E;

  /* Text */
  --color-text-heading:     #ECF5EC;
  --color-text-body:        #C8DCC8;
  --color-text-muted:       #7A9A7A;
  --color-text-on-primary:  #0C160C;

  /* Semantic */
  --color-link:       #66BB6A;
  --color-link-hover: #81C784;
  --color-verified:   #81C784;
  --color-success:    #66BB6A;
  --color-error:      #EF5350;
  --color-warning:    #FFB300;

  /* Shadows — stronger on dark */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.50);
}