/* =============================================================================
   Cobranzo brand · utilities
   ─────────────────────────────────────────────────────────────────────────────
   Spacing, radii, motion and container tokens. Co-exists with utilities.css
   (which uses --inline-space/--block-space). Opt-in via the `--cob-*` prefix.
   ============================================================================= */

:root {
  /* Spacing (8px rhythm; --cob-s-1 is 4px for inline fine-tune) */
  --cob-s-1:  4px;
  --cob-s-2:  8px;
  --cob-s-3:  12px;
  --cob-s-4:  16px;
  --cob-s-5:  24px;
  --cob-s-6:  32px;
  --cob-s-7:  48px;
  --cob-s-8:  64px;
  --cob-s-9:  96px;
  --cob-s-10: 128px;

  /* Radii */
  --cob-r-xs:   4px;
  --cob-r-sm:   8px;
  --cob-r-md:   12px;
  --cob-r-lg:   16px;
  --cob-r-xl:   24px;
  --cob-r-pill: 999px;

  /* Motion */
  --cob-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --cob-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --cob-dur-fast:    120ms;
  --cob-dur-base:    200ms;
  --cob-dur-slow:    320ms;

  /* Layout containers (use min() so the container never overflows the viewport) */
  --cob-container-marketing: 1200px;
  --cob-container-app:       1440px;
}

@layer utilities {
  .cob-container {
    inline-size: min(var(--cob-container-marketing), 92vw);
    margin-inline: auto;
  }

  .cob-container-app {
    inline-size: min(var(--cob-container-app), 96vw);
    margin-inline: auto;
  }

  .cob-hr {
    border: 0;
    border-block-start: 1px solid var(--cob-border);
    margin-block: clamp(var(--cob-s-5), 5vw, var(--cob-s-7));
  }
  .cob-hr--strong { border-block-start-color: var(--cob-border-2); }

  .cob-focus-ring:focus-visible {
    box-shadow: var(--cob-focus-ring);
    outline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.cob-link) { transition: none; }
}