/**
 * Tools Folio — Design Tokens
 * Source of truth for all CSS custom properties.
 * Load order: 1st (after fonts-local.css)
 * DO NOT add selectors here — tokens only.
 */

:root {
  /* ── Text ── */
  --ink:   #0F172A;
  --ink-2: #1E293B;
  --ink-3: #475569;
  --ink-4: #94A3B8;
  --ink-5: #CBD5E1;

  /* ── Surfaces ── */
  --surface:   #FFFFFF;
  --surface-2: #F8FAFC;
  --surface-3: #F1F5F9;
  --surface-4: #E2E8F0;

  /* ── Brand amber ── */
  --tf-amber:      #E8943A;
  --tf-amber-dark: #C0622A;
  --tf-amber-lite: #FFF5EB;
  --tf-amber-glow: rgba(232,148,58,.18);

  /* ── Shell chrome (topbar + footer — never changes per tool) ── */
  --tf-topbar-bg:     #0A0F1E;
  --tf-topbar-border: rgba(255,255,255,.06);
  --tf-topbar-shadow: 0 2px 16px rgba(0,0,0,.45);
  --tf-footer-bg:     #060B17;
  --tf-footer-border: rgba(255,255,255,.14);
  --tf-topbar-h:      48px;  /* MUST match shell.js TOPBAR_H = '48px' constant */

  /* ── Semantic status colors ── */
  --color-success:        #059669;
  --color-success-bg:     #ECFDF5;
  --color-success-border: #6EE7B7;
  --color-warning:        #B45309;
  --color-warning-bg:     #FEF3C7;
  --color-warning-border: #FCD34D;
  --color-error:          #DC2626;
  --color-error-bg:       #FEF2F2;
  --color-error-border:   #FECACA;
  --color-info:           #1D4ED8;
  --color-info-bg:        #EFF6FF;
  --color-info-border:    #93C5FD;

  /* ── JSON syntax colors (json-toolkit, future code tools) ── */
  --color-json-key:    var(--tf-amber);
  --color-json-string: #059669;
  --color-json-number: #2563EB;
  --color-json-bool:   #D97706;
  --color-json-null:   #94A3B8;

  /* ── Layout ── */
  --r:             8px;    /* universal border-radius */
  --panel-w:       460px;  /* default panel width */
  --content-max-w: 900px;  /* max-width for scrollable content pages */

  /* ── Shadows ── */
  --shadow-card:  0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-float: 0 8px 24px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.06);
  --shadow-doc:   0 24px 64px rgba(15,23,42,.2), 0 4px 16px rgba(15,23,42,.08);

  /* ── Z-index scale (never use ad-hoc numbers) ── */
  --z-resizer:      10;
  --z-mob-overlay:  145;
  --z-panel:        150;
  --z-mob-toolbar:  160;
  --z-bottom-sheet: 165;
  --z-footer:       190;
  --z-topbar:       195;   /* topbar must sit above footer and panel */
  --z-toast:        200;
  --z-modal:        300;   /* for NON-native modal overlays only; native <dialog>
                              uses the browser top-layer and ignores z-index */

  /* ── Motion ── */
  --ease-standard:   cubic-bezier(.4,0,.2,1);  /* Material standard easing */
  --ease-decelerate: cubic-bezier(0,0,.2,1);   /* Material decelerate */
  --duration-fast:   .15s;
  --duration-normal: .25s;
  --duration-slow:   .35s;

  /* ── Typography ── */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* ── Responsive token overrides ── */

/* Tablet: narrow the panel so preview area stays usable */
@media (min-width: 769px) and (max-width: 1100px) {
  :root { --panel-w: 340px; }
}

/* Mobile: panel becomes full-screen overlay, width is irrelevant */
@media (max-width: 768px) {
  :root { --panel-w: 100%; }
}