/* App design tokens for the website, taken from the Flutter theme code:
   lib/theme/app_colors.dart, app_typography.dart, app_borders.dart,
   app_spacing.dart, app_elevation.dart and lib/utils/rank_system.dart. */

/* The current rank colour. Registered so a rank change crossfades (300ms in
   the app's progress bar) instead of snapping. */
@property --accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #5C5E60;
}

:root {
  /* Fonts (AppTypography) */
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'Space Grotesk', ui-monospace, monospace;

  /* Colours (AppColors) */
  --brand: #1B5E42;
  --canvas: #F8F7F4;        /* app background */
  --snow: #FAFAF8;          /* dialog card */
  --white: #FFFFFF;
  --charcoal: #1A1A1A;
  --cool-gray: #8A8A85;     /* subtitle text, icons */
  --mid-gray: #5C5C5A;
  --silver: #E5E5E0;
  --track: #EAEAE6;         /* progress track */
  --muted-button: #F2F2F0;  /* close button, segmented track on a card */
  --page-track: #ECEAE4;    /* segmented track on the page */
  --hairline: #E8E6E1;
  --error: #BD2F3D;
  --success: #1B5E42;
  --hint: #FFA726;          /* AppColors.pangram: the "why rejected" line */
  --pangram-gold: #F5C518;  /* pangram star */
  --confetti-gold: #D4AF37; /* pangram banner and grid flash */
  --ad-fill: #E9E8E3;

  /* Rank accents (RankSystem.getRankAccentColor) */
  --rank-0: #5C5E60;
  --rank-1: #C07A3E;
  --rank-2: #1B5E42;
  --rank-3: #8B3D2A;
  --rank-4: #2B4F6E;
  --rank-5: #5C2842;

  /* Radii (AppBorders, LetterBoxDialog) */
  --radius-tile: 14px;
  --radius-dialog: 20px;
  --radius-banner: 16px;
  --radius-full: 999px;

  /* Elevation (AppElevation.flatLedge, light mode) */
  --shadow-flat: 0 2px 6px rgba(26, 26, 26, 0.07);
  --shadow-knob: 0 2px 6px rgba(0, 0, 0, 0.14);
  --shadow-menu: 0 8px 20px rgba(0, 0, 0, 0.16);

  /* Sizes (AppSpacing and the widgets) */
  --grid-gap: 10px;
  --button-height: 48px;
  --pill-height: 36px;
  --menu-row: 38px;
  --dialog-width: 340px;
  --scrim: rgba(0, 0, 0, 0.54);

  --accent: #5C5E60;
}