/* ============================================================
   CLOUDGRADER DESIGN TOKENS
   A design system for educational creative tools

   Philosophy: Editorial precision meets artisan warmth
   ============================================================ */

:root {
  /* ============================================================
     TYPOGRAPHY SCALE
     Based on a 1.25 ratio (major third) for elegant progression
     ============================================================ */

  /* Font Families */
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Type Scale (major third - 1.25) */
  --text-xs: 0.64rem;      /* 10.24px - fine print */
  --text-sm: 0.8rem;       /* 12.8px - captions, labels */
  --text-base: 1rem;       /* 16px - body */
  --text-md: 1.25rem;      /* 20px - lead text */
  --text-lg: 1.563rem;     /* 25px - section headers */
  --text-xl: 1.953rem;     /* 31.25px - page titles */
  --text-2xl: 2.441rem;    /* 39px - hero text */
  --text-3xl: 3.052rem;    /* 48.8px - display */

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ============================================================
     SPACING SCALE
     8px base unit with intentional jumps for rhythm
     ============================================================ */

  --space-px: 1px;
  --space-0: 0;
  --space-1: 0.25rem;    /* 4px - micro adjustments */
  --space-2: 0.5rem;     /* 8px - tight grouping */
  --space-3: 0.75rem;    /* 12px - related elements */
  --space-4: 1rem;       /* 16px - standard gap */
  --space-5: 1.25rem;    /* 20px - comfortable */
  --space-6: 1.5rem;     /* 24px - section padding */
  --space-8: 2rem;       /* 32px - major separation */
  --space-10: 2.5rem;    /* 40px - breathing room */
  --space-12: 3rem;      /* 48px - section breaks */
  --space-16: 4rem;      /* 64px - major sections */
  --space-20: 5rem;      /* 80px - page-level */
  --space-24: 6rem;      /* 96px - hero spacing */

  /* ============================================================
     BORDER RADIUS
     Subtle curves that feel crafted, not clinical
     ============================================================ */

  --radius-none: 0;
  --radius-sm: 3px;      /* Subtle softening */
  --radius-md: 6px;      /* Default for inputs, small cards */
  --radius-lg: 10px;     /* Cards, panels */
  --radius-xl: 16px;     /* Large containers */
  --radius-2xl: 24px;    /* Feature sections */
  --radius-full: 9999px; /* Pills, avatars */

  /* ============================================================
     TRANSITIONS & TIMING
     Intentional motion with personality
     ============================================================ */

  /* Durations */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  --duration-glacial: 1000ms;

  /* Easing Functions - each with character */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Signature easings for CloudGrader */
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);      /* Default - buttery */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);    /* Playful overshoot */
  --ease-snap: cubic-bezier(0.68, -0.6, 0.32, 1.6);    /* Snappy with character */
  --ease-gentle: cubic-bezier(0.45, 0, 0.55, 1);       /* Refined, understated */
  --ease-dramatic: cubic-bezier(0.7, 0, 0.3, 1);       /* High contrast motion */

  /* ============================================================
     SHADOWS
     Layered depth that feels natural
     ============================================================ */

  /* Elevation system - defined per theme for color consistency */
  --shadow-inset: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* ============================================================
     Z-INDEX SCALE
     Semantic layering
     ============================================================ */

  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-toast: 600;
  --z-maximum: 9999;

  /* ============================================================
     LAYOUT CONSTRAINTS
     Comfortable reading widths and container sizes
     ============================================================ */

  --width-prose: 65ch;           /* Optimal reading width */
  --width-sm: 640px;
  --width-md: 768px;
  --width-lg: 1024px;
  --width-xl: 1280px;
  --width-2xl: 1536px;
  --width-container: 1200px;     /* Main app container */

  /* ============================================================
     BREAKPOINTS (for reference - use in media queries)
     ============================================================ */

  /*
   * --bp-sm: 640px   - Large phones, small tablets
   * --bp-md: 768px   - Tablets
   * --bp-lg: 1024px  - Small laptops
   * --bp-xl: 1280px  - Desktops
   * --bp-2xl: 1536px - Large screens
   */

  /* ============================================================
     INTERACTION STATES
     Consistent feedback across the system
     ============================================================ */

  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* ============================================================
     GRID SETTINGS
     Flexible grid system
     ============================================================ */

  --grid-columns: 12;
  --grid-gap: var(--space-4);
  --grid-gap-lg: var(--space-6);

  /* ============================================================
     COMPONENT-SPECIFIC TOKENS
     Semantic tokens for common UI patterns
     ============================================================ */

  /* Inputs */
  --input-height-sm: 32px;
  --input-height-md: 40px;
  --input-height-lg: 48px;
  --input-padding-x: var(--space-3);
  --input-padding-y: var(--space-2);

  /* Buttons */
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;
  --btn-padding-x: var(--space-4);
  --btn-padding-x-lg: var(--space-6);

  /* Cards */
  --card-padding: var(--space-5);
  --card-padding-lg: var(--space-6);
  --card-radius: var(--radius-lg);

  /* Tabs */
  --tab-height: 44px;
  --tab-padding-x: var(--space-5);
  --tab-gap: var(--space-1);

  /* Assignment Bar (persistent footer) */
  --bar-height: 64px;
  --bar-padding: var(--space-3) var(--space-4);
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   Apply consistent type styles
   ============================================================ */

.text-display {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
}

.text-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.text-heading {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.text-subheading {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.text-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

.text-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

.text-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.text-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.text-mono-sm {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}