/*
 * Ready, Set, Cloud — design tokens
 * ---------------------------------
 * The single source of truth for the shared brand across every RSC surface
 * (newsletter dashboard, concurrency bootcamp platform, readysetcloud.io).
 *
 * Colors are RGB triplets so consumers can apply alpha:
 *   color: rgb(var(--primary-500));
 *   background: rgb(var(--primary-500) / 0.16);
 *
 * Brand decisions (2026-07):
 *   - primary #219EFF (marketing azure), full generated ramp, 500 = brand hex
 *   - error darkened to #C81E22 (deliberate move off the old rose)
 *   - Sora = headings, Manrope = body, JetBrains Mono = data/code
 *   - Raleway is the WORDMARK face only — never UI text (--font-logo)
 *   - radius 4-6px: sharper than the old app look, not fully square
 *
 * Dark mode follows the same convention the apps already use:
 *   system preference by default, explicit override via [data-theme].
 */

:root {
  /* ---- ground (azure-biased neutrals) ---- */
  --background: 247 250 252;
  --surface: 255 255 255;
  --foreground: 14 34 51;
  --muted: 238 244 248;
  --muted-foreground: 90 113 132;
  --border: 220 230 238;
  --ring: 33 158 255;

  /* ---- primary: azure ramp generated from #219EFF ---- */
  --primary-50: 235 246 255;
  --primary-100: 214 236 255;
  --primary-200: 173 217 255;
  --primary-300: 124 194 255;
  --primary-400: 78 174 255;
  --primary-500: 33 158 255;  /* #219EFF — the brand color */
  --primary-600: 11 130 230;
  --primary-700: 6 104 184;
  --primary-800: 10 84 144;
  --primary-900: 14 70 116;
  --primary-950: 8 43 74;

  /* ---- secondary: slate ---- */
  --secondary-50: 248 250 252;
  --secondary-100: 241 245 249;
  --secondary-200: 226 232 240;
  --secondary-300: 203 213 225;
  --secondary-400: 148 163 184;
  --secondary-500: 100 116 139;
  --secondary-600: 71 85 105;
  --secondary-700: 51 65 85;
  --secondary-800: 30 41 59;
  --secondary-900: 15 23 42;
  --secondary-950: 2 6 23;

  /* ---- success: teal ---- */
  --success-50: 236 253 248;
  --success-100: 209 250 239;
  --success-200: 167 243 223;
  --success-300: 110 231 207;
  --success-400: 52 211 191;
  --success-500: 20 184 166;
  --success-600: 15 143 127;
  --success-700: 15 107 94;
  --success-800: 15 83 72;
  --success-900: 14 64 56;
  --success-950: 7 39 35;

  /* ---- warning: orange ---- */
  --warning-50: 255 247 237;
  --warning-100: 255 237 213;
  --warning-200: 254 215 170;
  --warning-300: 253 186 116;
  --warning-400: 251 146 60;
  --warning-500: 249 115 22;
  --warning-600: 234 88 12;
  --warning-700: 194 65 12;
  --warning-800: 154 52 18;
  --warning-900: 124 45 18;
  --warning-950: 67 20 7;

  /* ---- error: deep red ramp around #C81E22 ---- */
  --error-50: 253 235 235;
  --error-100: 250 214 214;
  --error-200: 244 173 174;
  --error-300: 235 128 130;
  --error-400: 219 77 80;
  --error-500: 200 30 34;    /* #C81E22 */
  --error-600: 159 18 22;
  --error-700: 130 15 18;
  --error-800: 106 14 17;
  --error-900: 88 15 17;
  --error-950: 48 6 8;

  /* ---- shape: sharper, not square ---- */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-full: 999px;

  /* ---- elevation ---- */
  --shadow-soft: 0 1px 2px rgb(14 34 51 / 0.06), 0 4px 16px -6px rgb(14 34 51 / 0.12);
  --shadow-medium: 0 4px 24px -8px rgb(14 34 51 / 0.18);
  --shadow-large: 0 10px 40px -10px rgb(14 34 51 / 0.25);

  /* ---- typography ---- */
  --font-display: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --font-logo: 'Raleway', var(--font-display); /* wordmark lockups only */
}

/* Dark ground + inverted ramps. Two blocks, same values: system preference
   (unless an explicit theme is set) and explicit [data-theme="dark"]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --background: 6 20 32;
    --surface: 14 34 51;
    --foreground: 226 236 243;
    --muted: 20 41 58;
    --muted-foreground: 140 166 184;
    --border: 36 65 85;
    --ring: 78 174 255;

    --primary-50: 8 43 74;
    --primary-100: 14 70 116;
    --primary-200: 10 84 144;
    --primary-300: 6 104 184;
    --primary-400: 11 130 230;
    --primary-500: 33 158 255;
    --primary-600: 78 174 255;
    --primary-700: 124 194 255;
    --primary-800: 173 217 255;
    --primary-900: 214 236 255;
    --primary-950: 235 246 255;

    --secondary-50: 2 6 23;
    --secondary-100: 15 23 42;
    --secondary-200: 30 41 59;
    --secondary-300: 51 65 85;
    --secondary-400: 71 85 105;
    --secondary-500: 100 116 139;
    --secondary-600: 148 163 184;
    --secondary-700: 203 213 225;
    --secondary-800: 226 232 240;
    --secondary-900: 241 245 249;
    --secondary-950: 248 250 252;

    --success-50: 7 39 35;
    --success-100: 14 64 56;
    --success-200: 15 83 72;
    --success-300: 15 107 94;
    --success-400: 15 143 127;
    --success-500: 20 184 166;
    --success-600: 52 211 191;
    --success-700: 110 231 207;
    --success-800: 167 243 223;
    --success-900: 209 250 239;
    --success-950: 236 253 248;

    --warning-50: 67 20 7;
    --warning-100: 124 45 18;
    --warning-200: 154 52 18;
    --warning-300: 194 65 12;
    --warning-400: 234 88 12;
    --warning-500: 249 115 22;
    --warning-600: 251 146 60;
    --warning-700: 253 186 116;
    --warning-800: 254 215 170;
    --warning-900: 255 237 213;
    --warning-950: 255 247 237;

    --error-50: 48 6 8;
    --error-100: 88 15 17;
    --error-200: 106 14 17;
    --error-300: 130 15 18;
    --error-400: 159 18 22;
    --error-500: 219 77 80;
    --error-600: 235 128 130;
    --error-700: 244 173 174;
    --error-800: 250 214 214;
    --error-900: 253 235 235;
    --error-950: 253 235 235;

    --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 16px -6px rgb(0 0 0 / 0.5);
    --shadow-medium: 0 4px 24px -8px rgb(0 0 0 / 0.6);
    --shadow-large: 0 10px 40px -10px rgb(0 0 0 / 0.7);
  }
}

:root[data-theme='dark'] {
  --background: 6 20 32;
  --surface: 14 34 51;
  --foreground: 226 236 243;
  --muted: 20 41 58;
  --muted-foreground: 140 166 184;
  --border: 36 65 85;
  --ring: 78 174 255;

  --primary-50: 8 43 74;
  --primary-100: 14 70 116;
  --primary-200: 10 84 144;
  --primary-300: 6 104 184;
  --primary-400: 11 130 230;
  --primary-500: 33 158 255;
  --primary-600: 78 174 255;
  --primary-700: 124 194 255;
  --primary-800: 173 217 255;
  --primary-900: 214 236 255;
  --primary-950: 235 246 255;

  --secondary-50: 2 6 23;
  --secondary-100: 15 23 42;
  --secondary-200: 30 41 59;
  --secondary-300: 51 65 85;
  --secondary-400: 71 85 105;
  --secondary-500: 100 116 139;
  --secondary-600: 148 163 184;
  --secondary-700: 203 213 225;
  --secondary-800: 226 232 240;
  --secondary-900: 241 245 249;
  --secondary-950: 248 250 252;

  --success-50: 7 39 35;
  --success-100: 14 64 56;
  --success-200: 15 83 72;
  --success-300: 15 107 94;
  --success-400: 15 143 127;
  --success-500: 20 184 166;
  --success-600: 52 211 191;
  --success-700: 110 231 207;
  --success-800: 167 243 223;
  --success-900: 209 250 239;
  --success-950: 236 253 248;

  --warning-50: 67 20 7;
  --warning-100: 124 45 18;
  --warning-200: 154 52 18;
  --warning-300: 194 65 12;
  --warning-400: 234 88 12;
  --warning-500: 249 115 22;
  --warning-600: 251 146 60;
  --warning-700: 253 186 116;
  --warning-800: 254 215 170;
  --warning-900: 255 237 213;
  --warning-950: 255 247 237;

  --error-50: 48 6 8;
  --error-100: 88 15 17;
  --error-200: 106 14 17;
  --error-300: 130 15 18;
  --error-400: 159 18 22;
  --error-500: 219 77 80;
  --error-600: 235 128 130;
  --error-700: 244 173 174;
  --error-800: 250 214 214;
  --error-900: 253 235 235;
  --error-950: 253 235 235;

  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 16px -6px rgb(0 0 0 / 0.5);
  --shadow-medium: 0 4px 24px -8px rgb(0 0 0 / 0.6);
  --shadow-large: 0 10px 40px -10px rgb(0 0 0 / 0.7);
}