/* ============================================================
   HOUSE OF CHICORY — MOTION, OPACITY, BORDERS, Z-INDEX
   ------------------------------------------------------------
   Motion principle: "Calm and intentional." Movement is small,
   eased, and purposeful — confirming an action or revealing
   content. Never bouncy, never decorative-looping. Premium =
   restraint. Default reveal: gentle fade + 12–16px rise.
   ============================================================ */

:root {
  /* ---- Durations ---- */
  --dur-instant: 80ms; /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */
  --dur-slower:  560ms; /* @kind other */

  /* ---- Easing (deliberately NO spring/bounce — premium calm) ---- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0.0, 1, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */

  /* ---- Common transition shorthands ---- */
  --transition-colors: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); /* @kind other */
  --transition-transform: transform var(--dur-base) var(--ease-out); /* @kind other */
  --transition-all: all var(--dur-base) var(--ease-standard); /* @kind other */

  /* reveal offset */
  --reveal-rise: 16px; /* @kind other */

  /* ---- Opacity scale ---- */
  --opacity-0:        0; /* @kind other */
  --opacity-disabled: 0.45; /* @kind other */
  --opacity-muted:    0.64; /* @kind other */
  --opacity-hover:    0.88; /* @kind other */
  --opacity-scrim:    0.55; /* @kind other */
  --opacity-full:     1; /* @kind other */

  /* ---- Border widths ---- */
  --border-w-hair: 1px; /* @kind other */
  --border-w-base: 1.5px; /* @kind other */
  --border-w-thick: 2px; /* @kind other */
  --border-w-accent: 3px; /* @kind other */

  /* ---- Z-index ---- */
  --z-base:     0; /* @kind other */
  --z-raised:   10; /* @kind other */
  --z-sticky:   100; /* @kind other */
  --z-dropdown: 300; /* @kind other */
  --z-overlay:  500; /* @kind other */
  --z-dialog:   600; /* @kind other */
  --z-toast:    800; /* @kind other */
  --z-cta:      900; /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; /* @kind other */
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
    --dur-slower: 0ms; /* @kind other */
    --reveal-rise: 0px; /* @kind other */
  }
}