/* Values the DE.com Refresh Figma uses that have no DE Brand 2026 token yet, plus
   accessibility overrides of Figma values. Each line needs a design decision: promote to
   brand-guide/de-tokens-2026.css, swap for an existing token, or accept the override. */
:root {
  --de26-azure-deep: #0584E6;                                /* Figma hover gradient and rule stop */
  --de26-azure-pale: #A3D8FF;                                /* Figma rule stop; near --de26-azure-80 (#9ED5FF) */
  --de26-shadow-button: rgba(19, 45, 113, 0.7);              /* Primary Button drop shadow (#132D71 at 70%) */
  --de26-shadow-card-2026: 4px 4px 17px rgba(0, 0, 0, 0.25); /* Card set 1989:132834 */
  --de26-shadow-card-soft: 0 4px 4px rgba(0, 0, 0, 0.25);    /* Gradient and Calendar cards, Secondary hover */
  --de26-shadow-subject-open: 0 4px 24px rgba(0, 0, 0, 0.65);/* Subject Card open state */
  --de26-hairline-dark: rgba(0, 0, 0, 0.4);                  /* 0.3px card stroke, black at 40% */
  --de26-duration-default: 0.25s;                            /* Duration half of --de26-transition-default, for transitions that need their own timing function (step-end) */
  --de26-gradient-hover: linear-gradient(180deg, var(--de26-azure-deep) 20.192%, var(--de26-space) 91.346%); /* Primary hover fill (Figma Hover variants) */
  /* Rule direction verified against the 2x renders: Bumblebee on the left, Space on the right. */
  --de26-gradient-rule: linear-gradient(90deg, var(--de26-bumblebee) 0%, var(--de26-azure-pale) 39.4%, var(--de26-azure-deep) 72.9%, var(--de26-space) 100%); /* 6px rule under card titles (Rectangle 93) */
  --de26-gradient-frame: linear-gradient(to top right, var(--de26-bumblebee) 0%, var(--de26-azure-pale) 39.4%, var(--de26-azure-deep) 61.1%, var(--de26-space) 100%); /* Gradient Feature 12px frame (2000:133532); Bumblebee bottom-left to Space top-right per render */
  --de26-hero-bg-end: #B3DEFF;                               /* Hero banner 1943:85394 right edge; no 2026 token */
  --de26-hero-bg: linear-gradient(90deg, var(--de26-white) 0%, var(--de26-hero-bg-end) 100%); /* Hero banner 1943:85394 */
  /* The hero draws --de26-hero-bg 146.4% wide and centered, so only 15.85% to 84.15% of it shows. This is that visible part as a plain
     gradient, for surfaces that cannot carry the size and position (the Elementor container behind a hero). Same colors at every x. */
  --de26-hero-bg-window: linear-gradient(90deg, color-mix(in srgb, var(--de26-hero-bg-end) 15.85%, var(--de26-white)) 0%, color-mix(in srgb, var(--de26-hero-bg-end) 84.15%, var(--de26-white)) 100%);

  /* Accessibility overrides (WCAG AA). Figma value in each comment. */
  --de26-button-small-bg: var(--de26-space);          /* Figma: --azure. White on Azure is 3.17:1, AA only for 18.66px+ bold; Secondary is 18px, Card is 16px */
  --de26-button-small-bg-hover: var(--de26-space-80); /* Figma: --de26-gradient-hover. White on #0584E6 fails AA at small sizes */
  --de26-eyebrow: var(--de26-hyperlink);              /* Figma: --azure on white (3.17:1) for 14 to 18px bold eyebrows */
}
