/* ============================================================
   QRTask Design Tokens
   ============================================================ */

:root {
  /* Colors – Primary (Indigo) */
  --color-primary:        #6366F1;
  --color-primary-dark:   #4F46E5;
  --color-primary-darker: #4338CA;
  --color-primary-light:  #EEF2FF;

  /* Colors – Semantic */
  --color-success:       #10B981;
  --color-success-light: #D1FAE5;
  --color-warning:       #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-danger:        #EF4444;
  --color-danger-light:  #FEE2E2;

  /* Colors – Neutral */
  --color-neutral-50:  #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #0F172A;
  --color-white:       #FFFFFF;

  /* Card-type accent colors */
  --card-color-html_content: #6366F1;
  --card-color-video:        #8B5CF6;
  --card-color-audio:        #06B6D4;
  --card-color-quiz:         #F59E0B;
  --card-color-form:         #10B981;
  --card-color-code_gate:    #EF4444;
  --card-color-final_state:  #64748B;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Border radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Z-index scale */
  --z-base:    1;
  --z-dropdown: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-overlay: 400;
}

/* ============================================================
   Utility classes
   ============================================================ */

/* Display */
.d-flex        { display: flex; }
.d-grid        { display: grid; }
.d-block       { display: block; }
.d-none        { display: none !important; }
.d-inline      { display: inline; }
.d-inline-flex { display: inline-flex; }

/* Flex helpers */
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow-1   { flex-grow: 1; }

.align-center  { align-items: center; }
.align-start   { align-items: flex-start; }
.align-end     { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end   { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }

/* Gap */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* Padding */
.p-0  { padding: 0; }
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.pt-4 { padding-top: var(--space-4); }
.pb-4 { padding-bottom: var(--space-4); }

/* Margin */
.m-0    { margin: 0; }
.mt-2   { margin-top: var(--space-2); }
.mt-3   { margin-top: var(--space-3); }
.mt-4   { margin-top: var(--space-4); }
.mt-6   { margin-top: var(--space-6); }
.mb-2   { margin-bottom: var(--space-2); }
.mb-3   { margin-bottom: var(--space-3); }
.mb-4   { margin-bottom: var(--space-4); }
.mb-6   { margin-bottom: var(--space-6); }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Width / Height */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.w-auto  { width: auto; }
.min-w-0 { min-width: 0; }

/* Text */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-sm     { font-size: 0.875rem; }
.text-xs     { font-size: 0.75rem; }
.text-lg     { font-size: 1.125rem; }
.text-xl     { font-size: 1.25rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold   { font-weight: 700; }
.text-muted  { color: var(--color-neutral-500); }
.text-primary { color: var(--color-primary); }
.text-danger  { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }

/* Borders */
.rounded    { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }
.border     { border: 1px solid var(--color-neutral-200); }

/* Background */
.bg-white        { background: var(--color-white); }
.bg-neutral-50   { background: var(--color-neutral-50); }
.bg-neutral-100  { background: var(--color-neutral-100); }
.bg-primary      { background: var(--color-primary); }
.bg-primary-light { background: var(--color-primary-light); }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Opacity */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* Shadow */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }