@charset "UTF-8";
/* CSS Variables - Design System Tokens */
/* Single source of truth for all design tokens from qa branch */

:root {
  /* ==================== COLORS ==================== */

  /* Primary Brand Color - Purple (from new design system) */
  --color-primary: #67378bff; /* primary-500 */
  --color-primary-hover: #552e73ff; /* primary-600 */
  --color-primary-active: #44255cff; /* primary-700 */
  --color-primary-dark: #44255cff;

  --color-primary-100: #f3eef8;
  --color-primary-200: #e3d7f0;
  --color-primary-300: #cdb0df;
  --color-primary-400: #ac7fc0;
  --color-primary-500: #8f57a8;
  --color-primary-600: #74418f;
  --color-primary-700: #67378b;
  --color-primary-800: #50286a;
  --color-primary-900: #391a49;

  /* Brand Colors - Main Palette */
  --color-purple: #c07cb1;
  --color-purple-light: #c47fb5;
  --color-purple-dark: #8654a9; /* mediumpurple */

  --color-faded-purple: #c0afce;
  --color-faded-purple-light: #d6cfe1;
  --color-faded-purple-dark: #a899b3;

  --color-purple-active-bg: #d4bee5ff;

  --color-orange: #ea6814;
  --color-orange-light: #faa761;
  --color-orange-dark: #c06b18; /* sienna */

  --color-blue: #649ab0;
  --color-blue-light: #69a1b8;
  --color-blue-dark: #62aac8; /* skyblue */

  --color-green: #a2b878;
  --color-green-light: #a2b878;
  --color-green-dark: #93a56b;

  --color-pink: #f06374;
  --color-pink-light: #f06374;
  --color-pink-dark: #dc5a69;

  /* Semantic Colors */
  --color-success: #28a745;
  --color-error: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;

  /* Neutral Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-light-textbox: #ffffff;
  --color-read-only-textbox: #f1f1f1;

  /* Border Colors */
  --color-border-light: #e5e7eb;
  --color-border-medium: #cecece;
  --color-border-dark: #9ca3af;

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

  /* Font Families */
  --font-title: "Archivo", sans-serif;
  --font-subheading: "Archivo", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Font Sizes */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */

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

  /* ==================== SPACING ==================== */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;

  /* ==================== RADIUS ==================== */

  --radius-sm: 3px;
  --radius-md: 6px; /* border-m from design system */
  --radius-lg: 12px;

  /* ==================== TRANSITIONS ==================== */

  --transition-fast: 0.2s ease-in-out;
  --transition-base: 0.3s ease-in-out;

  /* ==================== BUTTON COLORS ==================== */
  /* Using existing custom properties for backwards compatibility */
  --primary-button-color: var(--color-primary); /* #67378BFF */
  --secondary-button-hover: #0056b3;
  --confirmation-button-color: var(--color-success);

  --primary-portal-button-color: #1d1f21;

  /* Button spacing/sizing */
  --button-padding: 0 12px;
  --button-gap: 6px;
  --button-min-height: 36px;
}