/* ============================================================
   THEME.CSS — Boarderless
   ALL CSS custom properties live here and ONLY here.
   Never hardcode a color, font, or radius anywhere else.
   Change a value here to change it everywhere in the app.
   ============================================================ */



:root {
  /* --- Canvas background --- */
  --color-canvas-bg:     #111111;
  --color-checker-dark:  #111111;
  --color-checker-light: #1a1a1a;

  /* --- Surfaces --- */
  --color-surface:         rgba(13, 13, 17, 0.96);
  --color-surface-hover:   rgba(255, 255, 255, 0.08);
  --color-surface-active:  rgba(255, 255, 255, 0.12);
  --color-gallery-bg:      rgba(7, 7, 9, 0.96);
  --color-bar-bg:          rgba(5, 5, 7, 0.94);
  --color-splash-bg:       #0a0a0a;

  /* --- Borders --- */
  --color-border:         rgba(255, 255, 255, 0.08);
  --color-border-medium:  rgba(255, 255, 255, 0.14);
  --color-border-strong:  rgba(255, 255, 255, 0.22);

  /* --- Text --- */
  --color-text-primary:   rgba(255, 255, 255, 0.85);
  --color-text-secondary: rgba(255, 255, 255, 0.40);
  --color-text-tertiary:  rgba(255, 255, 255, 0.18);
  --color-text-hint:      rgba(255, 255, 255, 0.10);

  /* --- Accent (blue) --- */
  --color-accent:         rgba(100, 160, 255, 0.85);
  --color-accent-dim:     rgba(100, 160, 255, 0.18);
  --color-accent-border:  rgba(100, 160, 255, 0.28);
  --color-accent-glow:    rgba(100, 160, 255, 0.40);

  /* --- Danger (red) --- */
  --color-danger:         rgba(255, 75, 75, 0.85);
  --color-danger-hover:   rgba(255, 50, 50, 0.10);

  /* --- Typography --- */
  --font-brand: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-ui:    'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'Courier New', 'Consolas', monospace;

  /* --- Radii --- */
  --radius-sm:  7px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;

  /* --- Transitions --- */
  --transition-fast: 0.13s ease;
  --transition-med:  0.24s ease;

  /* --- Shadows --- */
  --shadow-menu: 0 14px 44px rgba(0, 0, 0, 0.65);
  --shadow-panel: 0 8px 28px rgba(0, 0, 0, 0.50);

  /* --- Z-index layers --- */
  --z-canvas:       1;
  --z-overlay:      10;
  --z-gallery:      20;
  --z-app:          100;
  --z-bar:          10000;
  --z-ctx-menu:     10100;
  --z-stack-ui:     10100;
  --z-drop-overlay: 10200;
  --z-splash:       11000;
  --z-beta-wall:    12000;

  /* --- Layout spacing --- */
  --bottom-safe:    150px;
}