@import 'tailwindcss';
@source "../src";

/* Import Component Styles */
@import './components/forms/styles/form.style.css';

/* =========================================
   THEME VARIABLES (CENTRALIZED)
   ========================================= */
@theme {
  /* -------------------------------
     BASE FONT & TYPOGRAPHY
     ------------------------------- */
  --base-font-size: 13px;

  /* Scale */
  --text-xs: calc(var(--base-font-size) * 0.846); /* ~11px */
  --text-sm: calc(var(--base-font-size) * 0.923); /* ~12px */
  --text-base: var(--base-font-size); /* 13px */
  --text-lg: calc(var(--base-font-size) * 1.154); /* ~15px */
  --text-xl: calc(var(--base-font-size) * 1.385); /* ~18px */
  --text-2xl: calc(var(--base-font-size) * 1.692); /* ~22px */

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

  /* -------------------------------
     SHAPE & DEPTH
     ------------------------------- */
  --radius-sm: 0.125rem; /* 2px */
  --radius-md: 0.25rem; /* 4px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */

  /* -------------------------------
     COLORS: PALETTE
     ------------------------------- */
  /* Brand (Purple based on your code) */
  --color-brand-50: #f5f3fd;
  --color-brand-100: #e6dbfb;
  --color-brand-200: #d0b6f8;
  --color-brand-300: #b78ff5;
  --color-brand-400: #9f64f1;
  --color-brand-500: #7d39ed; /* Primary */
  --color-brand-600: #652ed9;
  --color-brand-700: #4a23a5;
  --color-brand-800: #321a7a;
  --color-brand-900: #1b0f4a;

  /* Neutrals */
  --color-gray-50: #f5f6f7;
  --color-gray-100: #eceff1;
  --color-gray-200: #e0e3e7;
  --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;

  /* -------------------------------
     COLORS: SEMANTICS (COMPLETED)
     ------------------------------- */

  /* Error (Red) */
  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-200: #fecaca;
  --color-error-300: #fca5a5;
  --color-error-400: #f87171;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;
  --color-error-800: #991b1b;
  --color-error-900: #7f1d1d;

  /* Warning (Amber/Orange) */
  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;

  /* Success (Green) */
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-300: #86efac;
  --color-success-400: #4ade80;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;
  --color-success-800: #166534;
  --color-success-900: #14532d;

  /* Info (Blue/Sky) */
  --color-info-50: #f0f9ff;
  --color-info-100: #e0f2fe;
  --color-info-200: #bae6fd;
  --color-info-300: #7dd3fc;
  --color-info-400: #38bdf8;
  --color-info-500: #0ea5e9;
  --color-info-600: #0284c7;
  --color-info-700: #0369a1;
  --color-info-800: #075985;
  --color-info-900: #0c4a6e;

  /* -------------------------------
     FORM ITEM SPECIFICS
     ------------------------------- */
  /* Form Item Spacing */
  --form-item-margin-bottom: 1.25rem; /* 20px */

  /* Label Configuration */
  --form-label-font-size: var(--text-sm); /* Uses scale text-sm (~12px) */
  --form-label-color: var(--color-gray-700);
  --form-label-font-weight: var(--font-weight-medium);
  --form-label-margin-bottom: 0.375rem; /* ~6px */

  /* Error/Warning Message Configuration */
  --form-msg-font-size: var(--text-xs); /* Uses scale text-xs (~11px) */
  --form-msg-margin-top: 0.375rem; /* ~6px */

  --input-height: 2.6rem; /* ~34px */
  --input-font-size: var(--text-base);
  --input-padding-x: 0.92rem; /* ~12px */
  --input-padding-y: 0.62rem; /* ~8px */
  --input-radius: 0.375rem; /* 6px */

  /* Input Number Specific */
  --input-handler-width: 1.5rem; /* 24px (Slightly wider for better clickable) */
  /* Textarea Specific */
  --textarea-min-height: 6.15rem; /* 80px */
  --textarea-padding-x: 0.92rem; /* 12px */
  --textarea-padding-y: 0.62rem; /* 8px */

  /* Input Colors */
  --input-bg: #ffffff;
  --input-border: var(--color-gray-300);
  --input-border-hover: var(--color-brand-400);
  --input-text: var(--color-gray-800);
  --input-placeholder: var(--color-gray-400);

  --focus-ring-color: var(--color-brand-100);
  --focus-border-color: var(--color-brand-500);

  --disabled-bg: #f3f4f6;
  --disabled-text: var(--color-gray-400);
  --disabled-border: #e5e7eb;
}

/* =========================================
   BASE RESETS
   ========================================= */
@layer base {
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #ffffff;
    color: var(--color-gray-800);
    font-size: var(--base-font-size);
    line-height: var(--text-base--line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  input,
  textarea,
  select,
  button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }
}