/* ─── Reset & Box Sizing ───────────────────────────────────────────────── */
:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ─── Design Tokens ────────────────────────────────────────────────────── */
:root {
  --color-surface-base: #1a1a1a;
  --color-surface-layer1: #2d2d2d;
  --color-surface-layer2: #333;

  --color-text-primary: #e0e0e0;
  --color-text-secondary: #a0aec0;
  --color-heading: #ffffff;

  --color-border: #444;
  --color-border-hover: #555;

  --color-primary: #444;
  --color-primary-hover: #555;
  --color-success: #68d391;
  --color-warning: #f6ad55;
  --color-error: #c82c2c;

  --color-hover-overlay: rgba(255, 255, 255, 0.05);

  /* Syntax Highlighting - Dark */
  --hl-header: #63b3ed;
  --hl-comment: #a0aec0;
  --hl-brace: #68d391;
  --hl-var: #fbb6ce;
  --hl-val: #d6bcfa;

  --font-family-body: 'Atkinson Hyperlegible Next', system-ui, -apple-system, sans-serif;
  --font-family-code: 'JetBrains Mono', 'Fira Code', monospace;
  --font-family-icons: 'Material Icons';

  --font-size-xs: 0.75rem;
  --font-size-s: 0.875rem;
  --font-size-m: 1rem;
  --font-size-l: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-xxl: 1.5rem;

  --font-size-ui-title: var(--font-size-xxl);
  --font-size-ui-body: var(--font-size-m);
  --font-size-ui-label: var(--font-size-s);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --border-radius: 8px;
  --border-radius-sm: 4px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

  /* Spacing Tokens */
  --dist-xs: 4px;
  --dist-s: 8px;
  --dist-m: 12px;
  --dist-l: 16px;
  --dist-xl: 24px;
  --dist-xxl: 40px;
  --dist-3xl: 64px;
}

/* ─── Light Theme ──────────────────────────────────────────────────────── */
[data-theme="light"] {
  --color-surface-base: #f0f2f5;
  --color-surface-layer1: #ffffff;
  --color-surface-layer2: #f8f9fa;
  --color-text-primary: #222;
  --color-text-secondary: #718096;
  --color-heading: #333;
  --color-border: #ddd;
  --color-border-hover: #ccc;
  --color-primary: #007bff;
  --color-primary-hover: #0056b3;
  --color-hover-overlay: rgba(0, 0, 0, 0.04);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  /* Syntax Highlighting - Light */
  --hl-header: #2b6cb0;
  --hl-comment: #718096;
  --hl-brace: #38a169;
  --hl-var: #d53f8c;
  --hl-val: #805ad5;
}

/* ─── Base ─────────────────────────────────────────────────────────────── */
body {
  margin: 0;
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-ui-body);
  transition: background-color 0.3s, color 0.3s;
}

pl-app {
  opacity: 0;
  transform: translateY(var(--dist-xs));
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fonts-loaded pl-app {
  opacity: 1;
  transform: translateY(0);
}


/* ─── Scrollbar ────────────────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-hover) transparent;
}

::-webkit-scrollbar {
  width: var(--dist-s);
  height: var(--dist-s);
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-hover);
  border-radius: var(--dist-xs);
}

/* ─── Print ──────────────────────────────────────────────────────────────────── */
pl-print-view {
  display: none;
}

@media print {
  @page {
    size: landscape;
    margin: 0.5in;
  }

  body> :not(pl-print-view) {
    display: none !important;
  }

  pl-print-view {
    display: block !important;
  }
}