/* ============================================================
   reftrack — DESIGN TOKENS
   The single source of truth for colour, spacing, radii and type.

   Rules:
     1. Never write a raw hex in a view, a component or style.css.
        If a value is missing here, ADD IT HERE and reference it.
     2. Name by ROLE, not by appearance. --danger, not --red.
     3. Dark is the default. Light is an override, never the base.

   Why this file exists: the app grew three unrelated palettes
   (style.css, landing.css and an inline one in profile_page.php)
   plus 391 distinct hardcoded hex values — including three
   different reds and two different greens all meaning the same
   thing. Nothing could be moved between pages because the token
   NAMES did not match either (--text vs --ink, --border vs --line).
   ============================================================ */

:root {

  /* ---- Ground & surfaces (dark, the default) --------------- */
  --bg:            #080d1a;   /* page ground                    */
  --bg-elevated:   #0f1629;   /* cards sitting on the ground    */
  --surface:       #141b2d;   /* inputs, chips, raised controls */
  --surface-hover: #1a2338;
  --sidebar-bg:    #050a14;

  /* ---- Text ------------------------------------------------ */
  --text:          #e2e8f0;   /* primary copy                   */
  --text-strong:   #ffffff;   /* headings, key numbers          */
  --text-muted:    #64748b;   /* labels, secondary copy         */
  --text-subtle:   #94a3b8;   /* tertiary, timestamps           */

  /* ---- Lines ----------------------------------------------- */
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);

  /* ---- Brand ----------------------------------------------- *
   * The partner dashboard is OURS, so it is brand-purple for
   * every partner regardless of rank. The public profile is
   * THEIRS and recolours per rank — see --tier-* below.        */
  --brand:         #a855f7;
  --brand-strong:  #7e22ce;
  --brand-bright:  #c084fc;
  --brand-deep:    #4c1d95;
  --brand-tint:    rgba(168,85,247,.10);
  --brand-line:    rgba(168,85,247,.26);
  --brand-glow:    rgba(168,85,247,.34);

  /* ---- Status ---------------------------------------------- *
   * One value per role. #e74c3c (72 uses), #e53e3e (8 uses) and
   * #27ae60 (23 uses) are legacy duplicates — map them here,
   * never reintroduce them.                                    */
  --success:       #10b981;
  --success-tint:  rgba(16,185,129,.12);
  --danger:        #ef4444;
  --danger-tint:   rgba(239,68,68,.12);
  --warning:       #f59e0b;
  --warning-tint:  rgba(245,158,11,.12);
  --info:          #3b82f6;
  --info-tint:     rgba(59,130,246,.12);

  /* ---- Rank colours ---------------------------------------- *
   * Mirrors partner_ranks.color in the database. These are the
   * seeded defaults; the DB value always wins at runtime, since
   * admin can recolour any tier. Used for the dashboard progress
   * bar and to theme the whole public profile.                 */
  --tier-bronze:   #cd7f32;
  --tier-silver:   #9ca3af;
  --tier-gold:     #f59e0b;
  --tier-platinum: #38bdf8;
  --tier-diamond:  #a855f7;

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

  /* ---- Radii ----------------------------------------------- *
   * The codebase currently uses 8/10/12/14/16/18/20px almost at
   * random. These four are the sanctioned steps.               */
  --radius-sm:   8px;
  --radius:     12px;   /* default: cards, panels              */
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* ---- Type ------------------------------------------------ *
   * Cairo carries Arabic; the stack degrades for Latin.        */
  --font: 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --text-xs:   11px;   /* uppercase labels                     */
  --text-sm:   13px;
  --text-base: 14px;
  --text-lg:   17px;
  --text-xl:   22px;   /* page titles                          */
  --text-2xl:  28px;   /* stat values                          */

  --weight-normal: 400;
  --weight-medium: 600;
  --weight-bold:   700;
  --weight-black:  900;

  /* ---- Elevation ------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
  --shadow:    0 2px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.55);

  /* ---- Layout ---------------------------------------------- */
  --sidebar-w: 240px;
  --header-h:  60px;

  /* ---- Motion ---------------------------------------------- */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --duration:  .18s;
}

/* ============================================================
   LIGHT THEME
   Only tokens are redefined — never a component rule. Retained
   for the admin surfaces; the partner dashboard and the public
   profile are deliberately dark-only.
   ============================================================ */
[data-theme="light"] {
  --bg:            #f4f6fa;
  --bg-elevated:   #ffffff;
  --surface:       #ffffff;
  --surface-hover: #f1f5f9;

  --text:          #2d3748;
  --text-strong:   #101418;
  --text-muted:    #718096;
  --text-subtle:   #8b95a3;

  --border:        #e2e8f0;
  --border-strong: #cbd5e1;

  --brand:         #7e22ce;
  --brand-strong:  #6b21a8;
  --brand-bright:  #a855f7;
  --brand-tint:    rgba(126,34,206,.08);
  --brand-line:    rgba(126,34,206,.22);

  --success:       #059669;
  --danger:        #dc2626;
  --warning:       #d97706;
  --info:          #2563eb;

  --shadow-sm: 0 1px 4px rgba(16,24,40,.06);
  --shadow:    0 2px 12px rgba(16,24,40,.08);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.12);
}

/* ============================================================
   APP SHELL SCOPE — the authenticated dashboard + auth pages

   These pages run a violet/glass palette that is NOT the base
   :root above (which serves the public landing and legal pages).
   Previously this lived in TWO stacked blocks near the bottom of
   style.css, the second silently overriding the first — so the
   dashboard's real accent was #a98cff even though :root claimed
   #3b82f6. Both are folded here, resolved to the winning values.

   The partner dashboard is dark-only, so light-theme tokens must
   not leak in — that is why this scope re-asserts them.
   ============================================================ */
body:has(.app-layout),
body.auth-page {
  --bg:            #060510;
  --bg-elevated:   rgba(12, 11, 24, .78);
  --surface:       rgba(16, 14, 32, .82);
  --surface-hover: rgba(22, 19, 42, .86);
  --sidebar-bg:    rgba(8, 7, 18, .78);

  --text:          #f5f8ff;
  --text-strong:   #ffffff;
  --text-muted:    #8b9ab8;
  --text-subtle:   #9aa6c6;

  --border:        rgba(188, 165, 255, .16);
  --border-strong: rgba(188, 165, 255, .28);

  --brand:         #a98cff;
  --brand-strong:  #7f5dff;
  --brand-bright:  #c4b0ff;
  --brand-tint:    rgba(169, 140, 255, .10);
  --brand-line:    rgba(169, 140, 255, .26);
  --brand-glow:    rgba(169, 140, 255, .34);

  --success:       #37f0a1;
  --warning:       #f8c14f;
  --danger:        #ff5f7a;

  --private-glow:  0 22px 70px rgba(0, 0, 0, .42);

  /* Legacy aliases MUST be restated inside every scope that
     overrides what they point at. A custom property resolves in the
     element where it is DECLARED: `--primary: var(--brand)` sitting
     in :root resolves on <html>, against the base brand — this
     body-level override would never reach it, and .stat-card
     (background: var(--white)) would silently render the wrong
     surface. */
  --bg-card:    var(--bg-elevated);
  --white:      var(--bg-elevated);
  --primary:    var(--brand);
  --primary-dk: var(--brand-strong);
}

/* ============================================================
   LEGACY ALIASES
   style.css and existing views reference these older names.
   Keeping them pointed at the tokens means the migration can be
   incremental instead of one enormous risky commit.

   DO NOT use these in new code.
   ============================================================ */
:root {
  --bg-card:    var(--bg-elevated);
  --white:      var(--bg-elevated);   /* misleading name, dark value */
  --primary:    var(--brand);
  --primary-dk: var(--brand-strong);
  --card-radius: var(--radius);
}