/* Yıldız Ecza Deposu — site genelindeki tek renk kaynağı. */
:root {
  --color-white: #FFFFFF;
  --color-black: #000000;

  --green-50: #F4FAF6;
  --green-100: #E6F3EA;
  --green-200: #CDE7D5;
  --green-300: #A7D8B7;
  --green-400: #7FC294;
  --green-500: #58A972;
  --green-600: #3E8758;
  --green-700: #306A46;
  --green-800: #234D35;
  --green-900: #173426;
  --green-950: #0D1F17;

  /* Rezerve: yalnızca kullanıcının açıkça belirttiği alanlarda kullanılabilir. */
  --orange-50: #FFF4E8;
  --orange-100: #FED9B1;
  --orange-300: #FCBB76;
  --orange-600: #D9873F;

  --color-text-body: #5F6F65;
  --color-primary: var(--green-300);
  --color-primary-hover: var(--green-400);
  --color-primary-active: var(--green-500);
  /* More saturated brand green for transient highlights on dark surfaces. */
  --color-heading-reveal-on-dark: #78F0A5;
  --color-heading-reveal: var(--color-primary);
  --color-heading: var(--green-900);
  --color-text: var(--color-text-body);
  --color-dark: var(--green-950);
  --color-dark-panel: color-mix(in srgb, var(--color-dark) 80%, var(--color-black));
  --color-accent: var(--orange-300);
  --color-accent-hover: var(--orange-600);
  --color-background: var(--color-white);
  --color-background-soft: var(--green-50);
  --color-background-muted: var(--green-100);
  --color-product-media: #E7E9E8;
  --color-product-media-hover: #DDE1DF;
  --color-product-shadow: color-mix(in srgb, var(--color-dark) 9%, transparent);
  --color-product-shadow-hover: color-mix(in srgb, var(--color-dark) 18%, transparent);
  --color-border: color-mix(in srgb, var(--green-800) 16%, transparent);
  --color-about-divider: color-mix(in srgb, var(--color-dark) 25%, transparent);
  --color-uts-divider: color-mix(in srgb, var(--color-black) 5%, transparent);
  --color-order-line: color-mix(in srgb, var(--color-text) 25%, transparent);
  --color-order-icon-background: color-mix(in srgb, var(--green-700) 10%, transparent);
  --color-on-dark: var(--color-white);
  --color-on-dark-muted: color-mix(in srgb, var(--color-white) 75%, transparent);
  --color-link-hover-on-dark: var(--color-primary);
  --color-footer-text: color-mix(in srgb, var(--color-white) 50%, transparent);
  --color-footer-divider: color-mix(in srgb, var(--color-white) 20%, transparent);
  --color-footer-legal: var(--color-footer-text);
  --color-footer-brand-muted: var(--color-footer-text);
  --color-footer-card: color-mix(in srgb, var(--color-dark) 92%, var(--color-white));
  --color-footer-card-hover: color-mix(in srgb, var(--color-dark) 88%, var(--color-white));
  --color-focus: var(--green-700);
  --color-header-control: color-mix(in srgb, var(--green-700) 20%, transparent);
  --color-header-control-hover: color-mix(in srgb, var(--green-700) 30%, transparent);
  --color-header-control-on-light: var(--green-700);
  --color-header-control-hover-on-light: var(--color-accent);
  --color-header-separator-on-light: color-mix(in srgb, var(--color-dark) 20%, transparent);
  --color-header-control-compact: color-mix(in srgb, var(--green-600) 20%, transparent);
  --color-header-control-compact-hover: color-mix(in srgb, var(--green-600) 30%, transparent);
  --color-header-control-expanded: color-mix(in srgb, var(--green-600) 20%, transparent);
  --color-header-control-expanded-hover: color-mix(in srgb, var(--green-600) 30%, transparent);
  --color-header-navigation-hover: color-mix(in srgb, var(--color-text-body) 20%, transparent);
  --color-header-navigation-hover-on-dark: color-mix(in srgb, var(--color-white) 18%, transparent);
  --color-header-navigation-hover-expanded: color-mix(in srgb, var(--color-white) 28%, transparent);
  --color-header-separator: color-mix(in srgb, var(--color-white) 20%, transparent);
  --color-hero-overlay: color-mix(in srgb, var(--color-black) 35%, transparent);
  --color-hero-progress-light: color-mix(in srgb, var(--color-primary) 85%, var(--color-white));
  --color-button-comet-head: var(--color-heading-reveal-on-dark);
  --color-button-comet-tail: color-mix(in srgb, var(--color-white) 90%, var(--color-primary));
  --color-hero-card-surface: color-mix(in srgb, var(--color-white) 10%, transparent);
  --color-hero-card-surface-hover: var(--color-hero-card-surface);
  --heading-on-surface: var(--color-heading);
  --text-on-surface: var(--color-text);
}