/* ============================================================
   ATHLETIK — Design System foundation
   ------------------------------------------------------------
   Loaded on every page BEFORE its own inline styles. This file
   is the single source of truth for cross-cutting rules:
   tokens, motion, accessibility, focus, tap targets. It is
   intentionally ADDITIVE — it introduces shared tokens and safe
   global behaviour without restyling any page's layout, so the
   whole app reads as one system while nothing existing breaks.
   ============================================================ */
:root{
  /* ---- spacing scale (4-based rhythm) ---- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;

  /* ---- radius ---- */
  --rad-xs:5px; --rad-sm:8px; --rad-md:12px; --rad-lg:16px; --rad-xl:22px; --rad-pill:100px;

  /* ---- elevation (soft, restrained) ---- */
  --el-1:0 1px 2px rgba(16,16,16,.05);
  --el-2:0 6px 18px rgba(16,16,16,.07);
  --el-3:0 14px 36px rgba(16,16,16,.10);
  --el-4:0 26px 64px rgba(16,16,16,.12);

  /* ---- motion ---- */
  --dur-1:140ms;  /* interaction feedback  */
  --dur-2:220ms;  /* standard UI transition */
  --dur-3:360ms;  /* entrance               */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);

  /* ---- fluid type scale (opt-in via .ds-* or var()) ---- */
  --fs-display:clamp(34px,6.2vw,64px);
  --fs-h1:clamp(28px,4.6vw,48px);
  --fs-h2:clamp(22px,3.2vw,32px);
  --fs-h3:clamp(18px,2.1vw,22px);
  --fs-body:16px;
  --fs-small:13.5px;
  --fs-caption:12px;

  /* ---- focus ---- */
  --ds-focus:#1A1A1A;
}

/* ---- base polish (safe, global) ---- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
::selection{background:#111;color:#fff}
img,video,svg{max-width:100%}

/* accessible, on-brand focus — keyboard users only, never removed */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ds-focus);
  outline-offset:2px;
}

/* comfortable tap targets on touch screens */
@media (max-width:860px){
  input,textarea,select{font-size:16px}  /* stop iOS zoom-on-focus everywhere */
}

/* ------------------------------------------------------------
   Unified control + surface radius (design-system enforced).
   The app previously used 5/6/8/9/100px on buttons and
   5/12/14/22px on cards. One value each now, everywhere.
   Loaded before page styles, so !important is what makes the
   single source of truth win over per-page inline rules.
   ------------------------------------------------------------ */
.btn,.btn-dark,.btn-ghost,.big-btn,.next,.cta,.newchat,.bd-btn,.mini,.go{
  border-radius:var(--rad-sm)!important;   /* 8px */
}
.card{ border-radius:14px!important; }

/* subtle, premium entrance — opt-in, non-blocking */
@media (prefers-reduced-motion: no-preference){
  @keyframes ds-rise{from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:none}}
  .ds-rise{animation:ds-rise var(--dur-3) var(--ease-out) both}
  .ds-stagger>*{animation:ds-rise var(--dur-3) var(--ease-out) both}
  .ds-stagger>*:nth-child(2){animation-delay:45ms}
  .ds-stagger>*:nth-child(3){animation-delay:90ms}
  .ds-stagger>*:nth-child(4){animation-delay:135ms}
  .ds-stagger>*:nth-child(5){animation-delay:180ms}
  .ds-stagger>*:nth-child(6){animation-delay:225ms}
  .ds-stagger>*:nth-child(7){animation-delay:270ms}
  .ds-stagger>*:nth-child(8){animation-delay:315ms}
}

/* ---- loading skeleton primitive (for data-driven widgets) ---- */
.ds-skeleton{
  background:linear-gradient(90deg,rgba(26,26,26,.06) 25%,rgba(26,26,26,.11) 37%,rgba(26,26,26,.06) 63%);
  background-size:200% 100%; border-radius:var(--rad-sm); color:transparent!important;
}
.card.dark .ds-skeleton,:root[data-theme="dark"] .ds-skeleton{
  background:linear-gradient(90deg,rgba(255,255,255,.07) 25%,rgba(255,255,255,.13) 37%,rgba(255,255,255,.07) 63%);
  background-size:200% 100%;
}
@media (prefers-reduced-motion: no-preference){
  @keyframes ds-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
  .ds-skeleton{animation:ds-shimmer 1.4s ease-in-out infinite}
}

/* ---- opt-in interactive hover lift (desktop pointers only) ---- */
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .ds-lift{transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out)}
  .ds-lift:hover{transform:translateY(-2px); box-shadow:var(--el-2)}
}

/* honour reduced-motion preferences everywhere */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}