/* ============================================================
   Prana Design System — Colors & Typography
   ============================================================ */

/* --- Brand Fonts (Manrope) --- */
@font-face { font-family: 'Manrope'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Manrope-Regular.woff2') format('woff2'), url('fonts/Manrope-Regular.woff') format('woff'); }
@font-face { font-family: 'Manrope'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/Manrope-Medium.woff2') format('woff2'), url('fonts/Manrope-Medium.woff') format('woff'); }
@font-face { font-family: 'Manrope'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/Manrope-SemiBold.woff2') format('woff2'), url('fonts/Manrope-SemiBold.woff') format('woff'); }
/* Note: Bold (700) not provided — browser will synthesize from SemiBold. Request Manrope-Bold.woff2 for best results. */

:root {
  /* ========== COLOR SYSTEM ========== */

  /* --- Brand / Primary (Purple) --- */
  --color-primary: rgb(76, 48, 255);
  --color-primary-hover: rgb(86, 76, 255);
  --color-primary-light: rgb(243, 99, 234); /* accent pink-purple */

  /* --- Neutrals (Dark scale) --- */
  --color-gray-950: rgb(15, 19, 26);
  --color-gray-900: rgb(24, 30, 42);
  --color-gray-850: rgb(32, 38, 49);
  --color-gray-800: rgb(54, 58, 69);
  --color-gray-700: rgb(69, 81, 100);
  --color-gray-600: rgb(97, 100, 108);
  --color-gray-500: rgb(99, 102, 110);
  --color-gray-400: rgb(107, 114, 128);
  --color-gray-300: rgb(208, 213, 221);
  --color-gray-200: rgb(210, 211, 213);
  --color-gray-150: rgb(234, 236, 240);
  --color-gray-100: rgb(242, 244, 247);
  --color-gray-75: rgb(247, 247, 248);
  --color-gray-50: rgb(249, 250, 251);
  --color-white: rgb(255, 255, 255);

  /* --- Semantic: Success (Green) --- */
  --color-success: rgb(22, 171, 102);
  --color-success-dark: rgb(7, 141, 81);
  --color-success-darker: rgb(6, 112, 67);
  --color-success-bg: rgb(232, 253, 240);
  --color-success-border: rgb(164, 238, 194);

  /* --- Semantic: Error / Danger (Red) --- */
  --color-error: rgb(240, 64, 51);
  --color-error-dark: rgb(213, 44, 32);
  --color-error-bg: rgb(254, 235, 233);
  --color-error-border: rgb(253, 195, 190);

  /* --- Semantic: Warning (Orange) --- */
  --color-warning: rgb(216, 102, 3);
  --color-warning-bg: rgb(255, 243, 224);
  --color-warning-border: rgb(255, 214, 153);

  /* --- Semantic: Info (Brand purple reused) --- */
  --color-info: var(--color-primary);

  /* --- Backgrounds --- */
  --bg-app-light: var(--color-gray-100);       /* F2F4F7 — light theme shell */
  --bg-app-dark: var(--color-gray-950);         /* 0F131A — dark theme shell */
  --bg-surface: var(--color-white);             /* card/panel surface */
  --bg-surface-dark: var(--color-gray-850);     /* 202631 — dark surface */
  --bg-muted: var(--color-gray-100);            /* tag/chip backgrounds */

  /* --- Borders --- */
  --border-default: var(--color-gray-150);      /* EAECF0 — light borders */
  --border-input: var(--color-gray-300);        /* D0D5DD — input borders */
  --border-dark: var(--color-gray-800);         /* 363A45 — dark-theme borders */

  /* --- Shadows --- */
  --shadow-xs: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0px 4px 8px -2px rgba(16, 24, 40, 0.1);
  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-overlay: 0px 8px 16px -4px rgba(0, 0, 0, 0.2);

  /* ========== TYPOGRAPHY ========== */

  /* --- Font families --- */
  --font-primary: 'Manrope', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* --- Font sizes --- */
  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 32px;

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

  /* --- Line heights --- */
  --leading-tight: 1;
  --leading-snug: 1.2;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  /* --- Letter spacing --- */
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;

  /* ========== SPACING ========== */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ========== RADII ========== */
  --radius-sm: 4px;    /* radius-xs */
  --radius-md: 6px;    /* radius-s */
  --radius-lg: 8px;    /* radius-m */
  --radius-xl: 12px;   /* radius-l */
  --radius-full: 160px;
  --radius-circle: 50%;

  /* ========== SEMANTIC TYPE STYLES ========== */
  /* Use these as combined shorthand references */
}

/* --- Semantic type classes --- */
.text-h1 {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: rgb(13, 19, 32);
}

.text-h2 {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: rgb(13, 19, 32);
}

.text-h3 {
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: rgb(13, 19, 32);
}

.text-body {
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-gray-700);
}

.text-body-bold {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-gray-700);
}

.text-caption {
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  color: var(--color-gray-700);
}

.text-overline {
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-600);
}

/* --- Dark theme text variants --- */
.dark .text-h1, .dark .text-h2, .dark .text-h3 {
  color: var(--color-gray-75);
}
.dark .text-body {
  color: var(--color-gray-200);
}
.dark .text-caption {
  color: var(--color-gray-200);
}