/* ================================================
   CREATIONS INSTITUTE — Brand Tokens 2026
   ⚠️  Edit colors HERE only. Do not hardcode
   hex values anywhere else in the project.
   ================================================ */

:root {

  /* --- Core Palette --- */
  --color-ocean-blue:  #004699;
  --color-purple:      #694BFF;
  --color-sky-blue:    #08DEFF;
  --color-magenta:     #FF7AFF;
  --color-sand-white:  #EBFAFC;
  --color-peach:       #F3D2B1;
  --color-black:       #000000;
  --color-white:       #FFFFFF;
  --color-muted:       #636363;

  /* --- Semantic Roles (change these to retheme the site) --- */
  --brand-primary:          var(--color-ocean-blue);
  --brand-secondary:        var(--color-purple);
  --brand-accent:           var(--color-sky-blue);
  --brand-highlight:        var(--color-magenta);
  --brand-bg:               var(--color-sand-white);
  --brand-surface:          var(--color-peach);
  --brand-text-on-dark:     var(--color-sand-white);
  --brand-text-on-light:    var(--color-black);

  /* --- Gradient --- */
  --brand-gradient: linear-gradient(
    135deg,
    var(--color-ocean-blue) 0%,
    var(--color-purple)     50%,
    var(--color-sky-blue)   100%
  );

  /* --- Focus / Glow --- */
  --brand-focus-glow: 0 0 0 3px rgba(8, 222, 255, 0.2);

  /* --- WoodMart overrides (Creations Brand 2026) --- */
  --wd-main-bgcolor:        var(--brand-bg);
  --color-white:            var(--color-white);
  --color-gray-100:         var(--color-sand-white);
  --color-gray-200:         var(--color-sand-white);
  --color-gray-300:         var(--color-muted);
  --color-gray-400:         var(--color-muted);
  --color-gray-500:         var(--brand-text-on-light);
  --color-gray-600:         var(--brand-text-on-light);
  --color-gray-700:         var(--brand-text-on-light);
  --color-gray-800:         var(--brand-text-on-light);
  --color-gray-900:         var(--brand-text-on-light);
  --bgcolor-white:          var(--color-white);
  --bgcolor-gray-100:       var(--brand-bg);
  --bgcolor-gray-200:       var(--brand-bg);
  --bgcolor-gray-300:       var(--brand-surface);
}

/* --- Logo color rules (Creations Brand 2026) --- */
/* Dark background → logo: sand-white or sky-blue */
[data-header="dark"] .site-logo img,
.whb-header-dark .site-logo img,
.wd-header-overlap .site-logo img,
.wp-block-cover .site-logo img {
  filter: brightness(0) invert(1);
}

/* Light background → logo: black */
.site-logo img {
  color: var(--color-black);
}

/* Over photography / dark overlay → ensure legibility */
.wd-header-overlap .site-logo img,
.wp-block-cover .site-logo img {
  filter: brightness(0) invert(1);
}

/* --- Focus ring (Creations Brand 2026) --- */
:focus-visible,
a:focus,
button:focus {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
  box-shadow: var(--brand-focus-glow);
}

/* ================================================
   ACCESSIBILITY (WCAG AA)
   - Body text: --brand-text-on-light on --brand-bg passes 4.5:1.
   - Primary buttons: --brand-text-on-dark on --brand-primary passes.
   - FLAG: --brand-accent or --brand-highlight on white/sand may fail
     for small body text; use for large text, icons, or links only.
   ================================================ */