/* =============================================================
   Turing Discovery — Colors & Type Tokens
   v1.0 · Maio 2026
   ============================================================= */

/* Inter — local brand font files (replaces Google Fonts CDN for Inter) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Inter_28pt-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Inter_28pt-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Inter_28pt-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Inter_28pt-Bold.ttf') format('truetype');
}

/* JetBrains Mono — still loaded from Google Fonts (no local file provided) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- PRIMARY · Turing Blue ---------- */
  --td-primary-50:  #F0F4FF;
  --td-primary-100: #E2E9FF;
  --td-primary-200: #C3D3FF;
  --td-primary-300: #9DB7FF;
  --td-primary-400: #6F91FF;
  --td-primary-500: #5D87FF;   /* base */
  --td-primary-600: #4D6FFF;
  --td-primary-700: #3F5BE0;
  --td-primary-800: #2D43B8;
  --td-primary-900: #1F3091;

  /* ---------- NEUTRALS ---------- */
  --td-neutral-0:   #FFFFFF;
  --td-neutral-50:  #FAFAFA;
  --td-neutral-100: #F8F9FA;
  --td-neutral-200: #F1F3F5;
  --td-neutral-300: #E5E7EB;
  --td-neutral-400: #D1D5DB;
  --td-neutral-500: #9CA3AF;
  --td-neutral-600: #6B7280;
  --td-neutral-700: #4B5563;
  --td-neutral-800: #1F2937;
  --td-neutral-900: #111827;

  /* ---------- STATUS ---------- */
  --td-success-50:  #ECFDF5;
  --td-success-100: #D1FAE5;
  --td-success-500: #10B981;
  --td-success-600: #059669;
  --td-success-700: #047857;

  --td-info-50:  #F0FDFA;
  --td-info-100: #CCFBF1;
  --td-info-500: #14B8A6;
  --td-info-600: #0D9488;
  --td-info-700: #0F766E;

  --td-warning-50:  #FFFBEB;
  --td-warning-100: #FEF3C7;
  --td-warning-500: #F59E0B;
  --td-warning-600: #D97706;
  --td-warning-700: #B45309;

  --td-danger-50:  #FEF2F2;
  --td-danger-100: #FEE2E2;
  --td-danger-500: #EF4444;
  --td-danger-600: #DC2626;
  --td-danger-700: #B91C1C;

  /* ---------- ACCENTS (uso comercial restrito) ---------- */
  --td-accent-coral:  #F97066;
  --td-accent-violet: #7C3AED;

  /* ---------- SEMANTIC ALIASES ---------- */
  --td-bg-app:       var(--td-neutral-50);
  --td-bg-surface:   var(--td-neutral-0);
  --td-bg-subtle:    var(--td-neutral-100);
  --td-bg-muted:     var(--td-neutral-200);
  --td-border:       var(--td-neutral-300);
  --td-border-soft:  var(--td-neutral-200);
  --td-fg-primary:   var(--td-neutral-900);
  --td-fg-body:      var(--td-neutral-800);
  --td-fg-secondary: var(--td-neutral-600);
  --td-fg-muted:     var(--td-neutral-500);
  --td-fg-disabled:  var(--td-neutral-400);
  --td-fg-link:      var(--td-primary-600);
  --td-fg-on-primary: var(--td-neutral-0);

  /* ---------- TYPOGRAPHY · families ---------- */
  --td-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --td-font-mono: 'JetBrains Mono', 'Roboto Mono', 'Courier New', monospace;

  /* ---------- TYPOGRAPHY · scale ---------- */
  --td-text-display-xl: 56px;
  --td-text-display-lg: 44px;
  --td-text-h1: 32px;
  --td-text-h2: 24px;
  --td-text-h3: 20px;
  --td-text-h4: 18px;
  --td-text-body-lg: 16px;
  --td-text-body: 14px;
  --td-text-body-sm: 13px;
  --td-text-caption: 12px;
  --td-text-overline: 11px;

  /* ---------- SPACING (4px base) ---------- */
  --td-space-0: 0;
  --td-space-1: 4px;
  --td-space-2: 8px;
  --td-space-3: 12px;
  --td-space-4: 16px;
  --td-space-5: 20px;
  --td-space-6: 24px;
  --td-space-8: 32px;
  --td-space-10: 40px;
  --td-space-12: 48px;
  --td-space-16: 64px;
  --td-space-20: 80px;
  --td-space-24: 96px;

  /* ---------- RADII ---------- */
  --td-radius-sm: 4px;
  --td-radius-md: 8px;
  --td-radius-lg: 12px;
  --td-radius-xl: 16px;
  --td-radius-2xl: 24px;
  --td-radius-full: 9999px;

  /* ---------- SHADOWS ---------- */
  --td-shadow-xs:    0 1px 2px rgba(17, 24, 39, 0.04);
  --td-shadow-sm:    0 2px 4px rgba(17, 24, 39, 0.06);
  --td-shadow-md:    0 4px 12px rgba(17, 24, 39, 0.08);
  --td-shadow-lg:    0 12px 24px rgba(17, 24, 39, 0.10);
  --td-shadow-focus: 0 0 0 4px rgba(93, 135, 255, 0.20);

  /* ---------- ICONS ---------- */
  --td-icon-xs: 14px;
  --td-icon-sm: 16px;
  --td-icon-md: 20px;
  --td-icon-lg: 24px;
  --td-icon-xl: 32px;

  /* ---------- LAYOUT ---------- */
  --td-container-max: 1200px;
  --td-container-max-xl: 1280px;
  --td-sidebar-width: 260px;
  --td-sidebar-collapsed: 64px;
  --td-header-height: 64px;
}

/* =============================================================
   Base typography rules
   ============================================================= */
html, body {
  font-family: var(--td-font-sans);
  color: var(--td-fg-body);
  background: var(--td-bg-app);
  font-size: var(--td-text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--td-fg-primary);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--td-text-h1);     line-height: 1.2;  font-weight: 700; }
h2 { font-size: var(--td-text-h2);     line-height: 1.3;  font-weight: 600; }
h3 { font-size: var(--td-text-h3);     line-height: 1.4;  font-weight: 600; }
h4 { font-size: var(--td-text-h4);     line-height: 1.45; font-weight: 600; }

p { text-wrap: pretty; }

code, kbd, samp {
  font-family: var(--td-font-mono);
  font-size: 0.9em;
}

a {
  color: var(--td-fg-link);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--td-primary-700); text-decoration: underline; }

/* =============================================================
   Type utility classes
   ============================================================= */
.td-display-xl { font-size: var(--td-text-display-xl); line-height: 1.1;  font-weight: 700; letter-spacing: -0.02em; color: var(--td-fg-primary); }
.td-display-lg { font-size: var(--td-text-display-lg); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--td-fg-primary); }
.td-h1         { font-size: var(--td-text-h1);         line-height: 1.2;  font-weight: 700; letter-spacing: -0.01em; color: var(--td-fg-primary); }
.td-h2         { font-size: var(--td-text-h2);         line-height: 1.3;  font-weight: 600; color: var(--td-fg-primary); }
.td-h3         { font-size: var(--td-text-h3);         line-height: 1.4;  font-weight: 600; color: var(--td-fg-primary); }
.td-h4         { font-size: var(--td-text-h4);         line-height: 1.45; font-weight: 600; color: var(--td-fg-primary); }
.td-body-lg    { font-size: var(--td-text-body-lg);    line-height: 1.5;  font-weight: 400; color: var(--td-fg-body); }
.td-body       { font-size: var(--td-text-body);       line-height: 1.5;  font-weight: 400; color: var(--td-fg-body); }
.td-body-sm    { font-size: var(--td-text-body-sm);    line-height: 1.45; font-weight: 400; color: var(--td-fg-secondary); }
.td-caption    { font-size: var(--td-text-caption);    line-height: 1.4;  font-weight: 500; color: var(--td-fg-secondary); }
.td-overline   {
  font-size: var(--td-text-overline);
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--td-fg-muted);
}
.td-mono { font-family: var(--td-font-mono); }

/* =============================================================
   Dark mode preview (for training platform)
   ============================================================= */
[data-theme="dark"] {
  --td-bg-app:      #0A0C12;
  --td-bg-surface:  #0F1117;
  --td-bg-subtle:   #161922;
  --td-bg-muted:    #1F2330;
  --td-border:      #2A2F3D;
  --td-border-soft: #1F2330;
  --td-fg-primary:  #F1F3F5;
  --td-fg-body:     #D1D5DB;
  --td-fg-secondary:#9CA3AF;
  --td-fg-muted:    #6B7280;
  --td-fg-link:     #6F91FF;
}