/*
 * CanduBelajar design tokens
 * Foundation only: import this file before component/page styles.
 */

:root {
  color-scheme: light;

  /* Brand: one coral accent */
  --color-coral-50: #fff1f2;
  --color-coral-100: #ffe4e6;
  --color-coral-200: #fecdd3;
  --color-coral-300: #fda4af;
  --color-coral-400: #fb7185;
  --color-coral-500: #ef4444;
  --color-coral-600: #dc2626;
  --color-coral-700: #b91c1c;
  --color-coral-800: #991b1b;

  /* Warm navy and neutral surfaces */
  --color-navy-950: #020617;
  --color-navy-900: #0f172a;
  --color-navy-800: #1e293b;
  --color-navy-700: #334155;
  --color-navy-600: #475569;
  --color-navy-500: #64748b;
  --color-neutral-400: #94a3b8;
  --color-neutral-300: #cbd5e1;
  --color-neutral-200: #e2e8f0;
  --color-neutral-100: #f1f5f9;
  --color-neutral-50: #f8fafc;
  --color-white: #ffffff;
  --color-surface-canvas: #f8fafc;
  --color-surface-card: #ffffff;
  --color-surface-muted: #f1f5f9;
  --color-border: #e2e8f0;
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #dc2626;
  --color-info: #2563eb;

  /* System UI avoids a network dependency during an exam. */
  --font-family-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Four-pixel spacing scale */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --shadow-md: 0 8px 24px rgb(15 23 42 / 0.08);

  --focus-ring-color: rgb(239 68 68 / 0.35);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  --motion-duration-fast: 120ms;
  --motion-duration-base: 180ms;
  --motion-duration-slow: 240ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);

  --control-height-sm: 2.25rem;
  --control-height-md: 2.75rem;
  --touch-target-min: 2.75rem;
  --content-max-width: 90rem;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}