@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Outfit:wght@100..900&display=swap');

/* Shared karcisway design tokens used by the main app and standalone tools. */
:root {
  --body: #0a0a0a;
  --body-foreground: #f8fafc;
  --primary: #bc832c;
  --primary-foreground: #0a0a0a;
  --secondary: #183057;
  --secondary-foreground: #f8fafc;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --surface: color-mix(in srgb, var(--body) 92%, var(--body-foreground));
  --surface-foreground: var(--body-foreground);
  --surface-raised: color-mix(in srgb, var(--surface) 78%, var(--body-foreground));
  --surface-soft: color-mix(in srgb, var(--surface) 48%, var(--body-foreground));
  --muted: color-mix(in srgb, var(--body) 82%, var(--body-foreground));
  --muted-foreground: color-mix(in srgb, var(--body-foreground) 62%, var(--body));
  --border: color-mix(in srgb, var(--body-foreground) 12%, transparent);
  --border-strong: color-mix(in srgb, var(--body-foreground) 20%, transparent);
  --input: var(--border);
  --ring: var(--primary);
  --success: color-mix(in srgb, #22c55e 72%, var(--primary));
  --warning: color-mix(in srgb, #f59e0b 72%, var(--primary));
  --info: color-mix(in srgb, #60a5fa 72%, var(--secondary));
  --brand-gradient: linear-gradient(135deg, var(--secondary), var(--primary));
  --radius: 0.5rem;
  --shadow: 0 24px 70px -48px color-mix(in srgb, var(--body) 90%, transparent);
  --shadow-sm: 0 14px 36px -26px color-mix(in srgb, var(--body) 82%, transparent);
}

[data-theme='dark'] { color-scheme: dark; }

[data-theme='light'] {
  color-scheme: light;
  --body: #f5f3ee;
  --body-foreground: #161a20;
  --primary: #996b22;
  --primary-foreground: #fffaf0;
  --secondary: #183057;
  --secondary-foreground: #f8fafc;
  --destructive: #c2413b;
  --destructive-foreground: #ffffff;
  --surface: color-mix(in srgb, var(--body) 92%, var(--body-foreground));
  --surface-foreground: var(--body-foreground);
  --surface-raised: color-mix(in srgb, var(--surface) 78%, var(--body-foreground));
  --surface-soft: color-mix(in srgb, var(--surface) 48%, var(--body-foreground));
  --muted: color-mix(in srgb, var(--body) 82%, var(--body-foreground));
  --muted-foreground: color-mix(in srgb, var(--body-foreground) 62%, var(--body));
  --border: color-mix(in srgb, var(--body-foreground) 14%, transparent);
  --border-strong: color-mix(in srgb, var(--body-foreground) 22%, transparent);
  --input: var(--border);
  --ring: var(--primary);
  --success: #278452;
  --warning: #b47c16;
  --info: #306ba8;
  --brand-gradient: linear-gradient(135deg, var(--secondary), var(--primary));
  --shadow: 0 24px 70px -48px color-mix(in srgb, var(--body-foreground) 28%, transparent);
  --shadow-sm: 0 14px 36px -26px color-mix(in srgb, var(--body-foreground) 22%, transparent);
}