/* variables.css - Central Design Tokens for Redbreva Testing Pages */

:root {
  color-scheme: light;

  /* Animated background gradients */
  --cycler-gradient-start:  rgba(40, 186, 222, 0.85);   /* Blue         */
  --cycler-gradient-mid-a:  #5ec7e6;
  --cycler-gradient-mid-b:  #c989b8;
  --cycler-gradient-end:    rgba(180, 100, 160, 0.7);   /* Purple/Pink  */

  /* Panel textures */
  --cycler-grid-bg-color:   #28bade;                    /* Bright Teal  */
  --medium-paper-texture:   url('_images/blue_m.png');
  --panel-bg-image:         var(--medium-paper-texture);

  /* Buttons & Controls */
  --cycler-button-bg:       #5ccbf3;
  --cycler-button-bg-hover: #4aaecf;
  --cycler-button-text:     #000000;
  --cycler-button-glow:     rgba(180, 100, 160, 0.6);   /* Pink glow    */
  --cycler-button-font:     clamp(20px, 1.5vw + 1rem, 28px);

  /* Big Button (navigation) */
  --cycler-big-button-text: #222;
  --cycler-heading-text:    #222;
  --cycler-theme-text:      rgba(20, 20, 20, 0.82);
  --cycler-theme-bg:        rgba(255, 255, 255, 0.22);
  --cycler-theme-active-bg: rgba(255, 255, 255, 0.42);

  /* Interactive outlines / accents */
  --cycler-border:          #555;
  --cycler-shadow:          rgba(0, 0, 0, 0.4);
  --cycler-hover:           #c72a93;

  /* Glassmorphism containers */
  --cycler-glass-bg:        rgba(255, 255, 255, 0.25);
  --cycler-glass-border:    rgba(255, 255, 255, 0.33);
  --cycler-glass-shadow:    0 10px 20px rgba(45, 4, 82, 0.411);
  --cycler-header-shadow:   0 10px 20px rgba(0, 0, 0, 0.4);

  /* Standard panel text colors */
  --panel-text:             #171717;
  --panel-muted:            #21333b;
  --strong-text:            #111111;
  --heading-text:           #222222;
  --heading-copy:           rgba(20, 20, 20, 0.78);
  --panel-soft:             rgba(255, 255, 255, 0.35);
  --panel-softer:           rgba(255, 255, 255, 0.2);
  --field-bg:               rgba(255, 255, 255, 0.58);
  --field-text:             #111111;

  /* Form context colors */
  --accent-text:            #7a145a;
  --required-color:         #55073c;
  --danger:                 #a51535;
  --error-color:            #a51535;
  --error-bg:               rgba(255, 59, 48, 0.15);
  --success-text:           #0b4a3a;
  --success-bg:             rgba(52, 199, 89, 0.15);

  /* Popovers */
  --help-popover-bg:        rgba(236, 250, 253, 0.98);
  --help-popover-text:      #123540;
  --help-popover-border:    rgba(15, 97, 120, 0.55);

  /* Game tokens */
  --x-color:                #0b5166;
  --o-color:                #7d0d58;
  --x-shadow:               rgba(40, 186, 222, 0.4);
  --o-shadow:               rgba(180, 100, 160, 0.4);

  /* Footer */
  --footer-text:            rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] {
  color-scheme: dark;

  /* Animated background gradients (dark shifts) */
  --cycler-gradient-start:  rgba(6, 64, 83, 0.96);
  --cycler-gradient-mid-a:  #124f63;
  --cycler-gradient-mid-b:  #543452;
  --cycler-gradient-end:    rgba(58, 24, 61, 0.92);

  /* Panel textures (dark overlay) */
  --cycler-grid-bg-color:   #0f6178;
  --panel-bg-image:         linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)), var(--medium-paper-texture);

  /* Buttons & Controls */
  --cycler-button-bg:       #2b8ead;
  --cycler-button-bg-hover: #24758f;
  --cycler-button-text:     #f4fbff;
  --cycler-button-glow:     rgba(199, 42, 147, 0.35);

  /* Theme settings */
  --cycler-big-button-text: #f4fbff;
  --cycler-heading-text:    #f4fbff;
  --cycler-theme-text:      rgba(238, 249, 251, 0.88);
  --cycler-theme-bg:        rgba(4, 26, 35, 0.5);
  --cycler-theme-active-bg: rgba(43, 142, 173, 0.72);

  /* Interactive outlines / accents */
  --cycler-border:          #173846;
  --cycler-glass-bg:        rgba(4, 26, 35, 0.55);
  --cycler-glass-border:    rgba(182, 226, 238, 0.22);
  --footer-text:            rgba(238, 249, 251, 0.72);

  /* Standard text colors */
  --panel-text:             #eef9fb;
  --panel-muted:            #c6dce3;
  --strong-text:            #ffffff;
  --heading-text:           #f4fbff;
  --heading-copy:           rgba(230, 246, 250, 0.82);
  --panel-soft:             rgba(2, 18, 25, 0.66);
  --panel-softer:           rgba(0, 0, 0, 0.22);
  --field-bg:               rgba(2, 17, 24, 0.82);
  --field-text:             #f4fbff;

  /* Form context colors */
  --accent-text:            #ff9add;
  --required-color:         var(--accent-text);
  --danger:                 #ffb4c2;
  --error-color:            #ffb4c2;
  --error-bg:               rgba(255, 69, 58, 0.25);
  --success-text:           #bdf3e1;
  --success-bg:             rgba(48, 209, 88, 0.2);

  /* Popovers */
  --help-popover-bg:        rgba(31, 111, 132, 0.98);
  --help-popover-text:      #f4fbff;
  --help-popover-border:    rgba(145, 224, 244, 0.55);

  /* Game tokens */
  --x-color:                #5ccbf3;
  --o-color:                #ff9add;
  --x-shadow:               rgba(92, 203, 243, 0.6);
  --o-shadow:               rgba(255, 154, 221, 0.6);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;

    /* Animated background gradients (dark shifts) */
    --cycler-gradient-start:  rgba(6, 64, 83, 0.96);
    --cycler-gradient-mid-a:  #124f63;
    --cycler-gradient-mid-b:  #543452;
    --cycler-gradient-end:    rgba(58, 24, 61, 0.92);

    /* Panel textures (dark overlay) */
    --cycler-grid-bg-color:   #0f6178;
    --panel-bg-image:         linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)), var(--medium-paper-texture);

    /* Buttons & Controls */
    --cycler-button-bg:       #2b8ead;
    --cycler-button-bg-hover: #24758f;
    --cycler-button-text:     #f4fbff;
    --cycler-button-glow:     rgba(199, 42, 147, 0.35);

    /* Theme settings */
    --cycler-big-button-text: #f4fbff;
    --cycler-heading-text:    #f4fbff;
    --cycler-theme-text:      rgba(238, 249, 251, 0.88);
    --cycler-theme-bg:        rgba(4, 26, 35, 0.5);
    --cycler-theme-active-bg: rgba(43, 142, 173, 0.72);

    /* Interactive outlines / accents */
    --cycler-border:          #173846;
    --cycler-glass-bg:        rgba(4, 26, 35, 0.55);
    --cycler-glass-border:    rgba(182, 226, 238, 0.22);
    --footer-text:            rgba(238, 249, 251, 0.72);

    /* Standard text colors */
    --panel-text:             #eef9fb;
    --panel-muted:            #c6dce3;
    --strong-text:            #ffffff;
    --heading-text:           #f4fbff;
    --heading-copy:           rgba(230, 246, 250, 0.82);
    --panel-soft:             rgba(2, 18, 25, 0.66);
    --panel-softer:           rgba(0, 0, 0, 0.22);
    --field-bg:               rgba(2, 17, 24, 0.82);
    --field-text:             #f4fbff;

    /* Form context colors */
    --accent-text:            #ff9add;
    --required-color:         var(--accent-text);
    --danger:                 #ffb4c2;
    --error-color:            #ffb4c2;
    --error-bg:               rgba(255, 69, 58, 0.25);
    --success-text:           #bdf3e1;
    --success-bg:             rgba(48, 209, 88, 0.2);

    /* Popovers */
    --help-popover-bg:        rgba(31, 111, 132, 0.98);
    --help-popover-text:      #f4fbff;
    --help-popover-border:    rgba(145, 224, 244, 0.55);

    /* Game tokens */
    --x-color:                #5ccbf3;
    --o-color:                #ff9add;
    --x-shadow:               rgba(92, 203, 243, 0.6);
    --o-shadow:               rgba(255, 154, 221, 0.6);
  }
}