/**
 * ChasteGPT Design System — Global CSS Tokens
 * Source of truth for colors, typography, spacing, and component defaults.
 * Load this in base.html before any other stylesheet.
 */

/* ─────────────────────────────────────────────
   BRAND & COLOR TOKENS
   ───────────────────────────────────────────── */
:root {
  /* Brand purple (primary action, links, rank numbers, active states) */
  --color-purple:         #8b5cf6;
  --color-purple-dark:    #7c3aed;   /* hover / pressed */
  --color-purple-light:   #a78bfa;   /* tints, focus rings */
  --color-magenta:        #b5259e;   /* brand-page nav logo variant */
  --color-pink:           #ec4899;   /* gradient partner, badge accents */

  /* Gradients */
  --gradient-brand:       linear-gradient(135deg, #8b5cf6, #ec4899);
  --gradient-brand-blue:  linear-gradient(135deg, #8b5cf6, #3b82f6);
  --gradient-hero-dark:   linear-gradient(135deg, #1a0a2e 0%, #0f0728 50%, #000 100%);

  /* Backgrounds */
  --bg-base:              #f7f7f8;   /* primary light background */
  --bg-purple-tint:       #f4f1f8;   /* brand pages */
  --bg-near-white:        #f8f9fa;
  --bg-white:             #ffffff;
  --bg-sidebar:           #2a2a2a;   /* chat sidebar */
  --bg-dark-hero:         #1a0a2e;
  --bg-dark-mid:          #0f0728;
  --bg-dark:              #000000;

  /* Text */
  --text-primary:         #202123;
  --text-primary-alt:     #1a1a1a;
  --text-secondary:       #666666;
  --text-tertiary:        #888888;
  --text-caption:         #999999;
  --text-on-dark:         #ffffff;
  --text-on-dark-muted:   #e0e0e0;
  --text-link:            #8b5cf6;
  --text-link-hover:      #7c3aed;

  /* Borders */
  --border-default:       #e5e5e5;
  --border-purple-tint:   #ede8f5;
  --border-purple-glow:   rgba(139, 92, 246, 0.2);
  --border-purple-strong: rgba(139, 92, 246, 0.3);
  --border-divider:       #f0f0f0;

  /* Score / semantic colors */
  --score-excellent:      #10b981;   /* ≥ 80 */
  --score-good:           #3b82f6;   /* ≥ 60 */
  --score-fair:           #f59e0b;   /* ≥ 40 */
  --score-poor:           #f97316;   /* ≥ 20 */
  --score-bad:            #ef4444;   /* < 20  */
  --color-savings:        #22c55e;
  --color-positive:       #10b981;
  --color-negative:       #ef4444;

  /* Shadows */
  --shadow-card:          0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-popup:         0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-focus:         0 0 0 2px rgba(139, 92, 246, 0.1);

  /* Border radius */
  --radius-sm:            6px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-pill:          24px;
  --radius-full:          9999px;

  /* Spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;

  /* Transitions */
  --transition-fast:      0.15s ease;
  --transition-base:      0.2s ease;

  /* Layout */
  --max-content-width:    700px;
  --nav-height:           48px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

  /* Type scale */
  --text-xs:    0.625rem;   /* 10px — micro badges */
  --text-sm:    0.75rem;    /* 12px — captions, meta */
  --text-base:  0.875rem;   /* 14px — small UI labels */
  --text-md:    1rem;       /* 16px — body */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px — widget titles */
  --text-2xl:   1.5rem;     /* 24px — section headings */
  --text-3xl:   1.75rem;    /* 28px — product name hero */
  --text-4xl:   2.25rem;    /* 36px — page h1 */
  --text-5xl:   2.5rem;     /* 40px — hero display */

  /* Weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     800;

  /* Line heights */
  --leading-tight:    1.2;
  --leading-snug:     1.35;
  --leading-normal:   1.5;
  --leading-relaxed:  1.625;

  /* Letter spacing */
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;
}

/* ─────────────────────────────────────────────
   UTILITY CLASSES
   ───────────────────────────────────────────── */

/* Gradient text (logo style) */
.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Score colors */
.score-excellent { color: var(--score-excellent); }
.score-good      { color: var(--score-good); }
.score-fair      { color: var(--score-fair); }
.score-poor      { color: var(--score-poor); }
.score-bad       { color: var(--score-bad); }

/* Uppercase section label (sidebar headers, table columns) */
.label-caps {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* Standard card */
.ds-card {
  background: var(--bg-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

/* Primary button */
.ds-btn-primary {
  padding: 0.65rem 1.25rem;
  background: var(--color-purple);
  color: var(--text-on-dark);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-family: var(--font-sans);
}
.ds-btn-primary:hover { background: var(--color-purple-dark); }

/* Gradient badge pill */
.ds-badge-gradient {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  background: var(--gradient-brand);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}