﻿/* OPEN DOORWAY - Design Tokens */
:root {
  --brand-primary: #5522DB;
  --brand-primary-hover: #4317B0;
  --brand-primary-light: #F0EBFD;
  --brand-primary-10: rgba(85, 34, 219, 0.10);
  --brand-primary-20: rgba(85, 34, 219, 0.20);
  --brand-gradient: linear-gradient(135deg, #5522DB 0%, #7443E8 100%);
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
  --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem;
  --text-6xl: 3.75rem; --text-7xl: 4.5rem; --text-8xl: 6rem;
  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
  --radius-xl: 1rem; --radius-2xl: 1.25rem; --radius-full: 9999px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.10);
  --shadow-xl: 0 20px 50px rgba(0,0,0,0.14);
  --shadow-brand: 0 4px 20px rgba(85,34,219,0.25);
  --shadow-brand-lg: 0 8px 40px rgba(85,34,219,0.35);
  --surface-base: #ffffff; --surface-raised: #fafafa;
  --surface-overlay: #f5f5f5; --surface-sunken: #f0f0f0;
  --text-on-bg: #0a0a0a; --text-primary: #171717;
  --text-secondary: #525252; --text-tertiary: #737373;
  --text-muted: #a3a3a3; --text-on-brand: #ffffff;
  --border-subtle: #f0f0f0; --border-default: #e5e5e5;
  --border-strong: #d4d4d4; --border-focus: #5522DB;
  /* Purple used as ink (links, labels, borders) resolves to the brand purple
     in light mode; dark re-points just this one to the lifted tone below. */
  --brand-primary-ink: var(--brand-primary);
  --color-success: #16a34a; --color-success-bg: #f0fdf4;
  --color-amber: #d97706; --color-amber-bg: #fffbeb;
  --color-error: #dc2626; --color-error-bg: #fef2f2;
  --sidebar-width: 240px; --sidebar-collapsed: 64px;
  --topbar-height: 56px; --content-max-width: 1280px;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 350ms;
  --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300;
  --z-modal: 400; --z-toast: 500;
}html.dark {
  /* Fill: the true brand purple, byte-identical to light mode, so primary
     buttons and chips never change hue between themes. */
  --brand-primary: #5522DB;
  --brand-primary-hover: #4317B0;
  /* Ink: same hue lifted one step - #5522DB is 2.3:1 on #0a0a0a. */
  --brand-primary-ink: #9C7BF0;
  --brand-primary-light: rgba(167, 139, 250, 0.10);
  --brand-primary-10: rgba(167, 139, 250, 0.10);
  --brand-primary-20: rgba(167, 139, 250, 0.20);
  --brand-gradient: linear-gradient(135deg, #5522DB 0%, #7443E8 100%);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-xl: 0 20px 50px rgba(0,0,0,0.55);
  --shadow-brand: 0 4px 20px rgba(0,0,0,0.4);
  --surface-base: #000000; --surface-raised: #0e0e0e;
  --surface-overlay: #141414; --surface-sunken: #000000;
  --text-on-bg: #fafafa; --text-primary: #fafafa;
  --text-secondary: #a3a3a3; --text-tertiary: #737373;
  --text-muted: #8f8f9d; --text-on-brand: #ffffff;
  --border-subtle: #161616; --border-default: #262626;
  --border-strong: #333333; --border-focus: #9C7BF0;
  --color-success: #22c55e; --color-success-bg: rgba(34,197,94,0.10);
  --color-amber: #f59e0b; --color-amber-bg: rgba(245,158,11,0.10);
  --color-error: #f43f5e; --color-error-bg: rgba(244,63,94,0.10);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { font-size: var(--text-base); line-height: 1.5; color: var(--text-primary); background: var(--surface-base); }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
::selection { background: var(--brand-primary-20); color: var(--text-primary); }