/* ============================================================
   PY INTERNALS — BASE CSS
   Design tokens, reset, typography, global utilities
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Palette */
  --clr-bg:          #FAFAF7;
  --clr-surface:     #FFFFFF;
  --clr-surface-2:   #F4F4EF;
  --clr-border:      #E2E2D8;
  --clr-border-soft: #EBEBЕ4;

  --clr-text:        #1A1A18;
  --clr-text-2:      #4A4A44;
  --clr-text-3:      #8A8A80;
  --clr-text-inv:    #FAFAF7;

  --clr-accent:      #1A6B5C;   /* deep teal */
  --clr-accent-lt:   #E6F4F1;   /* teal tint */
  --clr-accent-2:    #B85C1A;   /* amber — for warnings/highlights */
  --clr-accent-2lt:  #FDF0E6;

  /* Memory visualization colors */
  --clr-mem-stack:   #1A4B6B;   /* deep blue */
  --clr-mem-heap:    #3D1A6B;   /* deep purple */
  --clr-mem-ref:     #B85C1A;   /* reference arrow amber */
  --clr-mem-new:     #1A6B4B;   /* newly created object */
  --clr-mem-del:     #6B1A1A;   /* about to be garbage collected */

  /* Type palette for Python types */
  --clr-type-int:    #1A5C8A;
  --clr-type-float:  #4A1A8A;
  --clr-type-str:    #8A4A1A;
  --clr-type-bool:   #1A8A4A;
  --clr-type-none:   #6A6A5A;
  --clr-type-list:   #1A6B8A;
  --clr-type-dict:   #6B1A6B;
  --clr-type-tuple:  #1A8A8A;
  --clr-type-set:    #8A6B1A;

  /* Typography */
  --font-display: 'Lora', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.25rem;    /* 20px */
  --fs-xl:   1.5rem;     /* 24px */
  --fs-2xl:  2rem;       /* 32px */
  --fs-3xl:  2.5rem;     /* 40px */

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* Borders & Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(26,26,24,0.06);
  --shadow-sm: 0 2px 8px rgba(26,26,24,0.08);
  --shadow-md: 0 4px 16px rgba(26,26,24,0.10);
  --shadow-lg: 0 8px 32px rgba(26,26,24,0.12);
  --shadow-xl: 0 16px 48px rgba(26,26,24,0.15);

  /* Transitions */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.64, 0, 0.78, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   380ms;
  --dur-anim:   600ms;

  /* Layout */
  --sidebar-w:   280px;
  --content-max: 900px;
  --panel-h:     480px;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--clr-text);
  background-color: var(--clr-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
input, textarea, select { font: inherit; }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  color: var(--clr-text);
}

/* ── Typography Utilities ─────────────────────────────────── */
.text-display { font-family: var(--font-display); }
.text-mono    { font-family: var(--font-mono); }

.text-xs  { font-size: var(--fs-xs); }
.text-sm  { font-size: var(--fs-sm); }
.text-base{ font-size: var(--fs-base); }
.text-md  { font-size: var(--fs-md); }
.text-lg  { font-size: var(--fs-lg); }
.text-xl  { font-size: var(--fs-xl); }
.text-2xl { font-size: var(--fs-2xl); }
.text-3xl { font-size: var(--fs-3xl); }

.font-light   { font-weight: 300; }
.font-regular { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-semi    { font-weight: 600; }
.font-bold    { font-weight: 700; }

.text-muted   { color: var(--clr-text-3); }
.text-subtle  { color: var(--clr-text-2); }
.text-accent  { color: var(--clr-accent); }
.text-amber   { color: var(--clr-accent-2); }

/* ── Spacing Utilities ────────────────────────────────────── */
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }

/* ── Flex / Grid Utilities ────────────────────────────────── */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center{ align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

/* ── Visibility ───────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}
.hidden { display: none !important; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--clr-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--clr-text-3); }