/* Shared design tokens for the workbook experience */
:root {
  /* Typography */
  --font-family-base: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-family: var(--font-family-base);
  --fontsize-headings-element: 18px;
  --fontsize-text: 14px;
  --fontsize-text-small: 8px;

  /* Layout sizes and spacing */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 18px;
  --space-lg: 26px;
  --space-xl: 36px;

  --standard-gap: 10px;
  --standard-border-radius: var(--radius-sm);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --padding-small: 10px;
  --padding-medium: 20px;

  --card-width: 500px;
  --card-height: 750px;
  --max-height-two-rows: 250px;

  --transition: all 0.3s;

  /* Shadows */
  --shadow-light: 0 2px 6px rgba(15, 23, 42, 0.24);
  --shadow-soft: 0 22px 48px -28px rgba(15, 23, 42, 0.45);
  --shadow-button: 0 10px 24px -18px rgba(15, 23, 42, 0.5);
  --shadow-focus: 0 0 0 2px rgba(37, 99, 235, 0.2);
  --shadow-highlight-editor: 0 18px 38px -24px rgba(48, 102, 229, 0.55);
  --shadow-highlight-scaffolding: 0 18px 38px -24px rgba(245, 197, 66, 0.55);
  --shadow-highlight-grading: 0 18px 38px -24px rgba(47, 155, 116, 0.55);

  /* Core palette */
  --color-app-background: #eef2f8;
  --color-surface: #ffffff;
  --color-surface-muted: #f2f2f2;
  --color-surface-subtle: #e0e6f2;

  --color-border-subtle: #d6deeb;
  --color-border-strong: #c0cbe2;
  --color-border: var(--color-border-subtle);

  --color-text-primary: #182333;
  --color-text-secondary: #4c566a;
  --color-text-muted: #d1d1d1;
  --color-text-contrast: #2f3c4f;
  --color-text-inverse: #ffffff;

  --color-focus: #2563eb;

  /* Accent colors */
  --color-accent-primary: #3066e5;
  --color-accent-warm: #f5c542;
  --color-accent-neutral: #d9dee8;
  --color-accent-success: #2f9b74;
  --color-accent-error: #e66a6a;
  
  /* Theme colors */
  --color-theme: #3066e5;
  --color-accent: #f5c542;
  --color-dark: #003200;

  --color-on-accent-primary: var(--color-text-inverse);
  --color-on-accent-warm: #3b2a00;
  --color-on-accent-neutral: var(--color-text-contrast);
  --color-on-accent-success: var(--color-text-inverse);
  --color-on-accent-error: var(--color-text-inverse);

  /* Status colors */
  --color-status-info-bg: var(--color-surface-subtle);
  --color-status-info-text: var(--color-text-secondary);
  --color-status-warning-bg: var(--color-accent-warm);
  --color-status-warning-text: var(--color-on-accent-warm);
  --color-status-error-bg: var(--color-accent-error);
  --color-status-error-text: var(--color-on-accent-error);

  /* Label palette */
  --color-label-editor-bg: var(--color-accent-primary);
  --color-label-editor-text: var(--color-on-accent-primary);
  --color-label-scaffolding-bg: var(--color-accent-warm);
  --color-label-scaffolding-text: var(--color-on-accent-warm);
  --color-label-grading-unknown-bg: var(--color-accent-neutral);
  --color-label-grading-unknown-text: var(--color-on-accent-neutral);
  --color-label-grading-error-bg: var(--color-accent-error);
  --color-label-grading-error-text: var(--color-on-accent-error);
  --color-label-grading-partial-bg: var(--color-accent-warm);
  --color-label-grading-partial-text: var(--color-on-accent-warm);
  --color-label-grading-correct-bg: var(--color-accent-success);
  --color-label-grading-correct-text: var(--color-on-accent-success);

  /* Interaction surfaces */
  --color-interaction-background: var(--color-surface);
  --color-interaction-background-alt: var(--color-surface-muted);
  --color-interaction-border: var(--color-border-subtle);

  /* Inputs */
  --color-input-background: var(--color-surface);
  --color-input-background-alt: var(--color-surface-subtle);
  --color-input-border: var(--color-border-subtle);
  --color-input-text: var(--color-text-primary);

  /* Buttons */
  --color-button-background: var(--color-surface-muted);
  --color-button-hover: var(--color-surface);
  --color-button-border: var(--color-interaction-border);

  /* Background helpers */
  --bg-card: var(--color-surface);
  --bg-card-dark: var(--color-surface-subtle);
  --bg-hover: var(--color-accent-primary);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #1f3b8b, #3572ef);

  /* Legacy tokens mapped to the new palette */
  --background-info: var(--color-status-info-bg);
  --background-warning: var(--color-status-warning-bg);
  --background-error: var(--color-status-error-bg);

  --textcolor-info: var(--color-status-info-text);
  --textcolor-warning: var(--color-status-warning-text);
  --textcolor-error: var(--color-status-error-text);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
}

body {
  background-color: var(--color-app-background);
  color: var(--color-text-primary);
}