/* ═══════════════════════════════════════════════════════════════════
   Ghawy — design tokens (TEAM-DASHBOARD-REDESIGN §3.5; renamed from
   team-tokens.css in PLATFORM-REDESIGN §5.1, content unchanged).

   The ONE source of truth for colour, type, spacing, radius, elevation,
   layering and motion on every page of the design system (/teamdashboard,
   then the member app). Loaded first; ghawy-ui.css and the shells only ever
   read these variables. Dark is the default; light overrides TOKENS ONLY
   (`:root[data-theme="light"]`) — there are no per-component light patches.

   Decisions recorded here:
   * One brand accent: the site's lime #c1ff11 (A6). The dashboard's old blue
     #3f8ff9 survives only as the "info" status colour.
   * Lime is a fill, never text on light: lime text on white is ~1.2:1. Text
     and the focus ring use --t-accent-ink (lime-800 #3f6212 on light — lime-700 was 4.46:1 on the soft lime fill,
     7.1:1 on white, 6.4:1 on that fill; the lime itself on dark, 16:1).
   * The four health statuses (Members Activity) are named tokens, used the
     same way in every tab, the member drawer and the overview.
   Contrast for every text/background pair: docs/evidence/dashboard-redesign/
   12-contrast.md.
═══════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── Surfaces ── */
  --t-bg:          #0a0a0b;
  --t-surface-1:   #121214;   /* cards, panels, the sidebar */
  --t-surface-2:   #18181b;   /* inputs, hover, raised */
  --t-surface-3:   #222227;   /* pressed / selected */
  --t-overlay:     rgba(0, 0, 0, .62);
  --t-border:      #27272c;
  --t-border-strong: #3a3a41;

  /* ── Text ── */
  --t-text:        #f4f4f5;
  --t-text-2:      #b4b4bb;   /* secondary */
  --t-text-3:      #8e8e97;   /* muted (≥ 4.5:1 on surface-1) */
  --t-text-inverse:#0a0a0b;

  /* ── Brand accent (lime) ── */
  --t-accent:      #c1ff11;   /* fills: primary button, active nav marker */
  --t-accent-hover:#d3ff5a;
  --t-accent-ink:  #c1ff11;   /* accent as TEXT / icon / focus ring */
  --t-accent-soft: rgba(193, 255, 17, .12);
  --t-on-accent:   #0a0a0b;
  --t-focus:       #c1ff11;

  /* ── Status ── */
  --t-success:     #4ade80;  --t-success-bg: rgba(34, 197, 94, .14);  --t-success-border: rgba(34, 197, 94, .34);
  --t-warning:     #fbbf24;  --t-warning-bg: rgba(245, 158, 11, .14); --t-warning-border: rgba(245, 158, 11, .34);
  --t-danger:      #f87171;  --t-danger-bg:  rgba(239, 68, 68, .14);  --t-danger-border:  rgba(239, 68, 68, .36);
  --t-info:        #60a5fa;  --t-info-bg:    rgba(59, 130, 246, .14); --t-info-border:    rgba(59, 130, 246, .34);
  --t-neutral:     #b4b4bb;  --t-neutral-bg: rgba(255, 255, 255, .07); --t-neutral-border: rgba(255, 255, 255, .14);
  --t-danger-fill: #dc2626;  /* danger button background (white text, 4.8:1) */

  /* ── Health (Members Activity) — one meaning everywhere ── */
  --t-health-healthy:  #4ade80;  --t-health-healthy-bg:  rgba(34, 197, 94, .14);
  --t-health-monitor:  #60a5fa;  --t-health-monitor-bg:  rgba(59, 130, 246, .14);
  --t-health-at-risk:  #fbbf24;  --t-health-at-risk-bg:  rgba(245, 158, 11, .14);
  --t-health-critical: #f87171;  --t-health-critical-bg: rgba(239, 68, 68, .15);

  /* ── Charts (read by ghawy-ui.js → Chart.js) ── */
  --t-chart-1: #c1ff11;   /* the brand series */
  --t-chart-2: #60a5fa;
  --t-chart-3: #f59e0b;
  --t-chart-4: #a78bfa;
  --t-chart-5: #f472b6;
  --t-chart-6: #4ade80;
  --t-chart-grid: rgba(255, 255, 255, .07);
  --t-chart-tick: #8e8e97;

  /* ── Type ── */
  --t-font: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --t-fs-12: 12px; --t-fs-13: 13px; --t-fs-14: 14px; --t-fs-16: 16px;
  --t-fs-20: 20px; --t-fs-24: 24px; --t-fs-32: 32px;
  --t-lh: 1.6;           /* Arabic needs the room for its ascenders/descenders */
  --t-lh-tight: 1.3;
  --t-fw-regular: 400; --t-fw-medium: 600; --t-fw-bold: 700; --t-fw-black: 800;

  /* ── Spacing (4 px grid) ── */
  --t-1: 4px;  --t-2: 8px;  --t-3: 12px; --t-4: 16px; --t-5: 20px;
  --t-6: 24px; --t-8: 32px; --t-10: 40px; --t-12: 48px;

  /* ── Radius ── */
  --t-r-sm: 6px; --t-r-md: 10px; --t-r-lg: 14px; --t-r-pill: 999px;

  /* ── Elevation ── */
  --t-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --t-shadow-2: 0 8px 24px rgba(0, 0, 0, .45);
  --t-shadow-3: 0 20px 60px rgba(0, 0, 0, .6);

  /* ── Layering ── */
  --t-z-sticky: 10; --t-z-sidebar: 40; --t-z-topbar: 50; --t-z-dropdown: 60;
  --t-z-drawer: 70; --t-z-modal: 80; --t-z-palette: 90; --t-z-toast: 100;

  /* ── Motion ── */
  --t-dur: 160ms; --t-dur-slow: 200ms;
  --t-ease: cubic-bezier(.2, .8, .2, 1);

  /* ── Layout ── */
  --t-topbar-h: 56px;
  --t-sidebar-w: 248px;
  --t-sidebar-w-collapsed: 64px;
  --t-row-h: 44px;          /* comfortable */
  --t-row-h-compact: 36px;  /* Linear-style dense rows */
  --t-content-max: 1440px;

  /* ── Member app (PLATFORM-REDESIGN wave 1) ── */
  --t-bottombar-h: 64px;                  /* the phone bottom bar (≤ 768 px), before env(safe-area-inset-bottom) */
  /* A course cover: the uploaded picture, or this gradient (§2, report 1.4). Both stay dark in either theme,
     because the text over them is white (--t-on-image). The glow sits on the far side from the text. */
  --t-on-image: #ffffff;
  --t-cover-gradient:
    radial-gradient(90% 120% at 100% 0%, rgba(193, 255, 17, .20) 0%, rgba(193, 255, 17, 0) 58%),
    radial-gradient(70% 90% at 0% 100%, rgba(63, 143, 249, .14) 0%, rgba(63, 143, 249, 0) 62%),
    linear-gradient(135deg, #0a0a0a 0%, #10160a 55%, #0a0a0a 100%);
  /* Over a picture, so white text stays ≥ 4.5:1 even on a white image (the 66 % scrim of course-detail). */
  --t-cover-scrim: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .66) 55%, rgba(0, 0, 0, .66) 100%);
  /* A picture with only a small label on it (course cards): a bottom fade, not the full scrim. */
  --t-cover-fade: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 45%);
  /* The video frame stays black in both themes (the players draw on black). */
  --t-player-bg: #000000;
  /* Google's sign-in button (developers.google.com/identity/branding-guidelines): fixed brand colours, dark theme. */
  --t-google-bg: #131314; --t-google-border: #8E918F; --t-google-text: #E3E3E3;
  --t-whatsapp: #25d366;   /* WhatsApp's brand green (its icon only) */
}

:root[data-theme="light"] {
  --t-google-bg: #FFFFFF; --t-google-border: #747775; --t-google-text: #1F1F1F;
  color-scheme: light;
  --t-bg:          #f5f5f6;
  --t-surface-1:   #ffffff;
  --t-surface-2:   #f4f4f5;
  --t-surface-3:   #e9e9ec;
  --t-overlay:     rgba(15, 15, 20, .45);
  --t-border:      #e4e4e7;
  --t-border-strong: #cfcfd5;

  --t-text:        #18181b;
  --t-text-2:      #4b4b54;
  --t-text-3:      #66666f;
  --t-text-inverse:#ffffff;

  --t-accent:      #c1ff11;
  --t-accent-hover:#b4f000;
  --t-accent-ink:  #3f6212;
  --t-accent-soft: rgba(132, 204, 22, .16);
  --t-on-accent:   #0a0a0b;
  --t-focus:       #3f6212;

  --t-success:     #166534;  --t-success-bg: rgba(22, 163, 74, .10);  --t-success-border: rgba(22, 163, 74, .32);
  --t-warning:     #854d0e;  --t-warning-bg: rgba(202, 138, 4, .12);  --t-warning-border: rgba(202, 138, 4, .36);
  --t-danger:      #b91c1c;  --t-danger-bg:  rgba(220, 38, 38, .09);  --t-danger-border:  rgba(220, 38, 38, .32);
  --t-info:        #1d4ed8;  --t-info-bg:    rgba(37, 99, 235, .09);  --t-info-border:    rgba(37, 99, 235, .30);
  --t-neutral:     #4b4b54;  --t-neutral-bg: rgba(0, 0, 0, .05);      --t-neutral-border: rgba(0, 0, 0, .12);
  --t-danger-fill: #dc2626;

  --t-health-healthy:  #166534;  --t-health-healthy-bg:  rgba(22, 163, 74, .10);
  --t-health-monitor:  #1d4ed8;  --t-health-monitor-bg:  rgba(37, 99, 235, .09);
  --t-health-at-risk:  #854d0e;  --t-health-at-risk-bg:  rgba(202, 138, 4, .12);
  --t-health-critical: #b91c1c;  --t-health-critical-bg: rgba(220, 38, 38, .09);

  --t-chart-1: #65a30d;
  --t-chart-2: #2563eb;
  --t-chart-3: #d97706;
  --t-chart-4: #7c3aed;
  --t-chart-5: #db2777;
  --t-chart-6: #16a34a;
  --t-chart-grid: rgba(0, 0, 0, .07);
  --t-chart-tick: #66666f;

  --t-shadow-1: 0 1px 2px rgba(16, 16, 24, .06);
  --t-shadow-2: 0 8px 24px rgba(16, 16, 24, .10);
  --t-shadow-3: 0 20px 60px rgba(16, 16, 24, .18);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-dur: 0ms; --t-dur-slow: 0ms; }
}

/* The cover gradient's glow mirrors with the text (it sits on the far side from it). */
:root[dir="rtl"] {
  --t-cover-gradient:
    radial-gradient(90% 120% at 0% 0%, rgba(193, 255, 17, .20) 0%, rgba(193, 255, 17, 0) 58%),
    radial-gradient(70% 90% at 100% 100%, rgba(63, 143, 249, .14) 0%, rgba(63, 143, 249, 0) 62%),
    linear-gradient(225deg, #0a0a0a 0%, #10160a 55%, #0a0a0a 100%);
}