/* ============================================================
   AgilityDogsWorld Rankings — Design Tokens
   Color palette, typography, spacing, breakpoints, shadows
   ============================================================ */

:root {
  /* ---- Primary palette ---- */
  --color-primary-900: #1c0a2e;
  --color-primary-800: #2e1065;
  --color-primary-700: #4c1d95;
  --color-primary-600: #6d28d9;
  --color-primary-500: #7c3aed;
  --color-primary-400: #8b5cf6;
  --color-primary-300: #a78bfa;
  --color-primary-200: #c4b5fd;
  --color-primary-100: #ede9fe;
  --color-primary-50:  #f5f3ff;

  --color-focus-ring: rgba(124, 58, 237, 0.15);

  /* ---- Secondary / accent ---- */
  --color-secondary-600: #db2777;
  --color-secondary-500: #ec4899;
  --color-secondary-400: #f472b6;
  --color-secondary-300: #f9a8d4;
  --color-secondary-200: #fbcfe8;
  --color-secondary-100: #fce7f3;

  /* ---- Neutrals ---- */
  --color-gray-950: #111118;
  --color-gray-900: #1a1a24;
  --color-gray-800: #2d2d3a;
  --color-gray-700: #44444f;
  --color-gray-600: #5c5c68;
  --color-gray-500: #76768a;
  --color-gray-400: #9898a8;
  --color-gray-300: #bcbcc8;
  --color-gray-200: #dddde4;
  --color-gray-100: #eeeff2;
  --color-gray-50:  #f5f5f8;

  /* ---- Semantic: backgrounds & surfaces ---- */
  --color-bg:            #fafafb;
  --color-surface:       #ffffff;
  --color-surface-alt:   var(--color-gray-50);   /* alternate surface for striped rows */
  --color-header-bg:     var(--color-primary-900);
  --color-header-text:   #ffffff;
  --color-footer-bg:     var(--color-gray-100);

  /* ---- Semantic: text ---- */
  --color-text:           var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary:  var(--color-gray-400);
  --color-text-inverse:   #ffffff;
  --color-link:           var(--color-primary-500);
  --color-link-hover:     var(--color-primary-700);

  /* ---- Tier badges ---- */
  --color-tier-elite:          #D4AF37;
  --color-tier-elite-bg:       #fdf5e0;
  --color-tier-elite-text:     #5c4a11;
  --color-tier-champion:       #A0A0A0;
  --color-tier-champion-bg:    #f0f0f0;
  --color-tier-champion-text:  #3a3a3a;
  --color-tier-expert:         #CD7F32;
  --color-tier-expert-bg:      #fdf0e2;
  --color-tier-expert-text:    #5a3510;
  --color-tier-competitor:     var(--color-gray-400);
  --color-tier-competitor-bg:  var(--color-gray-100);
  --color-tier-competitor-text: var(--color-gray-700);

  /* ---- Trend indicators ---- */
  --color-trend-up:         #1a8754;
  --color-trend-up-bg:      #e6f4ed;
  --color-trend-down:       #d1293d;
  --color-trend-down-bg:    #fce8ea;
  --color-trend-unchanged:  var(--color-gray-400);
  --color-trend-new:        #7c3aed;
  --color-trend-new-bg:     #ede9fe;

  /* ---- Status ---- */
  --color-success:     #1a8754;
  --color-success-bg:  #e6f4ed;
  --color-warning:     #d4950a;
  --color-warning-bg:  #fef7e0;
  --color-error:       #d1293d;
  --color-error-bg:    #fce8ea;
  --color-info:        #7c3aed;
  --color-info-bg:     #ede9fe;

  /* ---- Rank accent (podium) ---- */
  --color-rank-gold:    #D4AF37;
  --color-rank-silver:  #A0A0A0;
  --color-rank-bronze:  #CD7F32;

  /* ---- Competition tier ---- */
  --color-major:        var(--color-tier-elite);
  --color-major-bg:     var(--color-tier-elite-bg);
  --color-major-text:   var(--color-tier-elite-text);

  /* ============================================================
     Typography
     ============================================================ */

  --font-family-base:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji';

  --font-family-mono:
    'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas,
    'Liberation Mono', 'Courier New', monospace;

  /* Heading scale */
  --font-size-h1: 2rem;       /* 32px */
  --font-size-h2: 1.625rem;   /* 26px */
  --font-size-h3: 1.375rem;   /* 22px */
  --font-size-h4: 1.125rem;   /* 18px */
  --font-size-h5: 1rem;       /* 16px */
  --font-size-h6: 0.875rem;   /* 14px */

  /* Body */
  --font-size-base: 1rem;     /* 16px */
  --font-size-sm:   0.875rem; /* 14px */
  --font-size-xs:   0.75rem;  /* 12px */

  /* Data / numbers — same family, tabular figures */
  --font-size-data-xl: 2.5rem;   /* 40px  — big stat number */
  --font-size-data-lg: 1.75rem;  /* 28px  — rating on hero card */
  --font-size-data-md: 1.25rem;  /* 20px  — inline rating */
  --font-size-data-sm: 1rem;     /* 16px  — table rating */

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  --line-height-tight:  1.25;
  --line-height-base:   1.5;
  --line-height-loose:  1.75;

  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.02em;

  /* ============================================================
     Spacing scale (4px base)
     ============================================================ */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* ============================================================
     Breakpoints (used in @media queries, not as vars)
     Reference values:
       mobile:  0–639px
       tablet:  640–1023px
       desktop: 1024px+
     ============================================================ */

  /* ============================================================
     Border radius
     ============================================================ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ============================================================
     Shadows
     ============================================================ */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl:   0 8px 32px rgba(0, 0, 0, 0.16);

  /* ============================================================
     Transitions
     ============================================================ */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ============================================================
     Layout
     ============================================================ */
  --content-max-width: 1200px;
  --header-height:     64px;
  --filter-bar-height: 56px;
}

/* ============================================================
   Dark mode overrides
   ============================================================ */

[data-theme="dark"] {
  --color-bg:            #0c0a13;
  --color-surface:       #16131f;
  --color-surface-alt:   #1e1a2b;
  --color-header-bg:     #1c0a2e;
  --color-footer-bg:     #16131f;

  --color-text:           #ededf0;
  --color-text-secondary: #9898a8;
  --color-text-tertiary:  #6c6c7c;
  --color-text-inverse:   #ffffff;  /* stays white — used on colored/dark backgrounds */

  --color-link:           var(--color-primary-300);
  --color-link-hover:     var(--color-primary-200);

  /* Grays — darkened */
  --color-gray-950: #f5f5f8;
  --color-gray-900: #ededf0;
  --color-gray-800: #bcbcc8;
  --color-gray-700: #9898a8;
  --color-gray-600: #6c6c7c;
  --color-gray-500: #5c5c68;
  --color-gray-400: #44444f;
  --color-gray-300: #2d2d3a;
  --color-gray-200: #232030;
  --color-gray-100: #1e1a2b;
  --color-gray-50:  #16131f;

  /* Shadows — stronger for dark bg */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-xl:   0 8px 32px rgba(0, 0, 0, 0.6);

  /* Focus ring */
  --color-focus-ring: rgba(139, 92, 246, 0.3);

  /* Trend backgrounds — lower alpha */
  --color-trend-up-bg:      rgba(26, 135, 84, 0.15);
  --color-trend-down-bg:    rgba(209, 41, 61, 0.15);
  --color-trend-new-bg:     rgba(124, 58, 237, 0.15);

  /* Status backgrounds — lower alpha */
  --color-success-bg:  rgba(26, 135, 84, 0.15);
  --color-warning-bg:  rgba(212, 149, 10, 0.15);
  --color-error-bg:    rgba(209, 41, 61, 0.15);
  --color-info-bg:     rgba(124, 58, 237, 0.15);

  /* Tier badge backgrounds — darker */
  --color-tier-elite-bg:       rgba(212, 175, 55, 0.12);
  --color-tier-champion-bg:    rgba(160, 160, 160, 0.12);
  --color-tier-expert-bg:      rgba(205, 127, 50, 0.12);
  --color-tier-competitor-bg:  var(--color-gray-100);

  /* Tier badge text — lighter for dark bg */
  --color-tier-elite-text:     #f0d86e;
  --color-tier-champion-text:  #c8c8c8;
  --color-tier-expert-text:    #e8a85c;
  --color-tier-competitor-text: var(--color-gray-700);

  /* Major competition */
  --color-major-bg:     rgba(212, 175, 55, 0.12);
  --color-major-text:   #f0d86e;
}