/*
 * OpenClaw Theme — v2.0
 * Single source of truth for all OpenClaw app styling.
 * Warm gold accent with hand-drawn sketch icon system.
 *
 * Usage: <link rel="stylesheet" href="/shared/openclaw-theme.css">
 */

/* ============================================
   CSS RESET (minimal)
   ============================================ */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================
   DESIGN TOKENS (CSS Custom Properties)
   Change these values to restyle ALL apps at once.
   ============================================ */

:root {
  /* --- Backgrounds (dark mode) --- */
  --oc-bg:           #0c0c0e;
  --oc-bg-deep:      #0a0a0c;
  --oc-bg-surface:   #111113;
  --oc-bg-elevated:  #151517;
  --oc-bg-active:    linear-gradient(135deg, #1e1e22, #1a1a1e);
  --oc-bg-hover:     #1a1a1e;
  --oc-bg-input:     #111113;

  /* --- Accent / Brand (warm gold) --- */
  --oc-accent:               #c4a882;
  --oc-accent-soft:          rgba(196, 168, 130, 0.55);
  --oc-accent-glow:          rgba(196, 168, 130, 0.03);
  --oc-accent-border:        rgba(196, 168, 130, 0.4);
  --oc-accent-border-subtle: rgba(196, 168, 130, 0.35);
  --oc-accent-border-hover:  rgba(196, 168, 130, 0.6);

  /* --- Text --- */
  --oc-text:           #e8e0d4;
  --oc-text-secondary: rgba(255, 255, 255, 0.65);
  --oc-text-tertiary:  rgba(255, 255, 255, 0.45);
  --oc-text-muted:     rgba(255, 255, 255, 0.3);
  --oc-text-faint:     rgba(255, 255, 255, 0.2);

  /* --- Borders --- */
  --oc-border:         rgba(255, 255, 255, 0.1);
  --oc-border-subtle:  rgba(255, 255, 255, 0.08);
  --oc-border-active:  rgba(196, 168, 130, 0.4);

  /* --- Semantic Colors --- */
  --oc-success:            #4ADE80;
  --oc-success-subtle:     rgba(74, 222, 128, 0.12);
  --oc-warning:            #FBBF24;
  --oc-warning-subtle:     rgba(251, 191, 36, 0.12);
  --oc-error:              #EF4444;
  --oc-error-subtle:       rgba(239, 68, 68, 0.12);
  --oc-info:               #60A5FA;
  --oc-info-subtle:        rgba(96, 165, 250, 0.12);

  /* --- Typography --- */
  --oc-font:       'Inter', -apple-system, system-ui, sans-serif;
  --oc-font-serif: 'Spectral', 'Georgia', 'Times New Roman', serif;
  --oc-font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  --oc-text-xs:   10px;
  --oc-text-sm:   12px;
  --oc-text-md:   13px;
  --oc-text-base: 14px;
  --oc-text-lg:   16px;
  --oc-text-xl:   20px;
  --oc-text-2xl:  28px;
  --oc-text-3xl:  32px;

  --oc-leading-tight:      1.3;
  --oc-leading-normal:     1.5;
  --oc-leading-relaxed:    1.7;

  --oc-weight-normal:      400;
  --oc-weight-medium:      500;
  --oc-weight-semibold:    600;
  --oc-weight-bold:        700;

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

  /* --- Border Radius (max 10px) --- */
  --oc-radius-xs:   4px;
  --oc-radius-sm:   6px;
  --oc-radius-md:   8px;
  --oc-radius-lg:   10px;
  --oc-radius-full: 9999px;

  /* --- Shadows --- */
  --oc-shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.3);
  --oc-shadow-md:          0 4px 12px rgba(0, 0, 0, 0.3);
  --oc-shadow-lg:          0 4px 20px rgba(0, 0, 0, 0.4);
  --oc-shadow-card-active: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(196,168,130,0.15);
  --oc-shadow-glow:        0 0 20px rgba(196, 168, 130, 0.15);

  /* --- Transitions --- */
  --oc-transition-fast:    100ms ease;
  --oc-transition:         150ms ease;
  --oc-transition-slow:    300ms ease;

  /* --- Z-index layers --- */
  --oc-z-dropdown:         100;
  --oc-z-sticky:           200;
  --oc-z-modal:            300;
  --oc-z-toast:            400;
}

/* ============================================
   BASE STYLES
   ============================================ */

body {
  font-family: var(--oc-font);
  font-size: var(--oc-text-base);
  font-weight: var(--oc-weight-normal);
  line-height: var(--oc-leading-normal);
  color: var(--oc-text);
  background-color: var(--oc-bg);
  min-height: 100vh;
}

/* Typography defaults */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--oc-weight-semibold);
  line-height: var(--oc-leading-tight);
  color: var(--oc-text);
}

h1 { font-size: var(--oc-text-3xl); }
h2 { font-size: var(--oc-text-2xl); }
h3 { font-size: var(--oc-text-xl); }
h4 { font-size: var(--oc-text-lg); }

p {
  line-height: var(--oc-leading-relaxed);
  color: var(--oc-text-secondary);
}

a {
  color: var(--oc-accent);
  text-decoration: none;
  transition: color var(--oc-transition);
}

a:hover {
  color: var(--oc-accent);
  opacity: 0.8;
}

code, pre {
  font-family: var(--oc-font-mono);
  font-size: 0.9em;
}

code {
  background: var(--oc-bg-surface);
  padding: 0.15em 0.4em;
  border-radius: var(--oc-radius-sm);
  color: var(--oc-accent);
}

pre {
  background: var(--oc-bg-surface);
  padding: var(--oc-space-4);
  border-radius: var(--oc-radius-md);
  overflow-x: auto;
  border: 1px solid var(--oc-border);
}

pre code {
  background: none;
  padding: 0;
  color: var(--oc-text);
}

/* Scrollbar styling (dark mode) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--oc-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--oc-border);
  border-radius: var(--oc-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--oc-text-muted);
}

/* Selection */
::selection {
  background: var(--oc-accent-soft);
  color: var(--oc-text);
}