/* Sport Club — Design Tokens (single source of truth)
   Extracted from the Figma CSS export (prototype/css_all.txt). */
:root {
  /* ---- colors ---- */
  --c-primary:#0557A9;      /* CTA / links */
  --c-primary-ink:#FFFFFF;
  --c-navy:#0E3763;         /* dark card buttons / headings */
  --c-navy-2:#004878;
  --c-cyan:#08D0DA;         /* logo accents */
  --c-cyan-2:#379FCE;
  --c-cyan-3:#3EB2C9;
  --c-green:#1EB882;        /* delegation / success CTA */
  --c-green-2:#12D18E;
  --c-success-text:#2E7D32; /* active status text (AA on light bg) */
  --c-success-bg:#D9F1CE;
  --c-warning-text:#B26A00; /* under-review text (AA) */
  --c-warning-bg:#FDE7CC;
  --c-danger:#D80027;       /* closed / logout */
  --c-danger-bg:#FADDE1;

  --c-text:#171C26;         /* primary text */
  --c-text-2:#272727;
  --c-text-3:#383838;
  --c-muted:#8391A1;        /* secondary text */
  --c-muted-2:#9E9E9E;

  --c-surface:#FFFFFF;      /* cards */
  --c-bg:#F7F8F9;           /* page background */
  --c-surface-2:#E8ECF4;    /* input fill */
  --c-bg-2:#FAFAFA;
  --c-border:#DADADA;
  --c-border-2:#EAEAEA;

  /* ---- typography ---- */
  --font-ar:"Tajawal", "Segoe UI", system-ui, sans-serif;
  --font-lat:"Inter", "Segoe UI", system-ui, sans-serif;
  --fs-8:8px;  --fs-10:10px; --fs-12:12px; --fs-14:14px; --fs-16:16px;
  --fs-18:18px; --fs-20:20px; --fs-22:22px; --fs-24:24px; --fs-30:30px; --fs-45:45px;
  --lh-body:1.6; --lh-tight:1.3;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:900;

  /* ---- radius ---- */
  --r-pill:32px; --r-lg:16px; --r-md:15px; --r-sm:8px; --r-round:50%;

  /* ---- spacing (4/8 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;

  /* ---- shadows ---- */
  --sh-card:0 0 15px rgba(0,0,0,.03), 0 2px 30px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.3);
  --sh-bottomnav:0 -2px 15px rgba(0,0,0,.1);
  --sh-frame:0 40px 80px rgba(12,12,12,.14);

  /* ---- motion ---- */
  --dur-fast:150ms; --dur:220ms; --ease:cubic-bezier(.4,0,.2,1);

  /* ---- app frame ---- */
  --frame-max:430px;
  --nav-h:76px;

  /* ---- z-index scale ---- */
  --z-nav:40; --z-drawer:100; --z-scrim:90;
}