/* ═══════════════════════════════════════════════════════════════
   INFINITA Design System — Colors & Type Foundations
   Derived from Intervencijska Logika v3 / EURO-OFFICE codebase
   ═══════════════════════════════════════════════════════════════ */

/* ─── Webfonts ─────────────────────────────────────────────── */
/* The codebase uses Inter (sans) + JetBrains Mono. Loaded from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ─── BRAND COLORS ─────────────────────────────────────── */
  /* INFINITA infinity-mark is a distinctive sky-blue. */
  --infinita-blue:        #4FA8DA;   /* logo primary — sampled from PNG */
  --infinita-blue-deep:   #2E86B8;   /* hover / pressed */
  --infinita-blue-soft:   #BFE0F2;   /* tints, halos */
  --infinita-green:       #D2E000;   /* secondary brand accent (lime/chartreuse logo variant) */
  --infinita-ink:         #0F172A;   /* deep slate — primary text */

  /* ─── PRIMARY (Indigo) — product UI accent ─────────────── */
  /* Product surfaces (EURO-OFFICE app) layer indigo on top of brand blue. */
  --primary-50:  #EEF2FF;
  --primary-100: #E0E7FF;
  --primary-200: #C7D2FE;
  --primary-300: #A5B4FC;
  --primary-400: #818CF8;
  --primary-500: #6366F1;   /* base */
  --primary-600: #4F46E5;
  --primary-700: #4338CA;
  --primary-800: #3730A3;
  --primary-900: #312E81;
  --primary-gradient:       linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  --primary-gradient-hover: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);

  /* ─── SECONDARY (Cyan) ─────────────────────────────────── */
  --secondary-50:  #ECFEFF;
  --secondary-100: #CFFAFE;
  --secondary-300: #67E8F9;
  --secondary-500: #06B6D4;
  --secondary-600: #0891B2;
  --secondary-700: #0E7490;
  --secondary-gradient: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);

  /* ─── SEMANTIC ─────────────────────────────────────────── */
  --success-50: #ECFDF5; --success-100: #D1FAE5; --success-500: #10B981; --success-600: #059669; --success-700: #047857;
  --warning-50: #FFFBEB; --warning-100: #FEF3C7; --warning-500: #F59E0B; --warning-600: #D97706; --warning-700: #B45309;
  --error-50:   #FEF2F2; --error-100:   #FEE2E2; --error-500:   #EF4444; --error-600:   #DC2626; --error-700:   #B91C1C;

  /* ─── STEP COLORS (workflow accents) ───────────────────── */
  /* Each project step has its own color triplet (main / light / border / text). */
  --step-problem-main: #EF4444;  --step-problem-light: #FEF2F2;  --step-problem-border: #FECACA;  --step-problem-text: #991B1B;
  --step-idea-main:    #6366F1;  --step-idea-light:    #EEF2FF;  --step-idea-border:    #C7D2FE;  --step-idea-text:    #3730A3;
  --step-general-main: #06B6D4;  --step-general-light: #ECFEFF;  --step-general-border: #A5F3FC;  --step-general-text: #155E75;
  --step-specific-main:#8B5CF6;  --step-specific-light:#F5F3FF;  --step-specific-border:#DDD6FE;  --step-specific-text:#5B21B6;
  --step-activities-main:#F59E0B;--step-activities-light:#FFFBEB;--step-activities-border:#FDE68A;--step-activities-text:#92400E;
  --step-results-main: #10B981;  --step-results-light: #ECFDF5;  --step-results-border: #A7F3D0;  --step-results-text: #065F46;
  --step-references-main:#818CF8;--step-references-light:#EEF2FF;--step-references-border:#C7D2FE;--step-references-text:#4338CA;

  /* ─── SURFACES (light mode) ────────────────────────────── */
  --bg-page:     #F8FAFC;   /* slate-50 */
  --bg-card:     #FFFFFF;
  --bg-sidebar:  #F1F5F9;   /* slate-100 */
  --bg-overlay:  rgba(15, 23, 42, 0.5);

  /* ─── TEXT ─────────────────────────────────────────────── */
  --fg-heading:  #0F172A;   /* slate-900 */
  --fg-body:     #334155;   /* slate-700 */
  --fg-muted:    #94A3B8;   /* slate-400 */
  --fg-inverse:  #FFFFFF;
  --fg-link:     #6366F1;
  --fg-link-hover: #4F46E5;

  /* ─── BORDERS ──────────────────────────────────────────── */
  --border-light:  #E2E8F0;
  --border-medium: #CBD5E1;
  --border-heavy:  #94A3B8;
  --border-focus:  #6366F1;

  /* ─── TYPOGRAPHY ───────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.25rem;   /* 20px */
  --fs-2xl:  1.5rem;    /* 24px */
  --fs-3xl:  1.875rem;  /* 30px */
  --fs-4xl:  2.25rem;   /* 36px */

  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --lh-tight:   1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  /* ─── SPACING ──────────────────────────────────────────── */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px;
  --sp-xl: 20px; --sp-2xl: 24px; --sp-3xl: 32px; --sp-4xl: 40px;
  --sp-5xl: 48px; --sp-6xl: 64px;

  /* ─── RADII ────────────────────────────────────────────── */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px;
  --r-2xl: 16px; --r-3xl: 24px; --r-full: 9999px;

  /* ─── SHADOWS ──────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm:   0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10);
  --shadow-2xl:  0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-card:        0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-card-hover:  0 10px 25px -5px rgba(0,0,0,0.10), 0 4px 10px -4px rgba(0,0,0,0.08);
  --shadow-primary-glow:0 0 20px rgba(99,102,241,0.30);
  --shadow-success-glow:0 0 20px rgba(16,185,129,0.30);

  /* ─── ANIMATION ────────────────────────────────────────── */
  --dur-fast:   150ms;
  --dur-normal: 250ms;
  --dur-slow:   350ms;
  --dur-slower: 500ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Z-INDEX ──────────────────────────────────────────── */
  --z-card: 1; --z-dropdown: 10; --z-sticky: 20; --z-sidebar: 30;
  --z-overlay: 40; --z-modal: 50; --z-loading: 60; --z-tooltip: 70; --z-toast: 80;
}

/* ─── DARK MODE ─────────────────────────────────────────── */
:root.dark, .dark {
  --bg-page:     #0B1120;   /* deepest navy */
  --bg-card:     #162032;   /* level-2 surface */
  --bg-sidebar:  #0F172A;
  --bg-overlay:  rgba(0, 0, 0, 0.6);

  --fg-heading:  rgba(255,255,255,0.87);
  --fg-body:     rgba(255,255,255,0.60);
  --fg-muted:    rgba(255,255,255,0.38);
  --fg-link:     #818CF8;
  --fg-link-hover: #A5B4FC;

  --border-light:  #1E3050;
  --border-medium: #2A4065;
  --border-focus:  #818CF8;
}

/* ═══════════════════════════════════════════════════════════════
   SEMANTIC TYPE STYLES
   ═══════════════════════════════════════════════════════════════ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--fg-heading);
  letter-spacing: -0.02em;
}
h2, .h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--fg-heading);
  letter-spacing: -0.015em;
}
h3, .h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--fg-heading);
}
h4, .h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--fg-heading);
}
h5, .h5 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--fg-heading);
}
h6, .h6 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}

p, .p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-body);
}

.text-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

.text-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-body);
}

small, .text-small { font-size: var(--fs-sm); color: var(--fg-muted); }

code, kbd, .code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--primary-50);
  color: var(--primary-700);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.dark code, .dark .code {
  background: rgba(129, 140, 248, 0.12);
  color: var(--primary-300);
}

a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-default); }
a:hover { color: var(--fg-link-hover); }