/* =============================================
   Section 1. Container
   ---------------------------------------------
   Definitions
   - Responsive container width and padding
   ============================================= */
:root .container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 3rem;
    padding-right: 3rem;
    max-width: min(100%, 1280px);
}


/* =============================================
   Section 2. Top Border Gradient (btg)
   ---------------------------------------------
   Usage examples:
     <div class="btg-line btg-primary btg-to-transparent btg-h-2"></div>
     <div class="btg-line btg-secondary btg-to-white btg-h-3"></div>
     <div class="btg-red btg-to-transparent btg-h-1 btg-line"></div>

   Definitions
   - Core line + color/to/height utilities
   ============================================= */
/* Final API: btg-line + btg-[primary|secondary|red] + btg-to-[transparent|white] + btg-h-[1|2|3|4] */
/* Usage:
   <div class="btg-line btg-primary btg-to-transparent btg-h-2"></div>
   <div class="btg-line btg-secondary btg-to-white btg-h-3"></div>
   <div class="btg-line btg-red btg-to-transparent btg-h-1"></div>
*/
:root .btg-line { position: relative; }
:root .btg-line::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--btg-height, 2px);
    background: linear-gradient(to right,
      var(--btg-edge, transparent),
      var(--btg-color, #ef4444),
      var(--btg-edge, transparent)
    );
    pointer-events: none;
}
/* color utilities */
:root .btg-primary { --btg-color: var(--color-primary); }
:root .btg-secondary { --btg-color: var(--color-secondary); }
:root .btg-red { --btg-color: #ef4444; }
/* edge fade utilities */
:root .btg-to-transparent { --btg-edge: transparent; }
:root .btg-to-white { --btg-edge: #ffffff; }
/* height utilities */
:root .btg-h-1 { --btg-height: 1px; }
:root .btg-h-2 { --btg-height: 2px; }
:root .btg-h-3 { --btg-height: 3px; }
:root .btg-h-4 { --btg-height: 4px; }

/* Shortcuts
   - Pre-bundled aliases for common btg combinations
   Shortcut aliases for top border gradient
   Pattern:
   - btg-{color}-{h}            => btg-line + btg-{color} + btg-to-transparent + btg-h-{h}
   - btg-{color}-white-{h}      => btg-line + btg-{color} + btg-to-white + btg-h-{h}
   Colors: primary | secondary | red
   Heights: 1 | 2 | 3 | 4
*/
/* Common structure for all shortcuts */
:root .btg-primary-1,
:root .btg-primary-2,
:root .btg-primary-3,
:root .btg-primary-4,
:root .btg-primary-white-1,
:root .btg-primary-white-2,
:root .btg-primary-white-3,
:root .btg-primary-white-4,
:root .btg-secondary-1,
:root .btg-secondary-2,
:root .btg-secondary-3,
:root .btg-secondary-4,
:root .btg-secondary-white-1,
:root .btg-secondary-white-2,
:root .btg-secondary-white-3,
:root .btg-secondary-white-4,
:root .btg-red-1,
:root .btg-red-2,
:root .btg-red-3,
:root .btg-red-4,
:root .btg-red-white-1,
:root .btg-red-white-2,
:root .btg-red-white-3,
:root .btg-red-white-4 { position: relative; }

:root .btg-primary-1::before,
:root .btg-primary-2::before,
:root .btg-primary-3::before,
:root .btg-primary-4::before,
:root .btg-primary-white-1::before,
:root .btg-primary-white-2::before,
:root .btg-primary-white-3::before,
:root .btg-primary-white-4::before,
:root .btg-secondary-1::before,
:root .btg-secondary-2::before,
:root .btg-secondary-3::before,
:root .btg-secondary-4::before,
:root .btg-secondary-white-1::before,
:root .btg-secondary-white-2::before,
:root .btg-secondary-white-3::before,
:root .btg-secondary-white-4::before,
:root .btg-red-1::before,
:root .btg-red-2::before,
:root .btg-red-3::before,
:root .btg-red-4::before,
:root .btg-red-white-1::before,
:root .btg-red-white-2::before,
:root .btg-red-white-3::before,
:root .btg-red-white-4::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--btg-height, 2px);
    background: linear-gradient(to right,
      var(--btg-edge, transparent),
      var(--btg-color, #ef4444),
      var(--btg-edge, transparent)
    );
    pointer-events: none;
}

/* Variable presets for primary (transparent edge) */
:root .btg-primary-1 { --btg-color: var(--color-primary, hsl(var(--p))); --btg-edge: transparent; --btg-height: 1px; }
:root .btg-primary-2 { --btg-color: var(--color-primary, hsl(var(--p))); --btg-edge: transparent; --btg-height: 2px; }
:root .btg-primary-3 { --btg-color: var(--color-primary, hsl(var(--p))); --btg-edge: transparent; --btg-height: 3px; }
:root .btg-primary-4 { --btg-color: var(--color-primary, hsl(var(--p))); --btg-edge: transparent; --btg-height: 4px; }

/* Variable presets for primary (white edge) */
:root .btg-primary-white-1 { --btg-color: var(--color-primary, hsl(var(--p))); --btg-edge: #ffffff; --btg-height: 1px; }
:root .btg-primary-white-2 { --btg-color: var(--color-primary, hsl(var(--p))); --btg-edge: #ffffff; --btg-height: 2px; }
:root .btg-primary-white-3 { --btg-color: var(--color-primary, hsl(var(--p))); --btg-edge: #ffffff; --btg-height: 3px; }
:root .btg-primary-white-4 { --btg-color: var(--color-primary, hsl(var(--p))); --btg-edge: #ffffff; --btg-height: 4px; }

/* Variable presets for secondary (transparent edge) */
:root .btg-secondary-1 { --btg-color: var(--color-secondary, hsl(var(--s))); --btg-edge: transparent; --btg-height: 1px; }
:root .btg-secondary-2 { --btg-color: var(--color-secondary, hsl(var(--s))); --btg-edge: transparent; --btg-height: 2px; }
:root .btg-secondary-3 { --btg-color: var(--color-secondary, hsl(var(--s))); --btg-edge: transparent; --btg-height: 3px; }
:root .btg-secondary-4 { --btg-color: var(--color-secondary, hsl(var(--s))); --btg-edge: transparent; --btg-height: 4px; }

/* Variable presets for secondary (white edge) */
:root .btg-secondary-white-1 { --btg-color: var(--color-secondary, hsl(var(--s))); --btg-edge: #ffffff; --btg-height: 1px; }
:root .btg-secondary-white-2 { --btg-color: var(--color-secondary, hsl(var(--s))); --btg-edge: #ffffff; --btg-height: 2px; }
:root .btg-secondary-white-3 { --btg-color: var(--color-secondary, hsl(var(--s))); --btg-edge: #ffffff; --btg-height: 3px; }
:root .btg-secondary-white-4 { --btg-color: var(--color-secondary, hsl(var(--s))); --btg-edge: #ffffff; --btg-height: 4px; }

/* Variable presets for red (transparent edge) */
:root .btg-red-1 { --btg-color: #ef4444; --btg-edge: transparent; --btg-height: 1px; }
:root .btg-red-2 { --btg-color: #ef4444; --btg-edge: transparent; --btg-height: 2px; }
:root .btg-red-3 { --btg-color: #ef4444; --btg-edge: transparent; --btg-height: 3px; }
:root .btg-red-4 { --btg-color: #ef4444; --btg-edge: transparent; --btg-height: 4px; }

/* Variable presets for red (white edge) */
:root .btg-red-white-1 { --btg-color: #ef4444; --btg-edge: #ffffff; --btg-height: 1px; }
:root .btg-red-white-2 { --btg-color: #ef4444; --btg-edge: #ffffff; --btg-height: 2px; }
:root .btg-red-white-3 { --btg-color: #ef4444; --btg-edge: #ffffff; --btg-height: 3px; }
:root .btg-red-white-4 { --btg-color: #ef4444; --btg-edge: #ffffff; --btg-height: 4px; }

:root .bg-primary-soft-gradient {
    /* 145° 的浅色主色渐变，使用 alpha 控制透明度 */
    background: linear-gradient(
        145deg,
        hsl(var(--p) / 0.10) 0%,
        hsl(var(--p) / 0.03) 100%
    );
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* =============================================
   Section 3. Gradient Buttons
   ---------------------------------------------
   Usage examples:
     <button class="btn btn-primary-gradient">Primary</button>
     <button class="btn btn-secondary-gradient">Secondary</button>
     <button class="btn btn-accent-gradient">Accent</button>

   Definitions
   - Gradient button backgrounds based on DaisyUI tokens
   ============================================= */
/*
  Gradient buttons for DaisyUI themes
  - Usage:
    <button class="btn btn-primary-gradient">...</button>
    <button class="btn btn-secondary-gradient">...</button>
    <button class="btn btn-accent-gradient">...</button>
  - These classes rely on DaisyUI color variables:
    --p (primary), --s (secondary), --a (accent)
  - Fallbacks:
    If CSS variables --primary-gradient-*(start|end|hover-*) are provided
    they will take precedence to allow per-theme fine-tuning.
*/

/* Gradient button base (new name, backward-compatible)
   - Preferred class: .btn-gradient-base
   - Back-compat aliases: existing gradient button classes remain here
   - Variable naming clarified: --btn-gradient-*, with fallbacks to legacy --btn-grad-*
*/
.btn-gradient-base,
.btn.btn-primary-gradient,
.btn.btn-secondary-gradient,
.btn.btn-accent-gradient,
.btn-primary-gradient,
.btn-secondary-gradient,
.btn-accent-gradient {
  border: 0;
  color: #fff;
  /* angle */
  --btn-gradient-angle: 90deg;
  /* multi-level fallbacks: per-button -> per-theme -> daisyUI */
  --_from-default: var(
    --btn-color-from,
    var(--color-primary, hsl(var(--p)))
  );
  --_to-default: var(
    --btn-color-to,
    var(--color-secondary, hsl(var(--s)))
  );
  background: linear-gradient(
    var(--btn-gradient-angle),
    var(--btn-gradient-from, var(--btn-grad-from, var(--_from-default))),
    var(--btn-gradient-to, var(--btn-grad-to, var(--_to-default)))
  ) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  border-color: transparent;
  box-shadow: var(--tw-shadow, 0 0 #0000); /* keep Tailwind shadow if present */
}

/* Semantic presets (single-hue gradients: lighter -> darker) */
.btn-primary-gradient {
  /* base color */
  --_btn-base: var(--color-primary, hsl(var(--p)));
  /* from: slightly lighter, to: slightly darker */
  --btn-gradient-from: color-mix(in oklab, var(--_btn-base) 92%, white 8%);
  --btn-gradient-to:   color-mix(in oklab, var(--_btn-base) 80%, black 20%);
}
.btn-primary-gradient:hover,
.btn-primary-gradient:focus-visible,
.btn-primary-gradient:active {
  /* deepen a bit on interactive states */
  --btn-gradient-from: color-mix(in oklab, var(--_btn-base) 90%, white 10%);
  --btn-gradient-to:   color-mix(in oklab, var(--_btn-base) 74%, black 26%);
}

.btn-secondary-gradient {
  --_btn-base: var(--color-secondary, hsl(var(--s)));
  --btn-gradient-from: color-mix(in oklab, var(--_btn-base) 92%, white 8%);
  --btn-gradient-to:   color-mix(in oklab, var(--_btn-base) 80%, black 20%);
}
.btn-secondary-gradient:hover,
.btn-secondary-gradient:focus-visible,
.btn-secondary-gradient:active {
  --btn-gradient-from: color-mix(in oklab, var(--_btn-base) 90%, white 10%);
  --btn-gradient-to:   color-mix(in oklab, var(--_btn-base) 74%, black 26%);
}

.btn-accent-gradient {
  --_btn-base: var(--color-accent, hsl(var(--a)));
  --btn-gradient-from: color-mix(in oklab, var(--_btn-base) 92%, white 8%);
  --btn-gradient-to:   color-mix(in oklab, var(--_btn-base) 80%, black 20%);
}
.btn-accent-gradient:hover,
.btn-accent-gradient:focus-visible,
.btn-accent-gradient:active {
  --btn-gradient-from: color-mix(in oklab, var(--_btn-base) 90%, white 10%);
  --btn-gradient-to:   color-mix(in oklab, var(--_btn-base) 74%, black 26%);
}

/* (legacy primary-gradient block removed in favor of single-hue presets above) */

/* (legacy cross-hue secondary/accent blocks removed; single-hue presets above take effect) */

/* Optional: ensure text remains readable on dark themes */
.btn-primary-gradient,
.btn-secondary-gradient,
.btn-accent-gradient,
.btn.btn-primary-gradient,
.btn.btn-secondary-gradient,
.btn.btn-accent-gradient {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

/*
bg-gradient-to-r from-[color-mix(in_oklab,_var(--primary)_10%,_white_90%)] to-[color-mix(in_oklab,_var(--secondary)_10%,_white_90%)]
bg-gradient-to-r from-[var(--primary)]/10 to-[var(--secondary)]/10
bg-[var(--primary)]/10
*/