/**
 * Easifix Applicant Portal — design tokens
 * Source: Figma file iRtheraHEeFdcY5H1Z9q66 — Styles page
 */

:root {
  /* ── Brand · Green ── */
  --ef-green-50: #eefff7;
  --ef-green-100: #d8feec;
  --ef-green-200: #bafade;
  --ef-green-300: #8aedc5;
  --ef-green-400: #51daa9;
  --ef-green-500: #01c08d;
  --ef-green-600: #068763;
  --ef-green-700: #016c4e;
  --ef-green-800: #00523b;
  --ef-green-900: #013c2a;
  --ef-green-950: #00281b;

  /* ── Neutral · Grey ── */
  --ef-gray-50: #f8fbfa;
  --ef-gray-100: #f1f4f3;
  --ef-gray-200: #e5ebe9;
  --ef-gray-300: #cfd8d5;
  --ef-gray-400: #b6c1bd;
  --ef-gray-500: #9ba6a2;
  --ef-gray-600: #838d8a;
  --ef-gray-700: #6c7672;
  --ef-gray-800: #545d5a;
  --ef-gray-900: #404745;
  --ef-gray-950: #1e2120;

  /* ── Error · Red ── */
  --ef-red-50: #fff8f8;
  --ef-red-100: #fff0ed;
  --ef-red-200: #fee2de;
  --ef-red-300: #ffc6bf;
  --ef-red-400: #fea196;
  --ef-red-500: #fe6f64;
  --ef-red-600: #e74f47;
  --ef-red-700: #c63933;
  --ef-red-800: #a12623;
  --ef-red-900: #7d1c19;

  /* ── Warning · Yellow ── */
  --ef-yellow-50: #fffbf4;
  --ef-yellow-100: #fff5e5;
  --ef-yellow-200: #ffedcd;
  --ef-yellow-300: #ffda98;
  --ef-yellow-400: #ffc13c;
  --ef-yellow-500: #e6a907;
  --ef-yellow-600: #ca9402;

  /* ── Info · Blue ── */
  --ef-blue-50: #f7faff;
  --ef-blue-100: #ecf4ff;
  --ef-blue-200: #dcebff;
  --ef-blue-300: #bcd8fe;
  --ef-blue-400: #92c1ff;
  --ef-blue-500: #60a4fe;
  --ef-blue-600: #478be4;
  --ef-blue-700: #3373c4;

  /* ── Success · Green (semantic) ── */
  --ef-success-50: #f0fff2;
  --ef-success-100: #dbfee1;
  --ef-success-200: #bffbca;
  --ef-success-300: #92efa7;
  --ef-success-400: #62db83;
  --ef-success-500: #30c162;
  --ef-success-600: #01a64c;
  --ef-success-700: #038a3e;
  --ef-success-800: #036e30;

  /* ── Semantic aliases ── */
  --ef-color-primary: var(--ef-green-600);
  --ef-color-primary-hover: var(--ef-green-700);
  --ef-color-primary-pressed: var(--ef-green-800);
  --ef-color-primary-focus-ring: var(--ef-green-800);
  --ef-color-on-primary: #ffffff;

  --ef-color-bg-page: var(--ef-gray-100);
  --ef-color-bg-surface: #ffffff;
  --ef-color-bg-muted: var(--ef-gray-100);
  --ef-color-bg-input: var(--ef-gray-200);
  --ef-color-bg-input-hover: #dde4e1;
  --ef-color-border-input: var(--ef-gray-800);

  --ef-color-text-primary: #000000;
  --ef-color-text-body: var(--ef-gray-950);
  --ef-color-text-secondary: var(--ef-gray-800);
  --ef-color-text-muted: var(--ef-gray-700);
  --ef-color-text-disabled: var(--ef-gray-600);
  --ef-color-text-on-dark: #ffffff;

  --ef-color-border: var(--ef-gray-300);
  --ef-color-border-strong: var(--ef-gray-800);

  --ef-color-error: var(--ef-red-700);
  --ef-color-error-bg: var(--ef-red-100);
  --ef-color-error-border: var(--ef-red-300);
  --ef-color-warning: var(--ef-yellow-500);
  --ef-color-warning-bg: var(--ef-yellow-100);
  --ef-color-warning-border: var(--ef-yellow-300);
  --ef-color-info: var(--ef-blue-700);
  --ef-color-info-bg: var(--ef-blue-100);
  --ef-color-info-border: var(--ef-blue-300);
  --ef-color-success: var(--ef-success-800);
  --ef-color-success-bg: var(--ef-success-100);
  --ef-color-success-border: var(--ef-success-300);

  /* ── Typography families ── */
  --ef-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ef-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --ef-font-weight-regular: 400;
  --ef-font-weight-medium: 500;
  --ef-font-weight-semibold: 600;
  --ef-font-weight-bold: 700;
  --ef-font-weight-extrabold: 800;

  /* Stronger scale (Plus Jakarta Sans) */
  --ef-text-display-lg: 3.625rem;
  --ef-text-display-lg-lh: 4.125rem;
  --ef-text-display-md: 3rem;
  --ef-text-display-md-lh: 3.5rem;
  --ef-text-display-sm: 2.5rem;
  --ef-text-display-sm-lh: 3.125rem;
  --ef-text-headline-lg: 2.125rem;
  --ef-text-headline-lg-lh: 2.625rem;
  --ef-text-headline-md: 1.75rem;
  --ef-text-headline-md-lh: 2.25rem;
  --ef-text-headline-sm: 1.5rem;
  --ef-text-headline-sm-lh: 2.125rem;
  --ef-text-title-lg: 1.25rem;
  --ef-text-title-lg-lh: 1.75rem;
  --ef-text-title-md: 1rem;
  --ef-text-title-md-lh: 1.5rem;
  --ef-text-title-sm: 0.875rem;
  --ef-text-title-sm-lh: 1.375rem;

  /* Softer scale (Inter body + Plus Jakarta labels) */
  --ef-text-body-lg: 1rem;
  --ef-text-body-lg-lh: 1.5rem;
  --ef-text-body-md: 0.875rem;
  --ef-text-body-md-lh: 1.3125rem;
  --ef-text-body-sm: 0.75rem;
  --ef-text-body-sm-lh: 1.125rem;
  --ef-text-body-xs: 0.625rem;
  --ef-text-body-xs-lh: 1rem;

  --ef-text-label-lg: 0.875rem;
  --ef-text-label-lg-lh: 1.375rem;
  --ef-text-label-md: 0.75rem;
  --ef-text-label-md-lh: 1.125rem;
  --ef-text-label-sm: 0.625rem;
  --ef-text-label-sm-lh: 1rem;

  /* Legacy aliases used in portal views */
  --ef-text-lg: var(--ef-text-title-md);
  --ef-text-xl: var(--ef-text-title-lg);
  --ef-text-2xl: var(--ef-text-headline-sm);

  /* Component-specific type */
  --ef-text-input-label: 1rem;
  --ef-text-input-label-lh: 1.5rem;
  --ef-text-input-label-float: 0.75rem;
  --ef-text-input-label-float-lh: 1.125rem;
  --ef-text-disclaimer: 0.75rem;
  --ef-text-disclaimer-lh: 1.125rem;

  /* ── Spacing ── */
  --ef-space-1: 0.25rem;
  --ef-space-2: 0.5rem;
  --ef-space-3: 0.75rem;
  --ef-space-4: 1rem;
  --ef-space-5: 1.25rem;
  --ef-space-6: 1.5rem;
  --ef-space-8: 2rem;

  /* ── Radius ── */
  --ef-radius-xs: 6px;
  --ef-radius-sm: 8px;
  --ef-radius-md: 10px;
  --ef-radius-lg: 12px;
  --ef-radius-xl: 16px;
  --ef-radius-card: 24px;
  --ef-radius-full: 9999px;

  /* ── Elevation ── */
  --ef-shadow-1:
    0 1px 1px rgba(30, 33, 32, 0.11),
    0 2px 4px rgba(30, 33, 32, 0.07);
  --ef-shadow-2:
    0 2px 3px rgba(30, 33, 32, 0.11),
    0 4px 8px rgba(30, 33, 32, 0.08);
  --ef-shadow-3:
    0 4px 6px -1px rgba(30, 33, 32, 0.11),
    0 8px 16px rgba(30, 33, 32, 0.09);
  --ef-shadow-4:
    0 6px 10px -2px rgba(30, 33, 32, 0.12),
    0 14px 28px rgba(30, 33, 32, 0.10);
  --ef-shadow-5:
    0 10px 16px -3px rgba(30, 33, 32, 0.13),
    0 22px 44px rgba(30, 33, 32, 0.11);
  --ef-shadow-header: var(--ef-shadow-3);
  --ef-shadow-card: var(--ef-shadow-2);
  --ef-shadow-selected: var(--ef-shadow-2);

  /* ── Component sizes ── */
  --ef-header-height: 76px;
  --ef-content-max-width: 960px;
  --ef-auth-card-max-width: 600px;

  --ef-input-height: 56px;
  --ef-textfield-label-top: 12px;
  --ef-textfield-value-top: 28px;
  --ef-textfield-value-height: 22px;
  --ef-btn-height-lg: 52px;
  --ef-btn-height-md: 48px;
  --ef-btn-height-sm: 36px;
  --ef-icon-btn-sm: 36px;
  --ef-icon-btn-md: 48px;
  --ef-icon-btn-lg: 52px;
  --ef-menu-btn-size: 52px;
  --ef-control-size: 24px;

  --ef-transition-fast: 150ms ease;
}