/*
 * ThePeopleRating — design tokens
 * ------------------------------------------------------------------
 * Single source of truth for the palette, radius, shadows and type.
 * The landing page imports this file (see src/app/globals.css) and the
 * /brand page reads it to render the swatches.
 *
 * Reuse in the Blazor app:
 *   1. Copy this file to wwwroot/css/tokens.css
 *   2. <link rel="stylesheet" href="css/tokens.css" /> in index.html
 *   3. Load the font:
 *      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" />
 *   4. Use the variables, e.g.  background: var(--tpr-color-navy-900);
 *
 * Each colour sits on its own line with a trailing "Label · Usage" comment;
 * the /brand page parses those lines, so keep that format when editing.
 */

:root {
  /* Navy — base surfaces (from the app's #03173d) */
  --tpr-color-navy-950: #020e27; /* Navy 950 · Deepest background, footer */
  --tpr-color-navy-900: #03173d; /* Navy 900 · Brand navy, page background */
  --tpr-color-navy-800: #0a2452; /* Navy 800 · Raised surfaces, cards */
  --tpr-color-navy-700: #123368; /* Navy 700 · Borders on dark, hover surfaces */
  --tpr-color-navy-600: #1d4585; /* Navy 600 · Strong borders, dividers */

  /* People blue — the figures in the logo */
  --tpr-color-blue-300: #7cc6fb; /* Blue 300 · Links and highlights on navy */
  --tpr-color-blue-500: #0f90f1; /* Blue 500 · Secondary accent, focus ring */
  --tpr-color-blue-700: #0b6bd5; /* Blue 700 · Blue on light backgrounds */

  /* Star gold — the rating stars and the "Rating" wordmark */
  --tpr-color-gold-300: #f9d12f; /* Gold 300 · Star highlight */
  --tpr-color-gold-500: #faaf0d; /* Gold 500 · Primary accent, primary button */
  --tpr-color-orange-500: #f88e0a; /* Orange 500 · Gradient end, hover */

  /* Supporting logo colours */
  --tpr-color-green-500: #4cb847; /* Green 500 · Positive / success */
  --tpr-color-violet-500: #7625b2; /* Violet 500 · App-icon glow, gradients */

  /* Neutrals (text on navy) */
  --tpr-color-ink-50: #f5f8ff; /* Ink 50 · Headings and body text on navy */
  --tpr-color-ink-200: #c9d4ea; /* Ink 200 · Secondary text */
  --tpr-color-ink-400: #8ea0c2; /* Ink 400 · Muted text, captions */

  /* Semantic aliases */
  --tpr-bg: var(--tpr-color-navy-900);
  --tpr-surface: var(--tpr-color-navy-800);
  --tpr-border: var(--tpr-color-navy-700);
  --tpr-text: var(--tpr-color-ink-50);
  --tpr-text-muted: var(--tpr-color-ink-200);
  --tpr-accent: var(--tpr-color-gold-500);
  --tpr-accent-contrast: var(--tpr-color-navy-900);
  --tpr-focus: var(--tpr-color-blue-300);

  /* Gradients */
  --tpr-gradient-brand: linear-gradient(90deg, #0f90f1 0%, #faaf0d 100%);
  --tpr-gradient-stars: linear-gradient(135deg, #f9d12f 0%, #faaf0d 45%, #f88e0a 100%);
  --tpr-gradient-surface: linear-gradient(180deg, rgb(18 51 104 / 0.55) 0%, rgb(10 36 82 / 0.35) 100%);

  /* Radius */
  --tpr-radius-sm: 0.625rem;
  --tpr-radius-md: 1rem;
  --tpr-radius-lg: 1.5rem;
  --tpr-radius-pill: 9999px;

  /* Shadows & glows */
  --tpr-shadow-card: 0 1px 0 0 rgb(255 255 255 / 0.04) inset, 0 20px 40px -24px rgb(0 0 0 / 0.6);
  --tpr-shadow-glow-gold: 0 10px 30px -10px rgb(250 175 13 / 0.55);
  --tpr-shadow-glow-blue: 0 0 80px -20px rgb(15 144 241 / 0.45);

  /* Typography */
  --tpr-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tpr-text-xs: 0.75rem;
  --tpr-text-sm: 0.875rem;
  --tpr-text-base: 1rem;
  --tpr-text-lg: 1.125rem;
  --tpr-text-xl: 1.25rem;
  --tpr-text-2xl: 1.5rem;
  --tpr-text-3xl: 1.875rem;
  --tpr-text-4xl: 2.25rem;
  --tpr-text-5xl: 3rem;
  --tpr-text-6xl: 3.75rem;
}