/**
 * @file color.css
 * Color custom properties for VG27 theme.
 *
 * Naming: --vg-{kleur}-d{n} = darker, --vg-{kleur}-l{n} = lighter
 * Groen = primary, Goud = secondary, Zwart = text
 * Background tinten: bg-0 (lightest) to bg-10 (darkest)
 *
 * Light mode = :root defaults
 * Dark mode = .vg27-dark overrides
 */

/* ============================================================
   LIGHT MODE (default)
   ============================================================ */
:root {
  /* --- Blauw --- */
  --vg-blauw-d60: #2c4f68;
  --vg-blauw-d40: #3c6684;
  --vg-blauw-d20: #4a7ea4;
  --vg-blauw: #5693bf;
  --vg-blauw-l20: #7aaacd;
  --vg-blauw-l40: #97bcd8;
  --vg-blauw-l60: #b7d1e4;
  --vg-blauw-l80: #e1ecf4;

  /* --- Rood --- */
  --vg-rood-d60: #6b2913;
  --vg-rood-d40: #843318;
  --vg-rood-d20: #a23f1d;
  --vg-rood: #bf4a22;
  --vg-rood-l20: #d95427;
  --vg-rood-l40: #e07753;
  --vg-rood-l60: #e8997e;
  --vg-rood-l80: #f0bcab;

  /* --- Zwart (tekst) --- */
  --vg-zwart-d80: #171419;
  --vg-zwart-d60: #2a252e;
  --vg-zwart-d40: #352f3b;
  --vg-zwart-d20: #4b4353;
  --vg-zwart: #655b70;
  --vg-zwart-l20: #7f728d;
  --vg-zwart-l40: #988ea4;
  --vg-zwart-l60: #b2abba;
  --vg-zwart-l80: #ccc7d1;

  /* --- Groen (primair) --- */
  --vg-groen-d80: #455125;
  --vg-groen-d60: #607134;
  --vg-groen-d40: #73883f;
  --vg-groen-d20: #859e49;
  --vg-groen: #9cba56;
  --vg-groen-l20: #b3ca7d;
  --vg-groen-l40: #c4d69b;
  --vg-groen-l60: #d5e2b8;
  --vg-groen-l80: #e6eed5;

  /* --- Goud (secundair) --- */
  --vg-goud-d80: #554c32;
  --vg-goud-d60: #706342;
  --vg-goud-d40: #8b7a52;
  --vg-goud-d20: #a38f60;
  --vg-goud: #bfa871;
  --vg-goud-l20: #d3c39c;
  --vg-goud-l40: #e0d4b9;
  --vg-goud-l60: #ebe4d3;
  --vg-goud-l80: #f4efe3;

  /* --- Background tinten --- */
  --vg-bg-0: #f5f9f3;
  --vg-bg-1: #f1f5ef;
  --vg-bg-2: #e2e4de;
  --vg-bg-3: #ced2c6;
  --vg-bg-4: #b1afa2;
  --vg-bg-5: #9a998d;
  --vg-bg-6: #838277;
  --vg-bg-7: #717065;
  --vg-bg-8: #4d4c43;
  --vg-bg-9: #3c3a2a;
  --vg-bg-10: #0d0c06;

  /* --- Semantic aliases (light mode) --- */
  --vg-color-primary: var(--vg-groen);
  --vg-color-secondary: var(--vg-goud);
  --vg-color-accent: var(--vg-rood);
  --vg-color-text: var(--vg-zwart-d40);
  --vg-color-text-muted: var(--vg-zwart);
  --vg-color-heading: var(--vg-zwart-d60);
  --vg-color-link: var(--vg-groen-d20);
  --vg-color-link-hover: var(--vg-groen-d40);
  --vg-color-bg: var(--vg-bg-0);
  --vg-color-bg-alt: var(--vg-bg-1);
  --vg-color-border: var(--vg-bg-2);
  --vg-color-surface: #fefefe;
}

/* Display P3 wide gamut (light mode) */
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --vg-blauw-d60: color(display-p3 0.173 0.31 0.41);
    --vg-blauw-d40: color(display-p3 0.234 0.399 0.519);
    --vg-blauw-d20: color(display-p3 0.29 0.495 0.643);
    --vg-blauw: color(display-p3 0.337 0.576 0.749);
    --vg-blauw-l20: color(display-p3 0.48 0.668 0.803);
    --vg-blauw-l40: color(display-p3 0.592 0.739 0.845);
    --vg-blauw-l60: color(display-p3 0.716 0.819 0.893);
    --vg-blauw-l80: color(display-p3 0.884 0.926 0.956);

    --vg-rood-d60: color(display-p3 0.42 0.162 0.076);
    --vg-rood-d40: color(display-p3 0.518 0.201 0.093);
    --vg-rood-d20: color(display-p3 0.635 0.246 0.113);
    --vg-rood: color(display-p3 0.749 0.29 0.133);
    --vg-rood-l20: color(display-p3 0.849 0.33 0.153);
    --vg-rood-l40: color(display-p3 0.88 0.467 0.326);
    --vg-rood-l60: color(display-p3 0.91 0.601 0.495);
    --vg-rood-l80: color(display-p3 0.941 0.738 0.669);

    --vg-zwart-d80: color(display-p3 0.09 0.08 0.099);
    --vg-zwart-d60: color(display-p3 0.163 0.144 0.181);
    --vg-zwart-d40: color(display-p3 0.207 0.185 0.229);
    --vg-zwart-d20: color(display-p3 0.293 0.264 0.325);
    --vg-zwart: color(display-p3 0.396 0.357 0.439);
    --vg-zwart-l20: color(display-p3 0.498 0.448 0.552);
    --vg-zwart-l40: color(display-p3 0.598 0.559 0.641);
    --vg-zwart-l60: color(display-p3 0.699 0.669 0.731);
    --vg-zwart-l80: color(display-p3 0.799 0.779 0.821);

    --vg-groen-d80: color(display-p3 0.271 0.319 0.147);
    --vg-groen-d60: color(display-p3 0.375 0.444 0.206);
    --vg-groen-d40: color(display-p3 0.451 0.535 0.247);
    --vg-groen-d20: color(display-p3 0.521 0.621 0.287);
    --vg-groen: color(display-p3 0.612 0.729 0.337);
    --vg-groen-l20: color(display-p3 0.702 0.792 0.491);
    --vg-groen-l40: color(display-p3 0.769 0.839 0.606);
    --vg-groen-l60: color(display-p3 0.836 0.886 0.72);
    --vg-groen-l80: color(display-p3 0.904 0.933 0.836);

    --vg-goud-d80: color(display-p3 0.335 0.296 0.197);
    --vg-goud-d60: color(display-p3 0.44 0.387 0.26);
    --vg-goud-d40: color(display-p3 0.544 0.478 0.321);
    --vg-goud-d20: color(display-p3 0.639 0.562 0.378);
    --vg-goud: color(display-p3 0.749 0.659 0.443);
    --vg-goud-l20: color(display-p3 0.826 0.763 0.614);
    --vg-goud-l40: color(display-p3 0.877 0.832 0.726);
    --vg-goud-l60: color(display-p3 0.923 0.895 0.828);
    --vg-goud-l80: color(display-p3 0.955 0.935 0.889);

    --vg-bg-0: color(display-p3 0.96 0.976 0.952);
    --vg-bg-1: color(display-p3 0.945 0.961 0.937);
    --vg-bg-2: color(display-p3 0.886 0.894 0.871);
    --vg-bg-3: color(display-p3 0.808 0.824 0.776);
    --vg-bg-4: color(display-p3 0.694 0.686 0.635);
    --vg-bg-5: color(display-p3 0.605 0.598 0.554);
    --vg-bg-6: color(display-p3 0.515 0.508 0.465);
    --vg-bg-7: color(display-p3 0.444 0.438 0.394);
    --vg-bg-8: color(display-p3 0.301 0.298 0.264);
    --vg-bg-9: color(display-p3 0.234 0.228 0.164);
    --vg-bg-10: color(display-p3 0.05 0.048 0.024);
  }
}

/* ============================================================
   DARK MODE
   Swap semantic aliases; base palette stays the same.
   ============================================================ */
.vg27-dark {
  --vg-color-text: var(--vg-bg-1);
  --vg-color-text-muted: var(--vg-bg-3);
  --vg-color-heading: var(--vg-bg-0);
  --vg-color-link: var(--vg-groen-l20);
  --vg-color-link-hover: var(--vg-groen-l40);
  --vg-color-bg: var(--vg-bg-9);
  --vg-color-bg-alt: var(--vg-bg-8);
  --vg-color-border: var(--vg-bg-7);
  --vg-color-surface: var(--vg-bg-10);
}