/**
 * @file
 * Color definitions and color-related styles.
 * Palette extracted from logo with optical weight principles.
 */

:root {
  /* Primary greens - from lightest to darkest */
  --color-green-light: #5d8a5e;      /* bluzka - dla dużych nagłówków */
  --color-green-medium: #4a6b4d;     /* pośredni */
  --color-green-dark: #324f35;       /* tło strony */
  --color-green-darker: #243824;     /* hover, akcenty */

  /* Legacy aliases */
  --color-primary: #324f35;
  --color-primary-dark: #243824;
  --color-primary-light: #5d8a5e;

  /* Accent colors from logo */
  --color-accent-yellow: #e6a832;
  --color-accent-blue-light: #7fb3d3;
  --color-accent-blue-dark: #2d5a7b;
  --color-accent-coral: #d35d4a;
  --color-accent-beige: #e8c9a0;
  --color-accent-gray: #5a5a5a;

  /* Background colors */
  --color-bg-page: #f5f0e8;           /* ciepły kremowy */
  --color-bg-block: #ffffff;

  /* Text colors - optical weight hierarchy */
  --color-text-heading-large: #5d8a5e;   /* h1, h2 - jaśniejszy, mniejszy kontrast */
  --color-text-heading-medium: #4a6b4d;  /* h3, h4 - średni */
  --color-text-heading-small: #324f35;   /* h5, h6 - ciemniejszy, większy kontrast */
  --color-text-primary: #333333;          /* body text - maksymalna czytelność */
  --color-text-secondary: #555555;        /* secondary text */
  --color-text-light: #ffffff;
  --color-text-muted: #888888;

  /* Link colors */
  --color-link: #4a6b4d;
  --color-link-hover: #324f35;

  /* Border colors */
  --color-border: #d0d0d0;
  --color-border-light: #e8e8e8;
  --color-border-accent: #5d8a5e;

  /* Shadow */
  --shadow-soft: 0 2px 12px rgba(50, 79, 53, 0.12);
  --shadow-medium: 0 4px 20px rgba(50, 79, 53, 0.18);
}

/* Background application */
body {
  background-color: var(--color-bg-page);
  background-image: url('../images/pattern-notebook.svg');
  background-repeat: repeat;
  background-size: 100px 32px;
}

.block {
  background-color: var(--color-bg-block);
}

/* Text colors */
body {
  color: var(--color-text-primary);
}

a {
  color: var(--color-link);
}

a:hover,
a:focus {
  color: var(--color-link-hover);
}