/* ============================================================
   @flapbase/ui — Aurora buttons (flap-aurora-btn / flap-aurora-chip)

   Visual concept (Owner 2026-09-27, 「つくる人に、羽を。」): folded, light-
   transmitting prism wings in a clear sky — mint, lavender, soft pink and
   sky blue. Light and airy; no strong orange or navy fills, no sparkle icons.

   Calm by default (Owner 2026-09-29): the main action should not shout over
   the page or the tools around it. A pale aurora tint on the surface, a thin
   prism rim that comes to full light on hover, medium-weight text, a softly
   rounded pane (radius follows the height). While busy, the light drifts
   slowly along the rim. The same look on the LP and inside every app.

   One file, plain CSS, no inline styles needed (Anotherbase CSP: style-src
   'self'). Shared by:
     - Platform:    @import "@flapbase/ui/css/aurora-buttons.css" (index.css)
                    + <Button variant="aurora" | "aurora-outline" | "aurora-quiet">
     - LP:          copied to dist as /flap-aurora-buttons.css (build-static.ts)
     - Anotherbase: copied to dist as /assets/flap-aurora-buttons.css (build-static.ts)

   Classes
     .flap-aurora-btn                 primary: pale aurora tint + thin prism rim
     .flap-aurora-btn--outline        secondary: surface fill + thin prism rim
     .flap-aurora-btn--quiet          quiet: text + thin prism underline
     .flap-aurora-btn--sm             small size, editor density (default is standard)
     .flap-aurora-btn--block          full width
     .flap-aurora-chip                eyebrow / chip (e.g. "CHALLENGE 01")
     .flap-aurora-chip--sm            small chip
     .flap-aurora-chip--plain         surface chip with prism border
     .flap-aurora-chip--facet         leading folded-facet ornament

   Size hooks: a page may set --_h / --_px / --_fs on its own button class
   (e.g. a larger hero CTA); the radius follows --_h.

   States
     :hover / :focus-visible (deeper, 1.5px prism edge; no ring) / :active
     :disabled / [aria-disabled="true"]   grey label on a flat grey pane
     [aria-busy="true"]               loading (small ring before the label, rim light drifts)
     .is-hover / .is-focus / .is-pressed   force a state (catalog pages, JS)

   Color scheme
     Light by default. Dark when an ancestor (or the element) has `.dark`,
     `[data-theme="dark"]` or `[data-flap-aurora-scheme="dark"]`. Pages that
     follow the OS setting opt in with `[data-flap-aurora-scheme="auto"]`;
     `[data-flap-aurora-scheme="light"]` forces light inside a dark area.
   ============================================================ */

/* ── Tokens (primitive colors only; composites are built per element so a
      scoped scheme switch re-resolves them) ───────────────────── */

:root,
[data-flap-aurora-scheme="light"] {
  /* Pale aurora hues (tinted onto the surface for the button, washed for chips) */
  --flap-aurora-mint:          #C6F4E5;
  --flap-aurora-sky:           #CBE7FF;
  --flap-aurora-lavender:      #DFD6FF;
  --flap-aurora-pink:          #FFDDEC;
  /* Prism rim (the folded wing's edge) */
  --flap-aurora-prism-mint:    #7FDFC3;
  --flap-aurora-prism-sky:     #86C6FF;
  --flap-aurora-prism-lavender:#B3A2FF;
  --flap-aurora-prism-pink:    #FFA6CF;
  --flap-aurora-prism-gold:    #FFDC93;
  /* Text and surfaces */
  --flap-aurora-text:          #2D3A5A;  /* label text on every button and chip */
  --flap-aurora-surface:       #FFFFFF;
  --flap-aurora-tint:          44%;      /* aurora hues over the surface on the primary fill */
  --flap-aurora-edge:          68%;      /* prism rim strength at rest (full on hover) */
  --flap-aurora-lift:          rgb(255 255 255 / 0.75);  /* top inner highlight */
  --flap-aurora-wash:          52%;      /* chip / outline hover wash strength over the surface */
  --flap-aurora-focus:         #5B4FD0;  /* deepens the prism edge on keyboard focus */
  --flap-aurora-focus-edge:    40%;      /* prism share of the focused edge (rest is focus) */
  --flap-aurora-glow:          rgb(150 128 255 / 0.36);
  --flap-aurora-shadow:        rgb(45 58 90 / 0.10);
  --flap-aurora-disabled-bg:   #EEF0F5;
  --flap-aurora-disabled-edge: #DCE0E9;
  --flap-aurora-disabled-text: #A3A9B8;
  --flap-aurora-radius:        999px;    /* chips */
}

:is(.dark, [data-theme="dark"], [data-flap-aurora-scheme="dark"]) {
  --flap-aurora-mint:          #A6E6D3;
  --flap-aurora-sky:           #AFD6F6;
  --flap-aurora-lavender:      #CBBFF8;
  --flap-aurora-pink:          #F1C3D9;
  --flap-aurora-prism-mint:    #83F1D1;
  --flap-aurora-prism-sky:     #93CFFF;
  --flap-aurora-prism-lavender:#BDAEFF;
  --flap-aurora-prism-pink:    #FFB0D6;
  --flap-aurora-prism-gold:    #FFE3A6;
  --flap-aurora-text:          #EEF0FF;
  --flap-aurora-surface:       #171D30;
  --flap-aurora-tint:          22%;
  --flap-aurora-edge:          52%;
  --flap-aurora-lift:          rgb(255 255 255 / 0.07);
  --flap-aurora-wash:          16%;
  --flap-aurora-focus:         #C9BEFF;
  --flap-aurora-focus-edge:    40%;
  --flap-aurora-glow:          rgb(176 156 255 / 0.34);
  --flap-aurora-shadow:        rgb(0 0 0 / 0.30);
  --flap-aurora-disabled-bg:   #252B3D;
  --flap-aurora-disabled-edge: #333A50;
  --flap-aurora-disabled-text: #6E768C;
}

@media (prefers-color-scheme: dark) {
  [data-flap-aurora-scheme="auto"] {
    --flap-aurora-mint:          #A6E6D3;
    --flap-aurora-sky:           #AFD6F6;
    --flap-aurora-lavender:      #CBBFF8;
    --flap-aurora-pink:          #F1C3D9;
    --flap-aurora-prism-mint:    #83F1D1;
    --flap-aurora-prism-sky:     #93CFFF;
    --flap-aurora-prism-lavender:#BDAEFF;
    --flap-aurora-prism-pink:    #FFB0D6;
    --flap-aurora-prism-gold:    #FFE3A6;
    --flap-aurora-text:          #EEF0FF;
    --flap-aurora-surface:       #171D30;
    --flap-aurora-tint:          22%;
    --flap-aurora-edge:          52%;
    --flap-aurora-lift:          rgb(255 255 255 / 0.07);
    --flap-aurora-wash:          16%;
    --flap-aurora-focus:         #C9BEFF;
    --flap-aurora-focus-edge:    40%;
  --flap-aurora-focus-edge:    40%;
    --flap-aurora-glow:          rgb(176 156 255 / 0.34);
    --flap-aurora-shadow:        rgb(0 0 0 / 0.30);
    --flap-aurora-disabled-bg:   #252B3D;
    --flap-aurora-disabled-edge: #333A50;
    --flap-aurora-disabled-text: #6E768C;
  }
}

/* The rim brightens and the outline's hover wash fades in when the browser
   can animate a registered custom property; otherwise they simply switch. */
@property --flap-aurora-veil {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --flap-aurora-rim {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

/* ── Button: shared shape (the primary) ─────────────────────── */

.flap-aurora-btn {
  --_h: 40px;
  --_px: 20px;
  --_fs: 14px;
  --flap-aurora-rim: var(--flap-aurora-edge);
  --_fill: linear-gradient(115deg,
    color-mix(in srgb, var(--flap-aurora-mint) var(--flap-aurora-tint), var(--flap-aurora-surface)) 0%,
    color-mix(in srgb, var(--flap-aurora-sky) var(--flap-aurora-tint), var(--flap-aurora-surface)) 30%,
    color-mix(in srgb, var(--flap-aurora-lavender) var(--flap-aurora-tint), var(--flap-aurora-surface)) 60%,
    color-mix(in srgb, var(--flap-aurora-pink) var(--flap-aurora-tint), var(--flap-aurora-surface)) 85%,
    color-mix(in srgb, var(--flap-aurora-mint) var(--flap-aurora-tint), var(--flap-aurora-surface)) 100%);
  --_prism: linear-gradient(115deg,
    color-mix(in srgb, var(--flap-aurora-prism-mint) var(--flap-aurora-rim), var(--flap-aurora-surface)) 0%,
    color-mix(in srgb, var(--flap-aurora-prism-sky) var(--flap-aurora-rim), var(--flap-aurora-surface)) 22%,
    color-mix(in srgb, var(--flap-aurora-prism-lavender) var(--flap-aurora-rim), var(--flap-aurora-surface)) 44%,
    color-mix(in srgb, var(--flap-aurora-prism-pink) var(--flap-aurora-rim), var(--flap-aurora-surface)) 64%,
    color-mix(in srgb, var(--flap-aurora-prism-gold) var(--flap-aurora-rim), var(--flap-aurora-surface)) 80%,
    color-mix(in srgb, var(--flap-aurora-prism-mint) var(--flap-aurora-rim), var(--flap-aurora-surface)) 100%);

  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--_h);
  margin: 0;
  padding: 0 var(--_px);
  border: 1px solid transparent;
  border-radius: calc(var(--_h) / 4);
  font: inherit;
  font-size: var(--_fs);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--flap-aurora-text);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background:
    var(--_fill) padding-box,
    var(--_prism) border-box;
  background-size: 200% 100%, 200% 100%;
  background-position: 0% 50%, 0% 50%;
  box-shadow:
    0 1px 2px var(--flap-aurora-shadow),
    inset 0 1px 0 var(--flap-aurora-lift);
  transition:
    background-position 1.6s cubic-bezier(0.3, 0.6, 0.3, 1),
    box-shadow 0.3s ease,
    transform 0.12s ease,
    --flap-aurora-rim 0.35s ease,
    --flap-aurora-veil 0.45s ease;
}

.flap-aurora-btn > svg {
  flex: none;
  width: 1.1em;
  height: 1.1em;
}

.flap-aurora-btn:is(.is-hover, :hover):not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  --flap-aurora-rim: 100%;
  background-position: 100% 50%, 100% 50%;
  box-shadow:
    0 1px 2px var(--flap-aurora-shadow),
    0 6px 16px -10px var(--flap-aurora-glow),
    inset 0 1px 0 var(--flap-aurora-lift);
}

.flap-aurora-btn:is(.is-pressed, :active):not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  transform: translateY(0.5px);
  box-shadow: inset 0 1px 2px var(--flap-aurora-shadow);
}

/* Keyboard focus: no ring. The prism edge deepens toward the focus color and
   grows to 1.5px (padding absorbs the half pixel, so nothing shifts). */
.flap-aurora-btn:focus {
  outline: none;
}

.flap-aurora-btn:focus-visible,
.flap-aurora-btn.is-focus {
  --_prism: linear-gradient(115deg,
    color-mix(in srgb, var(--flap-aurora-prism-mint) var(--flap-aurora-focus-edge), var(--flap-aurora-focus)) 0%,
    color-mix(in srgb, var(--flap-aurora-prism-sky) var(--flap-aurora-focus-edge), var(--flap-aurora-focus)) 22%,
    color-mix(in srgb, var(--flap-aurora-prism-lavender) var(--flap-aurora-focus-edge), var(--flap-aurora-focus)) 44%,
    color-mix(in srgb, var(--flap-aurora-prism-pink) var(--flap-aurora-focus-edge), var(--flap-aurora-focus)) 64%,
    color-mix(in srgb, var(--flap-aurora-prism-gold) var(--flap-aurora-focus-edge), var(--flap-aurora-focus)) 80%,
    color-mix(in srgb, var(--flap-aurora-prism-mint) var(--flap-aurora-focus-edge), var(--flap-aurora-focus)) 100%);
  border-width: 1.5px;
  padding: 0 calc(var(--_px) - 0.5px);
}

/* Disabled. A loading button is usually disabled too, but keeps its colors. */
.flap-aurora-btn:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) {
  cursor: not-allowed;
  color: var(--flap-aurora-disabled-text);
  background:
    linear-gradient(var(--flap-aurora-disabled-bg), var(--flap-aurora-disabled-bg)) padding-box,
    linear-gradient(var(--flap-aurora-disabled-edge), var(--flap-aurora-disabled-edge)) border-box;
  box-shadow: none;
  opacity: 1;
}

/* Loading: keep the label, add a small ring before it; the rim is fully lit
   and its light drifts slowly. */
.flap-aurora-btn[aria-busy="true"] {
  --flap-aurora-rim: 100%;
  cursor: progress;
}

.flap-aurora-btn[aria-busy="true"]:not(.flap-aurora-btn--quiet) {
  animation: flap-aurora-drift 2.4s ease-in-out infinite alternate;
}

.flap-aurora-btn[aria-busy="true"]::after {
  content: "";
  order: -1;
  flex: none;
  box-sizing: border-box;
  width: 0.95em;
  height: 0.95em;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.6;
  animation: flap-aurora-spin 0.9s linear infinite;
}

@keyframes flap-aurora-spin {
  to { transform: rotate(360deg); }
}

@keyframes flap-aurora-drift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* ── Sizes ───────────────────────────────────────────────────── */

.flap-aurora-btn--sm {
  --_h: 32px;
  --_px: 14px;
  --_fs: 13px;
}

.flap-aurora-btn--block {
  display: flex;
  width: 100%;
}

/* ── Secondary: surface fill, thin prism rim ─────────────────── */

.flap-aurora-btn--outline {
  background:
    linear-gradient(
      color-mix(in srgb, var(--flap-aurora-surface) var(--flap-aurora-veil), transparent),
      color-mix(in srgb, var(--flap-aurora-surface) var(--flap-aurora-veil), transparent)) padding-box,
    var(--_fill) padding-box,
    var(--_prism) border-box;
  background-size: 100% 100%, 200% 100%, 200% 100%;
  background-position: 0 0, 0% 50%, 0% 50%;
}

.flap-aurora-btn--outline:is(.is-hover, :hover):not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  --flap-aurora-veil: calc(100% - var(--flap-aurora-wash));
  background-position: 0 0, 100% 50%, 100% 50%;
}

/* ── Quiet: text with a thin prism underline ─────────────────── */

.flap-aurora-btn--quiet {
  --_px: 4px;
  border-color: transparent;
  border-radius: 6px;
  background: none;
  box-shadow: none;
}

.flap-aurora-btn--quiet::before {
  content: "";
  position: absolute;
  inset: auto var(--_px) calc(50% - 0.95em) var(--_px);
  height: 1.5px;
  border-radius: 2px;
  pointer-events: none;
  background: var(--_prism);
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position 1.6s cubic-bezier(0.3, 0.6, 0.3, 1), height 0.2s ease, box-shadow 0.35s ease;
}

.flap-aurora-btn--quiet:is(.is-hover, :hover):not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  background: none;
  box-shadow: none;
}

.flap-aurora-btn--quiet:is(.is-hover, :hover):not(:disabled, [aria-disabled="true"], [aria-busy="true"])::before {
  height: 2px;
  background-position: 100% 50%;
  box-shadow: 0 0 8px var(--flap-aurora-glow);
}

.flap-aurora-btn--quiet:is(:focus-visible, .is-focus)::before {
  height: 2px;
}

.flap-aurora-btn--quiet:is(.is-pressed, :active):not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  box-shadow: none;
}

.flap-aurora-btn--quiet:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) {
  background: none;
}

.flap-aurora-btn--quiet:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"])::before {
  background: var(--flap-aurora-disabled-edge);
}

/* ── Chip / eyebrow ──────────────────────────────────────────── */

.flap-aurora-chip {
  --_h: 26px;
  --_px: 12px;
  --_fs: 11.5px;
  --_wash: color-mix(in srgb, var(--flap-aurora-mint) var(--flap-aurora-wash), var(--flap-aurora-surface));

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: var(--_h);
  padding: 0 var(--_px);
  border: 1px solid transparent;
  border-radius: var(--flap-aurora-radius);
  font-size: var(--_fs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--flap-aurora-text);
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--flap-aurora-mint) var(--flap-aurora-wash), var(--flap-aurora-surface)) 0%,
      color-mix(in srgb, var(--flap-aurora-sky) var(--flap-aurora-wash), var(--flap-aurora-surface)) 35%,
      color-mix(in srgb, var(--flap-aurora-lavender) var(--flap-aurora-wash), var(--flap-aurora-surface)) 70%,
      color-mix(in srgb, var(--flap-aurora-pink) var(--flap-aurora-wash), var(--flap-aurora-surface)) 100%) padding-box,
    linear-gradient(100deg,
      var(--flap-aurora-prism-mint),
      var(--flap-aurora-prism-sky),
      var(--flap-aurora-prism-lavender),
      var(--flap-aurora-prism-pink)) border-box;
}

.flap-aurora-chip--sm {
  --_h: 22px;
  --_px: 9px;
  --_fs: 10.5px;
}

.flap-aurora-chip--plain {
  background:
    linear-gradient(var(--flap-aurora-surface), var(--flap-aurora-surface)) padding-box,
    linear-gradient(100deg,
      var(--flap-aurora-prism-mint),
      var(--flap-aurora-prism-sky),
      var(--flap-aurora-prism-lavender),
      var(--flap-aurora-prism-pink)) border-box;
}

/* A small folded facet (two triangles of the wing), not a sparkle. */
.flap-aurora-chip--facet::before {
  content: "";
  flex: none;
  width: 0.8em;
  height: 0.8em;
  background: conic-gradient(from 200deg,
    var(--flap-aurora-prism-sky),
    var(--flap-aurora-prism-lavender),
    var(--flap-aurora-prism-pink),
    var(--flap-aurora-prism-gold),
    var(--flap-aurora-prism-mint),
    var(--flap-aurora-prism-sky));
  clip-path: polygon(50% 0, 100% 38%, 62% 100%, 0 62%);
}

/* ── Motion and contrast preferences ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .flap-aurora-btn,
  .flap-aurora-btn::before,
  .flap-aurora-btn::after {
    transition: none !important;
    animation: none !important;
  }

  .flap-aurora-btn:is(.is-pressed, :active) {
    transform: none;
  }
}

@media (forced-colors: active) {
  .flap-aurora-btn,
  .flap-aurora-chip {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .flap-aurora-btn::before {
    display: none;
  }

  .flap-aurora-btn--quiet {
    border-color: transparent;
    text-decoration: underline;
  }

  .flap-aurora-btn:is(:focus-visible, .is-focus) {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  .flap-aurora-btn:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) {
    color: GrayText;
    border-color: GrayText;
  }
}