/* Plus Jakarta Sans — headings only (500, 600, 700 weights) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700&display=swap');

/* Explorations - Design Tokens & Base Styles */

:root {
  /* ========== Typography ========== */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-xs: 0.75rem;     /* 12px - labels, captions */
  --text-sm: 0.875rem;    /* 14px - secondary text */
  --text-base: 1rem;      /* 16px - body text */
  --text-lg: 1.125rem;    /* 18px - emphasis, subtitles */
  --text-xl: 1.5rem;      /* 24px - headings */
  --text-2xl: 2rem;       /* 32px - large headings, math display */
  --text-3xl: 2.5rem;     /* 40px - page titles */

  --font-weight-normal: 400;    /* Base/body text */
  --font-weight-medium: 500;    /* Cards, labels, buttons */
  --font-weight-semibold: 600;  /* Headings, section titles */
  --font-weight-bold: 700;      /* Badges, emphasis */

  /* ========== Category Action Colors (Tailwind 600 series) ========== */
  --color-create: #16a34a;                      /* Green-600 — Create/Add actions */
  --color-create-light: rgba(22, 163, 74, 0.15);

  --color-graph: #2563eb;                       /* Blue-600 — Graph/Visualize actions */
  --color-graph-light: rgba(37, 99, 235, 0.15);

  --color-draw: #ea580c;                        /* Orange-600 — Draw/Sketch actions */
  --color-draw-light: rgba(234, 88, 12, 0.15);

  --color-algebra: #7c3aed;                     /* Violet-600 — Algebra/Solve actions */
  --color-algebra-light: rgba(124, 58, 237, 0.15);

  /* ========== Sidebar Card Badge Colors ========== */
  --badge-create-bg: #dcfce7;   --badge-create-fg: #16a34a;
  --badge-graph-bg: #dbeafe;    --badge-graph-fg: #2563eb;
  --badge-draw-bg: #ffedd5;     --badge-draw-fg: #ea580c;
  --badge-algebra-bg: #ede9fe;  --badge-algebra-fg: #7c3aed;
  --badge-neutral-bg: #f3f4f6;  --badge-neutral-fg: #6b7280;

  /* ========== Sidebar Card Interaction Colors ========== */
  --card-hover-border: #6366f1;
  --card-hover-bg: #eef2ff;
  --card-border: #e5e7eb;

  /* ========== Semantic Colors ========== */
  --color-primary: #16a34a;        /* Primary action color (green-600) */
  --color-focus: #2563eb;          /* Focus states (blue-600, matches graph category) */
  --color-error: #dc2626;          /* Error states and validation */
  --color-success: #22c55e;        /* Success states and confirmations (green-500) */
  --color-text: #1f2937;           /* Primary text color */
  --color-text-secondary: #6b7280; /* Secondary/muted text */

  /* ========== Border Radius ========== */
  --radius-sm: 4px;     /* Small - inputs, inline elements */
  --radius-md: 10px;    /* Medium - cards, modals, dropdowns, sidebar items */
  --radius-lg: 12px;    /* Large - marketing cards */
  --radius-full: 9999px; /* Full - pills, circles */

  /* ========== Shadows (3-level elevation system) ========== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);    /* Legacy — use --shadow-0 for new code */
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);    /* Legacy — use --shadow-1 for new code */
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);    /* Legacy — use --shadow-2 for new code */
  --shadow-0: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);                              /* Resting cards */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04); /* Hovering cards, dropdowns */
  --shadow-2: 0 1px 3px rgba(0,0,0,0.14), 0 8px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.05); /* Floating panels, modals */

  /* ========== Transitions ========== */
  --transition-short: all 0.2s ease;   /* Quick interactions (buttons, hovers) */
  --transition-medium: all 0.3s ease;  /* Standard animations (modals, panels) */

  /* ========== Easing Curves ========== */
  --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1.0);   /* Decelerate — for elements arriving */
  --ease-exit: cubic-bezier(0.4, 0.0, 1.0, 1.0);       /* Accelerate — for elements leaving */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);     /* Slight overshoot — physical bounce */

  /* ========== Gray Scale ========== */
  --gray-50:  #f9fafb;   /* Lightest surfaces, input backgrounds */
  --gray-100: #f3f4f6;   /* Subtle hover backgrounds */
  --gray-200: #e5e7eb;   /* Standard borders */
  --gray-300: #d1d5db;   /* Heavier borders, input borders */
  --gray-400: #9ca3af;   /* Placeholder text, muted icons */
  --gray-500: #6b7280;   /* Secondary text */
  --gray-600: #4b5563;   /* Body text variant */
  --gray-700: #374151;   /* Strong body text */
  --gray-800: #1f2937;   /* Headings */
  --gray-900: #111827;   /* Darkest text */

  /* ========== Zone Colors (Log/Exp space) ========== */
  --zone-log-bg: #e8e6e0;
  --zone-log-bg-end: #e3e1da;
  --zone-log-fg: #6b7280;
  --zone-exp-bg: #dce8fd;
  --zone-exp-bg-end: #d6e4fc;
  --zone-exp-fg: #1d4ed8;
  --zone-exp-accent: #3b82f6;
  --zone-divider: #b8bfcc;

  /* ========== Surface Colors ========== */
  --surface-page:    #e2e1dc;    /* Body/page background — warm gray desk */
  --surface-canvas:  #fefdfb;    /* GM canvas — near-white warm paper */
  --surface-card:    #ffffff;    /* Card and panel backgrounds */
  --surface-sidebar: #e8e7e2;   /* Sidebar — warm medium gray */
  --surface-muted:   var(--gray-50);

  /* ========== Backdrop ========== */
  --backdrop-color: rgba(0, 0, 0, 0.35);

  /* ========== Topic Accent (header strip) ========== */
  --topic-accent: var(--gray-200);   /* Default — overridden per-page via JS */
}

/* ========== Base Reset ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========== Base Body Styles ========== */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: var(--color-text);
}