/* ==========================================================================
   Strandkörbe Amrum – Design-Tokens
   Heller Modus. Dunkel liegt in dark.css.
   Stand: 14.09.2026
   ========================================================================== */

:root {
  /* --- Marke, modusunabhängig ------------------------------------------ */
  --brand-red: #E30513;        /* Logo-Rot, CMYK 0/100/100/0 – nur Fläche */
  --brand-black: #12100F;      /* Wortmarken-Schwarz aus dem Logo-PDF     */
  --brand-lime: #C3D82C;       /* Korblime – hell nur Fläche             */

  /* --- Typografie und Maße --------------------------------------------- */
  --radius: 6px;
  --radius-pill: 999px;        /* klemmt auf halbe Höhe – Pille bei jeder Größe */
  --focus-width: 2px;
  --focus-offset: 2px;
  --field-height: 48px;        /* >= 44px Zielgröße, 2.5.5 */
  --scrim: rgba(0, 0, 0, 0.4); /* Header über Bild, weiß erreicht 6,4:1 */
  --scrim-rgb: 18, 16, 15;     /* Tiefschwarz, für rgba() im Hero-Verlauf */

  /* --- Buttons ---------------------------------------------------------
     Rahmenstärke und Padding stehen hier, weil beide Zustände sie teilen
     müssen: Der Rahmen liegt schon im gefüllten Zustand an, nur seine
     Farbe wechselt. Sonst würde der Button beim Hover die Größe ändern.
     Das vertikale Padding erzeugt die Höhe und damit die vertikale
     Zentrierung des Labels – nicht min-height.                         */
  --btn-border-width: 3px;
  --btn-padding-y: 14px;
  --btn-padding-x: 30px;
  --btn-padding-x-compact: 20px;  /* Kachelraster, dort fehlt die Breite */

  /* --- Verläufe: nur abwärts, nie heller als das Marken-Rot ------------ */
  /* Weiße Schrift erreicht am hellsten Punkt 4,89:1, am dunkelsten 6,87:1 */
  --cta-gradient: linear-gradient(180deg, #E30513 0%, #B8030E 100%);
  /* Hover: 6,87:1 bis 9,63:1 */
  --cta-gradient-hover: linear-gradient(180deg, #B8030E 0%, #8F0209 100%);

  /* --- Reveal-Animation ------------------------------------------------ */
  --skam-reveal-shift: -28px;
  --skam-reveal-duration: 600ms;
  --skam-reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   Heller Modus (Standard)
   ========================================================================== */

:root,
:root[data-theme="light"] {
  --page: #FFFFFF;
  --surface: #F5F6F1;          /* Strandsand, aus dem Hero-Foto */
  --divider: #DCDED6;          /* dekorativ, kein Kontrastziel  */
  --field-border: #82857E;     /* 3,75:1 auf Weiß – 1.4.11      */
  --field-bg: #FFFFFF;

  --text: #12100F;             /* 19,0:1 */
  --text-secondary: #565853;   /*  7,2:1 */

  --cta-bg: #E30513;           /* weiße Schrift darauf: 4,9:1 */
  --cta-bg-hover: #B8030E;     /* als Schrift auf Strandsand: 6,3:1 */
  --cta-text: #FFFFFF;
  --link: #B8030E;             /* Rot als Schrift: 6,9:1 */
  --link-hover: #A4020C;

  --accent-sky: #1560B0;       /* 6,3:1 */
  --accent-lime: #C3D82C;      /* nur Fläche, Schrift darauf --brand-black */
  --on-lime: #12100F;          /* 11,9:1 */

  --success: #1B6E3F;          /* 6,3:1 */
  --success-bg: #E8F4EC;
  --danger: #A4020C;           /* 8,1:1 */
  --danger-bg: #FDEBEC;

  --focus-ring: #12100F;
  --header-solid: #12100F;     /* gescrollter Header, beide Modi gleich */
  --skam-hero-outline: #132f5c;   /* Tiefseeblau – Kontur Hero-Typo */
}