/* iSAC Design Tokens — Lending System Prototype */

:root {
  /* Brand palette */
  --isac-brand-950: #022c22;
  --isac-brand-900: #064e3b;
  --isac-brand-800: #065f46;
  --isac-brand-700: #047857;
  --isac-brand-600: #059669;
  --isac-brand-500: #10b981;
  --isac-brand-400: #34d399;
  --isac-brand-300: #6ee7b7;
  --isac-brand-200: #a7f3d0;
  --isac-brand-100: #d1fae5;
  --isac-brand-50: #ecfdf5;

  /* Accent palette */
  --isac-blue-700: #0369a1;
  --isac-blue-500: #0ea5e9;
  --isac-amber-600: #d97706;
  --isac-amber-500: #f59e0b;
  --isac-red-600: #dc2626;
  --isac-red-500: #ef4444;
  --isac-violet-600: #7c3aed;

  /* Surfaces */
  --surface-page: #f6f8f7;
  --surface-card: #ffffff;
  --surface-muted: #f0fdf4;
  --surface-raised: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-hover: #fbfdfc;
  --surface-inverse: #052e2b;
  --surface-overlay: rgba(15, 23, 42, 0.45);
  --surface-danger-soft: #fee2e2;
  --surface-warning-soft: #fef3c7;
  --surface-info-soft: #e0f2fe;

  /* Text — semantic (DS-COLOR-TEXT) soft slate, no pure black */
  --text-primary: #334155;
  --text-secondary: #5b6b84;
  --text-muted: #6d7d93;
  --text-subtle: #8a97ab;
  --text-disabled: #a8b4c4;
  --text-inverse: #ffffff;
  --text-brand: var(--isac-brand-700);
  --text-danger: #b91c1c;
  --text-warning: #92400e;
  --text-success: #047857;
  --text-info: var(--isac-blue-700);

  /* Text aliases (back-compat) */
  --text-strong: var(--text-primary);
  --text-default: var(--text-secondary);

  /* Borders */
  --border-soft: #e2e8f0;
  --border-muted: #cbd5e1;
  --border-brand: var(--isac-brand-200);
  --border-focus: var(--isac-brand-500);

  /* Typography */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-weight-normal: 400;
  --font-weight-semibold: 500;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  /* Preferred UI weights — titles/metrics use 600, not 700 */
  --font-weight-title: var(--font-weight-medium);
  --font-weight-emphasis: var(--font-weight-semibold);
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;
  --line-height-title: 1.25;
  --line-height-section: 1.3;
  --line-height-card: 1.35;
  --line-height-caption: 1.4;
  --line-height-metric-lg: 1.15;
  --line-height-metric-md: 1.2;
  --line-height-button: 1;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 36px;
  --fs-section: 18px;
  --fs-app-title: 22px;
  --fs-metric-lg: 28px;
  --fs-metric-md: 22px;

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

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-pop: 0 18px 50px rgba(15, 23, 42, 0.18);
  --shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.25);

  /* Layout */
  --admin-sidebar-width: 288px;
  --admin-sidebar-collapsed-width: 72px;
  --admin-topbar-height: 64px;
  --admin-shell-transition: var(--transition-base);
  --admin-sidebar: var(--admin-sidebar-width);
  --topbar: var(--admin-topbar-height);
  --mobile-tab: 72px;
  --mobile-cta: 64px;
  --content-max: 1480px;
  --detail-aside: 360px;

  /* Z-index scale */
  --z-base: 1;
  --z-dropdown: 50;
  --z-sticky: 20;
  --z-topbar: 30;
  --z-sidebar: 40;
  --z-drawer: 80;
  --z-modal: 100;
  --z-toast: 200;

  /* Breakpoints (for reference in media queries) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Icon sizes */
  --icon-size-sm: 18px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;

  /* Safe area (mobile) */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);

  /* Motion */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Customer App visual tone (CUX-1) */
  --ca-card-radius: var(--radius-lg);
  --ca-notice-radius: var(--radius-md);
  --ca-hero-accent: 3px solid var(--color-primary);
  --ca-card-elevation: var(--shadow-xs);

  /* Customer App typography roles (CUX-TYPO) */
  --type-app-title-size: var(--fs-app-title);
  --type-app-title-weight: var(--font-weight-title);
  --type-app-title-line: var(--line-height-title);
  --type-page-title-size: var(--fs-xl);
  --type-page-title-weight: var(--font-weight-title);
  --type-page-title-line: var(--line-height-title);
  --type-section-title-size: var(--fs-section);
  --type-section-title-weight: var(--font-weight-title);
  --type-section-title-line: var(--line-height-section);
  --type-card-title-size: var(--fs-lg);
  --type-card-title-weight: var(--font-weight-title);
  --type-card-title-line: var(--line-height-card);
  --type-body-size: var(--fs-md);
  --type-body-weight: var(--font-weight-normal);
  --type-body-line: var(--line-height-normal);
  --type-body-strong-size: var(--fs-md);
  --type-body-strong-weight: var(--font-weight-emphasis);
  --type-body-strong-line: 1.45;
  --type-caption-size: var(--fs-xs);
  --type-caption-weight: var(--font-weight-normal);
  --type-caption-line: var(--line-height-caption);
  --type-metric-lg-size: var(--fs-metric-lg);
  --type-metric-lg-weight: var(--font-weight-title);
  --type-metric-lg-line: var(--line-height-metric-lg);
  --type-metric-md-size: var(--fs-metric-md);
  --type-metric-md-weight: var(--font-weight-title);
  --type-metric-md-line: var(--line-height-metric-md);
  --type-button-size: var(--fs-md);
  --type-button-weight: var(--font-weight-medium);
  --type-button-line: var(--line-height-button);
  --type-badge-size: var(--fs-xs);
  --type-badge-weight: var(--font-weight-medium);
  --type-badge-line: var(--line-height-button);

  /* Admin Portal typography roles (AUX-TYPO) */
  --admin-type-page-title-size: var(--fs-2xl);
  --admin-type-page-title-weight: var(--font-weight-title);
  --admin-type-page-title-line: var(--line-height-title);
  --admin-type-page-desc-size: var(--fs-sm);
  --admin-type-page-desc-weight: var(--font-weight-normal);
  --admin-type-page-desc-line: 1.45;
  --admin-type-section-title-size: var(--fs-section);
  --admin-type-section-title-weight: var(--font-weight-title);
  --admin-type-section-title-line: var(--line-height-section);
  --admin-type-card-title-size: var(--fs-lg);
  --admin-type-card-title-weight: var(--font-weight-title);
  --admin-type-card-title-line: var(--line-height-card);
  --admin-type-body-size: var(--fs-md);
  --admin-type-body-weight: var(--font-weight-normal);
  --admin-type-body-line: 1.45;
  --admin-type-meta-size: var(--fs-xs);
  --admin-type-meta-weight: var(--font-weight-normal);
  --admin-type-meta-line: 1.35;
  --admin-type-table-header-size: var(--fs-xs);
  --admin-type-table-header-weight: var(--font-weight-medium);
  --admin-type-table-header-line: var(--line-height-section);
  --admin-type-table-cell-size: var(--fs-sm);
  --admin-type-table-cell-weight: var(--font-weight-normal);
  --admin-type-table-cell-line: 1.4;
  --admin-type-form-label-size: var(--fs-sm);
  --admin-type-form-label-weight: var(--font-weight-emphasis);
  --admin-type-form-label-line: 1.35;
  --admin-type-form-help-size: var(--fs-xs);
  --admin-type-form-help-weight: var(--font-weight-normal);
  --admin-type-form-help-line: var(--line-height-caption);
  --admin-type-metric-lg-size: var(--fs-metric-lg);
  --admin-type-metric-lg-weight: var(--font-weight-title);
  --admin-type-metric-lg-line: var(--line-height-metric-lg);
  --admin-type-metric-md-size: var(--fs-metric-md);
  --admin-type-metric-md-weight: var(--font-weight-title);
  --admin-type-metric-md-line: var(--line-height-metric-md);
  --admin-type-button-size: var(--fs-sm);
  --admin-type-button-weight: var(--font-weight-medium);
  --admin-type-button-line: var(--line-height-button);
  --admin-type-badge-size: var(--fs-xs);
  --admin-type-badge-weight: var(--font-weight-medium);
  --admin-type-badge-line: var(--line-height-button);
  --admin-type-drawer-title-size: var(--fs-section);
  --admin-type-drawer-title-weight: var(--font-weight-title);
  --admin-type-drawer-title-line: var(--line-height-title);
  --admin-type-sidebar-group-size: var(--fs-xs);
  --admin-type-sidebar-group-weight: var(--font-weight-medium);
  --admin-type-sidebar-nav-size: var(--fs-sm);
  --admin-type-sidebar-nav-weight: var(--font-weight-normal);
}

/* Semantic aliases */
:root {
  --color-primary: var(--isac-brand-700);
  --color-primary-hover: var(--isac-brand-800);
  --color-primary-soft: var(--isac-brand-50);
  --color-primary-muted: var(--isac-brand-100);
  --color-success: var(--isac-brand-600);
  --color-warning: var(--isac-amber-600);
  --color-danger: var(--isac-red-600);
  --color-info: #0284c7;
  --color-purple: var(--isac-violet-600);

  /* Status badge tokens */
  --status-draft-bg: #f1f5f9;
  --status-draft-fg: #475569;
  --status-submitted-bg: var(--surface-info-soft);
  --status-submitted-fg: var(--isac-blue-700);
  --status-review-bg: var(--surface-warning-soft);
  --status-review-fg: var(--text-warning);
  --status-approved-bg: var(--isac-brand-100);
  --status-approved-fg: var(--text-success);
  --status-rejected-bg: var(--surface-danger-soft);
  --status-rejected-fg: var(--text-danger);
  --status-active-bg: #dcfce7;
  --status-active-fg: #166534;
}