/*
 * Keisa Design System — Colors & Typography
 * ==========================================
 * AI legal assistant for family court cases in Chile
 * Version 1.0 · May 2026
 */

/* ─── Web Fonts ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('./fonts/PlusJakartaSans-VariableFont.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('./fonts/PlusJakartaSans-Italic-VariableFont.ttf') format('truetype');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DMSans-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DMSans-Italic-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


/* ─── Primitive Color Tokens ────────────────────────────────── */
:root {

  /* --- Brand Gradient --- */
  --color-purple-600:   #6C63FF;   /* gradient start */
  --color-purple-400:   #5B8EFF;   /* gradient mid */
  --color-blue-400:     #3FA9F5;   /* gradient end */
  --color-purple-300:   #A78BFA;   /* soft purple glow / dark-mode logos */

  /* --- Gradient definitions --- */
  --gradient-primary: linear-gradient(135deg, #6C63FF 0%, #5B8EFF 55%, #3FA9F5 100%);
  --gradient-primary-radial: radial-gradient(circle at 30% 30%, #6C63FF 0%, #3FA9F5 100%);
  --gradient-soft: linear-gradient(135deg, #A78BFA 0%, #3FA9F5 100%);

  /* --- Dark Surface Scale (primary backgrounds) --- */
  --color-navy-950:     #0B1220;   /* L0 — primary background */
  --color-navy-900:     #111827;   /* L1 — cards, input fields */
  --color-navy-800:     #1C2433;   /* L2 — floating elements, sticky headers */
  --color-navy-700:     #253040;   /* L3 — hover states on dark */

  /* --- Light Surface Scale --- */
  --color-gray-50:      #F3F4F6;   /* light background, cards on dark canvas */
  --color-gray-100:     #E5E7EB;   /* borders on light surfaces */
  --color-gray-200:     #D1D5DB;   /* dividers */
  --color-gray-400:     #9CA3AF;   /* secondary text on both modes */
  --color-gray-900:     #111827;   /* primary text on light */
  --color-dark-ink:     #0F172A;   /* deepest text / wordmark black */

  /* --- Functional --- */
  --color-success:      #22C55E;
  --color-warning:      #F59E0B;
  --color-error:        #EF4444;
  --color-info:         #3FA9F5;

  /* --- White / Black --- */
  --color-white:        #FFFFFF;
  --color-black:        #000000;


/* ─── Semantic Color Tokens ─────────────────────────────────── */

  /* Backgrounds */
  --bg-base:            var(--color-navy-950);   /* primary canvas */
  --bg-surface:         var(--color-navy-900);   /* cards, containers */
  --bg-raised:          var(--color-navy-800);   /* modals, drawers, sticky */
  --bg-hover:           var(--color-navy-700);   /* hover on dark */
  --bg-light:           var(--color-gray-50);    /* nested cards on dark */
  --bg-light-surface:   var(--color-white);      /* onboarding / light mode screens */

  /* Text */
  --text-primary:       var(--color-white);      /* primary text on dark */
  --text-secondary:     var(--color-gray-400);   /* secondary text on dark */
  --text-on-light:      var(--color-gray-900);   /* primary text on light */
  --text-secondary-light: var(--color-gray-400); /* secondary text on light */
  --text-brand:         var(--color-purple-600);
  --text-accent:        var(--color-purple-300);

  /* Interactive */
  --action-primary-start:  var(--color-purple-600);
  --action-primary-end:    var(--color-blue-400);
  --action-primary-bg:     var(--gradient-primary);
  --action-focus-ring:     var(--color-purple-600);

  /* Borders */
  --border-subtle:      rgba(255, 255, 255, 0.06);
  --border-default:     rgba(255, 255, 255, 0.10);
  --border-emphasis:    rgba(108, 99, 255, 0.30);
  --border-light:       var(--color-gray-200);

  /* Shadows — whisper shadows only, blue-tinted */
  --shadow-xs:   0 1px 3px rgba(63, 169, 245, 0.05);
  --shadow-sm:   0 2px 8px rgba(63, 169, 245, 0.06);
  --shadow-md:   0 4px 16px rgba(63, 169, 245, 0.07);
  --shadow-lg:   0 8px 32px rgba(63, 169, 245, 0.08);
  --shadow-glow: 0 0 24px rgba(108, 99, 255, 0.18);

  /* Status */
  --status-success:     var(--color-success);
  --status-warning:     var(--color-warning);
  --status-error:       var(--color-error);
  --status-info:        var(--color-info);

  /* Functional backgrounds */
  --bg-success:         rgba(34, 197, 94, 0.12);
  --bg-warning:         rgba(245, 158, 11, 0.12);
  --bg-error:           rgba(239, 68, 68, 0.12);
  --bg-info:            rgba(63, 169, 245, 0.12);


/* ─── Border Radius ──────────────────────────────────────────── */
  --radius-xs:    4px;    /* micro: checkboxes, tags */
  --radius-sm:    8px;    /* inputs, chips */
  --radius-md:    16px;   /* cards, buttons */
  --radius-lg:    24px;   /* modals, bottom sheets */
  --radius-full:  9999px; /* status badges, pills */


/* ─── Spacing Scale (base 4px) ───────────────────────────────── */
  --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;

  /* Layout */
  --container-padding-mobile: 20px;
  --gutter: 16px;
  --touch-target: 48px;


/* ─── Typography ─────────────────────────────────────────────── */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Display / Heading scale */
  --text-h1-size:    30px;
  --text-h1-lh:      38px;
  --text-h1-ls:      -0.02em;
  --text-h1-weight:  700;

  --text-h2-size:    24px;
  --text-h2-lh:      32px;
  --text-h2-ls:      -0.01em;
  --text-h2-weight:  700;

  --text-h3-size:    20px;
  --text-h3-lh:      28px;
  --text-h3-ls:      0em;
  --text-h3-weight:  600;

  /* Body scale */
  --text-body-lg-size: 18px;
  --text-body-lg-lh:   28px;
  --text-body-lg-weight: 400;

  --text-body-md-size: 16px;
  --text-body-md-lh:   24px;
  --text-body-md-weight: 400;

  --text-body-sm-size: 14px;
  --text-body-sm-lh:   20px;
  --text-body-sm-weight: 400;

  --text-label-size:   13px;
  --text-label-lh:     18px;
  --text-label-ls:     0.02em;
  --text-label-weight: 500;
}


/* ─── Utility Classes ────────────────────────────────────────── */

/* Typography */
.keisa-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
  font-weight: var(--text-h1-weight);
}
.keisa-h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  font-weight: var(--text-h2-weight);
}
.keisa-h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: var(--text-h3-weight);
}
.keisa-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  font-weight: var(--text-body-lg-weight);
}
.keisa-body-md {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-lh);
  font-weight: var(--text-body-md-weight);
}
.keisa-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  font-weight: var(--text-body-sm-weight);
}
.keisa-label {
  font-family: var(--font-body);
  font-size: var(--text-label-size);
  line-height: var(--text-label-lh);
  letter-spacing: var(--text-label-ls);
  font-weight: var(--text-label-weight);
  text-transform: uppercase;
}

/* Gradient text */
.keisa-gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Primary button */
.keisa-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  height: var(--touch-target);
  background: var(--gradient-primary);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  font-weight: 500;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.15), var(--shadow-sm);
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.keisa-btn-primary:hover  { opacity: 0.9; }
.keisa-btn-primary:active { transform: scale(0.98); }
.keisa-btn-primary:focus-visible {
  outline: 2px solid var(--action-focus-ring);
  outline-offset: 2px;
}

/* Secondary button */
.keisa-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  height: var(--touch-target);
  background: rgba(63, 169, 245, 0.10);
  color: var(--color-blue-400);
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid rgba(63, 169, 245, 0.20);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.keisa-btn-secondary:hover  { background: rgba(63, 169, 245, 0.16); }
.keisa-btn-secondary:active { transform: scale(0.98); }

/* Card */
.keisa-card {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

/* Status badge */
.keisa-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  font-weight: 500;
}
.keisa-badge--success { background: var(--bg-success); color: var(--color-success); }
.keisa-badge--warning { background: var(--bg-warning); color: var(--color-warning); }
.keisa-badge--error   { background: var(--bg-error);   color: var(--color-error); }
.keisa-badge--info    { background: var(--bg-info);    color: var(--color-blue-400); }
.keisa-badge--accent  { background: rgba(167,139,250,0.15); color: var(--color-purple-300); }