/* ============================================================
   KAIFLU DESIGN SYSTEM — CSS Custom Properties
   colors_and_type.css
   ============================================================ */

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('fonts/NunitoSans-VariableFont_YTLC_opsz_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('fonts/NunitoSans-Italic-VariableFont_YTLC_opsz_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  /* ── Brand Colors ─────────────────────────────────────────── */
  --color-primary:        #5850ec;
  --color-primary-light:  #ede9fe;
  --color-primary-dark:   #4740d4;
  --color-primary-hover:  #4740d4;

  --color-secondary:      #475569;
  --color-secondary-light:#f1f5f9;
  --color-secondary-dark: #334155;

  --color-tertiary:       #10b981;
  --color-tertiary-light: #d1fae5;
  --color-tertiary-dark:  #059669;

  --color-neutral:        #0f172a;

  /* ── Semantic / Status Colors ─────────────────────────────── */
  --color-success:        #10b981;
  --color-success-light:  #d1fae5;
  --color-success-dark:   #059669;
  --color-success-text:   #065f46;

  --color-warning:        #f59e0b;
  --color-warning-light:  #fef3c7;
  --color-warning-dark:   #d97706;
  --color-warning-text:   #92400e;

  --color-danger:         #ef4444;
  --color-danger-light:   #fee2e2;
  --color-danger-dark:    #dc2626;
  --color-danger-text:    #991b1b;

  --color-info:           #3b82f6;
  --color-info-light:     #dbeafe;
  --color-info-dark:      #2563eb;
  --color-info-text:      #1e40af;

  /* ── Neutrals ─────────────────────────────────────────────── */
  --color-neutral-50:     #f8fafc;
  --color-neutral-100:    #f1f5f9;
  --color-neutral-200:    #e2e8f0;
  --color-neutral-300:    #cbd5e1;
  --color-neutral-400:    #94a3b8;
  --color-neutral-500:    #64748b;
  --color-neutral-600:    #475569;
  --color-neutral-700:    #334155;
  --color-neutral-800:    #1e293b;
  --color-neutral-900:    #0f172a;

  /* ── Surface / Background ────────────────────────────────── */
  --color-bg:             #f8fafc;
  --color-surface:        #ffffff;
  --color-border:         #e5e7eb;
  --color-border-strong:  #d1d5db;

  /* ── Text ────────────────────────────────────────────────── */
  --color-fg1:            #0f172a;   /* primary text */
  --color-fg2:            #475569;   /* secondary text */
  --color-fg3:            #94a3b8;   /* muted / placeholder */
  --color-fg-inverse:     #ffffff;

  /* ── Icon Colors ─────────────────────────────────────────── */
  --color-icon-default:   #64748b;
  --color-icon-active:    #5850ec;
  --color-icon-muted:     #94a3b8;

  /* ── Shadows / Elevation ─────────────────────────────────── */
  --shadow-0:   none;
  --shadow-1:   0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px 0 rgba(0,0,0,0.06);
  --shadow-2:   0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-3:   0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-focus: 0 0 0 3px rgba(88,80,236,0.15);

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ── Spacing Scale (4px base) ────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* ── Layout ──────────────────────────────────────────────── */
  --sidebar-width:        240px;
  --sidebar-collapsed:    64px;
  --topbar-height:        64px;
  --content-max-width:    1280px;

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:  150ms ease;
  --transition-base:  200ms ease;
  --transition-slow:  300ms ease;

  /* ── Font Families ───────────────────────────────────────── */
  --font-headline:  'Montserrat', sans-serif;
  --font-body:      'Nunito Sans', sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* ── Type Scale ──────────────────────────────────────────── */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   22px;
  --text-3xl:   28px;
  --text-4xl:   36px;
  --text-5xl:   48px;

  /* ── Font Weights ────────────────────────────────────────── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;

  /* ── Letter Spacing ──────────────────────────────────────── */
  --tracking-headline: -0.02em;
  --tracking-label:     0.05em;
  --tracking-normal:    normal;
}

/* ── Semantic Type Roles ────────────────────────────────────── */

h1, .h1 {
  font-family: var(--font-headline);
  font-weight: var(--weight-semibold);
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-headline);
  line-height: 1.2;
  color: var(--color-fg1);
}

h2, .h2 {
  font-family: var(--font-headline);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-headline);
  line-height: 1.25;
  color: var(--color-fg1);
}

h3, .h3 {
  font-family: var(--font-headline);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-headline);
  line-height: 1.3;
  color: var(--color-fg1);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-normal);
  line-height: 1.4;
  color: var(--color-fg1);
}

p, .body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-normal);
  line-height: 1.6;
  color: var(--color-fg1);
}

.body-sm {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-fg2);
}

.label {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg2);
}

.caption {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  color: var(--color-fg3);
  line-height: 1.4;
}

code, .code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--color-neutral-100);
  color: var(--color-primary);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* ── Base Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-fg1);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Material Symbols helper ─────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
  user-select: none;
}