/*
 * Material Design M1 (2014-era spec) design tokens.
 * https://m1.material.io
 *
 * Configure the app's theme by changing --color-primary / --color-accent.
 * Per-class colors (screenshot 2/1) are stored per-row in the `classes`
 * table and are independent of these theme tokens.
 */

:root {
  /* Theme colors */
  --color-primary: #1976d2;
  --color-primary-dark: #115293;
  --color-primary-light: #4791db;
  --color-accent: #ff4081;
  --color-on-primary: #ffffff;
  --color-on-accent: #ffffff;

  /* Surfaces & text (light theme, per M1 spec) */
  --color-background: #fafafa;
  --color-surface: #ffffff;
  --color-text-primary: rgba(0, 0, 0, 0.87);
  --color-text-secondary: rgba(0, 0, 0, 0.6);
  --color-text-disabled: rgba(0, 0, 0, 0.38);
  --color-divider: rgba(0, 0, 0, 0.12);

  /* Status chip colors (Approved / Ready / Taught) */
  --color-status-approved: #43a047;
  --color-status-ready: #fb8c00;
  --color-status-taught: #1e88e5;

  /* 8dp baseline spacing grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* M1 elevation shadow key heights */
  --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --elevation-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  --elevation-4: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  --elevation-8: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  --elevation-16: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

.elevation-1 { box-shadow: var(--elevation-1); }
.elevation-2 { box-shadow: var(--elevation-2); }
.elevation-4 { box-shadow: var(--elevation-4); }
.elevation-8 { box-shadow: var(--elevation-8); }
.elevation-16 { box-shadow: var(--elevation-16); }

/* M1 Roboto type scale (subset needed through Phase 0) */
.type-display-1 { font-size: 34px; font-weight: 400; line-height: 40px; }
.type-headline { font-size: 24px; font-weight: 400; line-height: 32px; }
.type-title { font-size: 20px; font-weight: 500; line-height: 28px; }
.type-subheading { font-size: 16px; font-weight: 400; line-height: 24px; }
.type-body-1 { font-size: 14px; font-weight: 400; line-height: 20px; }
.type-caption { font-size: 12px; font-weight: 400; line-height: 16px; }

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-size: 14px;
  line-height: 20px;
}