/* ============================================================
   ATHLETIK — Design System foundation (atk.css)
   ------------------------------------------------------------
   The single source of truth for tokens + primitive components.
   Namespaced (--atk-* / .atk-*) so it is PURELY ADDITIVE: it can
   be linked into any existing page without overriding a single
   current style. Screens migrate onto these classes pass by pass;
   nothing breaks on the way.

   Load once, in <head>:  <link rel="stylesheet" href="assets/atk.css">
   ============================================================ */

:root{
  /* ---- surfaces ---- */
  --atk-paper:#FAFAF9;         /* app ground */
  --atk-wash:#F6F5F3;          /* inset ground */
  --atk-raise:#FFFFFF;         /* raised card */
  --atk-panel:#141414;         /* dark surface */
  --atk-on-panel:#F4F4F4;
  --atk-on-panel-muted:rgba(244,244,244,.56);
  --atk-on-panel-line:rgba(244,244,244,.14);

  /* ---- ink ---- */
  --atk-ink:#0E0E0E;
  --atk-ink-2:#2E2E2E;
  --atk-muted:#8A8A8A;
  --atk-faint:#B4B2AE;
  --atk-line:rgba(14,14,14,.10);
  --atk-line-2:rgba(14,14,14,.06);

  /* ---- accent + semantic ---- */
  --atk-acid:#C9E88C;          /* accent / "ATHLETIK is speaking" */
  --atk-acid-deep:#7EA83A;     /* accent on light ground */
  --atk-acid-ink:#0E0E0E;      /* text on acid fill */
  --atk-tag-grad:linear-gradient(90deg,#E0EDD0 0%,#D4E3A1 100%); /* universal callout-tag pill */
  --atk-tag-ink:#14320A;       /* text on the callout-tag gradient */
  --atk-warn:#E8C24A;
  --atk-crit:#C4643E;

  /* ---- geometry ---- */
  --atk-r:6px;
  --atk-r-lg:10px;
  --atk-r-pill:100px;
  --atk-shadow:0 1px 2px rgba(14,14,14,.04), 0 10px 30px rgba(14,14,14,.05);
  --atk-shadow-pop:0 12px 40px rgba(14,14,14,.14);

  /* ---- spacing (4px base) ---- */
  --atk-1:4px; --atk-2:8px; --atk-3:12px; --atk-4:16px;
  --atk-5:20px; --atk-6:24px; --atk-8:32px; --atk-10:40px; --atk-16:64px;

  /* ---- motion + layering ---- */
  --atk-ease:cubic-bezier(.16,1,.3,1);
  --atk-fast:.16s; --atk-med:.28s;
  --atk-z-nav:60; --atk-z-sticky:40; --atk-z-drawer:120; --atk-z-scrim:115; --atk-z-modal:200; --atk-z-toast:300;

  /* ---- type ---- */
  --atk-sans:"Inter",system-ui,-apple-system,sans-serif;
  --atk-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
/* Breakpoints (reference; CSS vars can't drive @media):
   xs 320 · sm 390 · md 430 · lg 768 · xl 1024 · 2xl 1280 · 3xl 1440 */

/* ============================ BUTTON ============================
   One height/padding/radius logic. Variants change only color. */
.atk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--atk-sans);font-size:14.5px;font-weight:600;line-height:1;
  min-height:44px;padding:0 20px;border:1px solid transparent;border-radius:var(--atk-r);
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:transform var(--atk-fast) var(--atk-ease), background var(--atk-fast), border-color var(--atk-fast), opacity var(--atk-fast);
  -webkit-tap-highlight-color:transparent;
}
.atk-btn:hover{transform:translateY(-1px)}
.atk-btn:active{transform:translateY(0)}
.atk-btn:focus-visible{outline:2px solid var(--atk-acid-deep);outline-offset:2px}
.atk-btn[disabled],.atk-btn.is-disabled{opacity:.45;pointer-events:none;transform:none}
.atk-btn svg{width:18px;height:18px;flex:none}

.atk-btn--primary{background:var(--atk-ink);color:#fff}
.atk-btn--secondary{background:var(--atk-raise);color:var(--atk-ink);border-color:var(--atk-line)}
.atk-btn--secondary:hover{border-color:rgba(14,14,14,.24)}
.atk-btn--accent{background:var(--atk-acid);color:var(--atk-acid-ink)}
.atk-btn--ghost{background:transparent;color:var(--atk-muted);min-height:auto;padding:10px 12px}
.atk-btn--ghost:hover{color:var(--atk-ink);transform:none}
.atk-btn--danger{background:var(--atk-crit);color:#fff}
.atk-btn--icon{padding:0;width:44px;min-height:44px;background:var(--atk-raise);color:var(--atk-ink);border-color:var(--atk-line)}

.atk-btn--sm{min-height:36px;padding:0 14px;font-size:13.5px}
.atk-btn--lg{min-height:52px;padding:0 26px;font-size:15.5px}
.atk-btn--full{width:100%}
.atk-btn.is-loading{color:transparent;position:relative;pointer-events:none}
.atk-btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:atk-spin .7s linear infinite;color:#fff}
.atk-btn--secondary.is-loading::after,.atk-btn--ghost.is-loading::after,.atk-btn--icon.is-loading::after{color:var(--atk-ink)}
@keyframes atk-spin{to{transform:rotate(360deg)}}

/* on a dark panel */
.atk-on-dark .atk-btn--primary{background:var(--atk-on-panel);color:var(--atk-panel)}
.atk-on-dark .atk-btn--secondary{background:transparent;color:var(--atk-on-panel);border-color:var(--atk-on-panel-line)}

/* ============================ CARD ============================ */
.atk-card{background:var(--atk-raise);border:1px solid var(--atk-line);border-radius:var(--atk-r-lg);padding:clamp(16px,3vw,22px)}
.atk-card--flat{background:var(--atk-wash);border-color:transparent}
.atk-card--dark{background:var(--atk-panel);color:var(--atk-on-panel);border-color:transparent}
.atk-card--interactive{transition:transform var(--atk-fast) var(--atk-ease), box-shadow var(--atk-fast), border-color var(--atk-fast);cursor:pointer}
.atk-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--atk-shadow);border-color:rgba(14,14,14,.16)}
.atk-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.atk-card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--atk-line)}

/* ============================ LABELS / TYPE ============================ */
.atk-kicker{font-family:var(--atk-mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--atk-muted)}
.atk-metric{font-family:var(--atk-sans);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.02em}
.atk-mono{font-family:var(--atk-mono);font-variant-numeric:tabular-nums}

/* ============================ FORM ============================ */
.atk-field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.atk-label{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--atk-muted)}
.atk-input,.atk-select,.atk-textarea{
  width:100%;min-height:44px;font-family:var(--atk-sans);font-size:16px;color:var(--atk-ink);
  background:var(--atk-wash);border:1px solid var(--atk-line);border-radius:var(--atk-r);
  padding:11px 13px;outline:none;transition:border-color var(--atk-fast), box-shadow var(--atk-fast);
}
.atk-textarea{min-height:88px;resize:vertical;line-height:1.5}
.atk-input:focus,.atk-select:focus,.atk-textarea:focus{border-color:var(--atk-ink);box-shadow:0 0 0 3px rgba(14,14,14,.06)}
.atk-input::placeholder,.atk-textarea::placeholder{color:var(--atk-faint)}
.atk-input[aria-invalid="true"],.atk-field.is-error .atk-input{border-color:var(--atk-crit)}
.atk-help{font-size:12.5px;color:var(--atk-muted)}
.atk-error{font-size:12.5px;color:var(--atk-crit)}
.atk-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 13px center;padding-right:38px}

/* toggle */
.atk-toggle{position:relative;display:inline-flex;width:44px;height:26px;flex:none;cursor:pointer}
.atk-toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.atk-toggle .track{width:100%;height:100%;border-radius:100px;background:var(--atk-line);transition:background var(--atk-fast)}
.atk-toggle .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform var(--atk-fast) var(--atk-ease)}
.atk-toggle input:checked + .track{background:var(--atk-ink)}
.atk-toggle input:checked + .track::after{transform:translateX(18px)}
.atk-toggle input:focus-visible + .track{outline:2px solid var(--atk-acid-deep);outline-offset:2px}

/* ============================ BADGE / PILL ============================ */
.atk-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:var(--atk-r-pill);border:1px solid var(--atk-line);color:var(--atk-muted);background:var(--atk-raise)}
.atk-badge--good{border-color:rgba(126,168,58,.4);color:var(--atk-acid-deep)}
.atk-badge--warn{border-color:rgba(232,194,74,.5);color:#9a7d17}
.atk-badge--crit{border-color:rgba(196,100,62,.5);color:var(--atk-crit)}
.atk-badge--solid{background:var(--atk-ink);color:#fff;border-color:transparent}

/* Callout tag — the universal green gradient pill (chat suggestions, quick
   actions, agent chips). One gradient, one ink color, everywhere. */
.atk-tag{display:inline-flex;align-items:center;gap:6px;border:none;cursor:pointer;
  background:var(--atk-tag-grad);color:var(--atk-tag-ink);border-radius:8px;
  padding:5px 11px;font-size:12px;font-weight:600;line-height:1.3;text-decoration:none;
  transition:transform var(--atk-fast) var(--atk-ease), box-shadow var(--atk-fast), filter var(--atk-fast)}
.atk-tag:hover{filter:brightness(1.02);transform:translateY(-1px);box-shadow:0 5px 14px rgba(158,190,90,.28)}
.atk-tag:active{transform:translateY(0)}

/* ============================ TABS / SEGMENTED ============================ */
.atk-seg{display:inline-flex;gap:3px;background:var(--atk-wash);border:1px solid var(--atk-line);padding:4px;border-radius:12px}
.atk-seg button{font-size:13.5px;font-weight:600;color:var(--atk-muted);padding:9px 16px;border-radius:9px;border:none;background:none;cursor:pointer;transition:.15s}
.atk-seg button.is-on{background:var(--atk-raise);color:var(--atk-ink);box-shadow:0 1px 4px rgba(0,0,0,.05)}

/* ============================ EMPTY STATE ============================ */
.atk-empty{text-align:center;padding:44px 20px;color:var(--atk-muted);background:var(--atk-raise);border:1px solid var(--atk-line);border-radius:var(--atk-r-lg)}
.atk-empty h3{color:var(--atk-ink);font-size:18px;margin:0 0 8px;font-weight:600;letter-spacing:-.01em}
.atk-empty p{margin:0 auto;max-width:44ch;font-size:14px;line-height:1.5}
.atk-empty .atk-empty__cta{margin-top:18px;display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ============================ SKELETON ============================ */
.atk-skeleton{position:relative;overflow:hidden;background:var(--atk-line-2);border-radius:var(--atk-r)}
.atk-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:atk-shimmer 1.3s infinite}
@keyframes atk-shimmer{100%{transform:translateX(100%)}}

.atk-skeleton--text{height:12px;border-radius:4px;margin:6px 0}
.atk-skeleton--title{height:20px;border-radius:5px;margin:8px 0}
.atk-skeleton--line{height:14px;border-radius:4px}
.atk-skeleton--block{height:64px;border-radius:var(--atk-r-lg)}

/* ============================ SPINNER ============================ */
.atk-spinner{display:inline-block;width:16px;height:16px;flex:none;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:atk-spin .7s linear infinite;vertical-align:middle}
.atk-spinner--lg{width:24px;height:24px;border-width:2.5px}
.atk-spinner--sm{width:13px;height:13px}
.atk-loading-row{display:inline-flex;align-items:center;gap:10px;color:var(--atk-muted);font-size:13.5px}

/* ============================ UNIVERSAL STATES ============================ */
/* Keyboard focus ring — one consistent, accessible ring for interactive
   elements that don't define their own. Inputs keep their Pass-3 box-shadow
   ring; :focus-visible means mouse clicks stay clean, keyboard nav is clear. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
summary:focus-visible{outline:2px solid var(--atk-acid-deep);outline-offset:2px}

/* Consistent disabled affordance across native controls */
button:disabled,
[aria-disabled="true"],
input:disabled,select:disabled,textarea:disabled{cursor:not-allowed}
button:disabled:not(.atk-btn),
[aria-disabled="true"]:not(.atk-btn){opacity:.5}
input:disabled,select:disabled,textarea:disabled{opacity:.6}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion:reduce){
  .atk-btn,.atk-card--interactive,.atk-toggle .track::after{transition:none}
  .atk-btn:hover,.atk-card--interactive:hover{transform:none}
  .atk-skeleton::after,.atk-btn.is-loading::after,.atk-spinner{animation:none}
}