/* =============================================================================
   Petgully Deck — design tokens ("Sunrise & Sky", plan §2.1)
   One source of truth for color, depth, radius, type and motion. Dark mode is
   a v2 flip of these custom properties — never hardcode a hex in components.
   ========================================================================== */

:root {
  /* Palette — "Sunrise & Sea": teal chrome + orange action moments */
  --sunrise:      #FF7A50;
  --sunrise-deep: #E85B2E;   /* AA-safe orange for text on light surfaces */
  --sunrise-soft: #FFEAE1;
  --sky:          #3BC4C1;   /* sea green — knowledge, trust, chrome */
  --sky-deep:     #0F8F8C;
  --sky-soft:     #DEF6F5;
  --ink:          #1F3D45;   /* deep sea slate — never pure black */
  --ink-60:       rgba(31, 61, 69, .64);
  --ink-40:       rgba(31, 61, 69, .42);
  --mist:         #EDF8F9;   /* pale aqua canvas */
  --card:         #FFFFFF;
  --mint:         #2FBF8F;
  --mint-soft:    #DFF6EE;
  --butter:       #FFC94D;
  --butter-deep:  #B37D00;
  --butter-soft:  #FFF3D6;

  /* Depth — soft, diffuse, teal-tinted (no hard edges) */
  --shadow-1: 0 3px 14px rgba(23, 74, 80, .05);
  --shadow-2: 0 10px 36px rgba(23, 74, 80, .09);
  --shadow-3: 0 18px 52px rgba(23, 74, 80, .14);

  /* Radius — generous and round */
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* Type — rounded geometric (Quicksand), friendly like the reference UIs */
  --font: "Quicksand", ui-rounded, ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: .75rem;
  --fs-sm: .84rem;
  --fs-md: .95rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.5rem;
  --fs-hero: clamp(1.7rem, 2.6vw, 2.3rem);
  --fs-stat: clamp(1.9rem, 2.8vw, 2.6rem);

  /* Motion (GPU-cheap, interruptible, plan §2.3) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 150ms;
  --t-med: 280ms;

  /* Layout */
  --rail-w: 232px;          /* expanded rail; collapses to icons <1200px */
  --right-rail-w: 296px;
  --content-max: 1280px;
  --gap: 18px;
}

/* Cross-document View Transitions (plan §2.3) — native, zero JS */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}