/* Auto-generated by token_css_generator.py — DO NOT EDIT MANUALLY */
/* Source: design/tokens/raw.json + semantic.json + persona/*.json */

/* ── Raw token layer ── */
:root {
  --raw-color-white: #FFFFFF;
  --raw-color-black: #0A0A0A;
  --raw-color-gray-050: #F9FAFB;
  --raw-color-gray-100: #F3F4F6;
  --raw-color-gray-200: #E5E7EB;
  --raw-color-gray-300: #D1D5DB;
  --raw-color-gray-400: #9CA3AF;
  --raw-color-gray-500: #6B7280;
  --raw-color-gray-600: #4B5563;
  --raw-color-gray-700: #374151;
  --raw-color-gray-800: #1F2937;
  --raw-color-gray-900: #111827;
  --raw-color-accent-050: #EFF6FF;
  --raw-color-accent-100: #DBEAFE;
  --raw-color-accent-200: #BFDBFE;
  --raw-color-accent-300: #93C5FD;
  --raw-color-accent-400: #60A5FA;
  --raw-color-accent-500: #3B82F6;
  --raw-color-accent-600: #2563EB;
  --raw-color-accent-700: #1D4ED8;
  --raw-color-accent-800: #1E40AF;
  --raw-color-accent-900: #1E3A8A;
  --raw-color-red-050: #FEF2F2;
  --raw-color-red-100: #FEE2E2;
  --raw-color-red-400: #F87171;
  --raw-color-red-500: #EF4444;
  --raw-color-red-600: #DC2626;
  --raw-color-red-700: #B91C1C;
  --raw-color-green-050: #F0FDF4;
  --raw-color-green-100: #DCFCE7;
  --raw-color-green-500: #22C55E;
  --raw-color-green-600: #16A34A;
  --raw-color-green-700: #15803D;
  --raw-color-yellow-050: #FEFCE8;
  --raw-color-yellow-100: #FEF9C3;
  --raw-color-yellow-400: #FACC15;
  --raw-color-yellow-500: #EAB308;
  --raw-color-yellow-700: #A16207;
  --raw-type-family-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  --raw-type-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'D2Coding', monospace;
  --raw-type-scale-xs-size: 11px;
  --raw-type-scale-xs-line-height: 16px;
  --raw-type-scale-sm-size: 12px;
  --raw-type-scale-sm-line-height: 18px;
  --raw-type-scale-md-size: 14px;
  --raw-type-scale-md-line-height: 20px;
  --raw-type-scale-lg-size: 16px;
  --raw-type-scale-lg-line-height: 24px;
  --raw-type-scale-xl-size: 18px;
  --raw-type-scale-xl-line-height: 28px;
  --raw-type-scale-2xl-size: 20px;
  --raw-type-scale-2xl-line-height: 28px;
  --raw-type-scale-3xl-size: 24px;
  --raw-type-scale-3xl-line-height: 32px;
  --raw-type-scale-4xl-size: 30px;
  --raw-type-scale-4xl-line-height: 36px;
  --raw-type-weight-regular: 400;
  --raw-type-weight-medium: 500;
  --raw-type-weight-semibold: 600;
  --raw-type-weight-bold: 700;
  --raw-space-0: 0px;
  --raw-space-1: 2px;
  --raw-space-2: 4px;
  --raw-space-3: 6px;
  --raw-space-4: 8px;
  --raw-space-5: 10px;
  --raw-space-6: 12px;
  --raw-space-8: 16px;
  --raw-space-10: 20px;
  --raw-space-12: 24px;
  --raw-space-16: 32px;
  --raw-space-20: 40px;
  --raw-space-24: 48px;
  --raw-space-32: 64px;
  --raw-space-40: 80px;
  --raw-space-48: 96px;
  --raw-radius-none: 0px;
  --raw-radius-sm: 2px;
  --raw-radius-md: 4px;
  --raw-radius-lg: 6px;
  --raw-radius-xl: 8px;
  --raw-radius-2xl: 12px;
  --raw-radius-full: 9999px;
  --raw-shadow-none: none;
  --raw-shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
  --raw-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
  --raw-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
  --raw-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
  --raw-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10);
  --raw-motion-duration-instant: 0ms;
  --raw-motion-duration-fast: 100ms;
  --raw-motion-duration-normal: 150ms;
  --raw-motion-duration-slow: 250ms;
  --raw-motion-duration-enter: 200ms;
  --raw-motion-duration-exit: 150ms;
  --raw-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --raw-motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --raw-motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --raw-motion-easing-linear: linear;
}

/* ── Semantic token layer ── */
:root {
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-active: #1E40AF;
  --color-primary-subtle: #EFF6FF;
  --color-primary-border: #93C5FD;
  --color-danger: #DC2626;
  --color-danger-hover: #B91C1C;
  --color-danger-subtle: #FEF2F2;
  --color-danger-border: #F87171;
  --color-success: #16A34A;
  --color-success-subtle: #F0FDF4;
  --color-warning: #EAB308;
  --color-warning-subtle: #FEFCE8;
  --color-warning-text: #A16207;
  --color-surface-1: #FFFFFF;
  --color-surface-2: #F9FAFB;
  --color-surface-3: #F3F4F6;
  --color-surface-overlay: rgba(17,24,39,0.50);
  --color-border: #E5E7EB;
  --color-border-strong: #D1D5DB;
  --color-border-input: #9CA3AF;
  --color-border-focus: #3B82F6;
  --color-text-1: #111827;
  --color-text-2: #374151;
  --color-text-3: #6B7280;
  --color-text-disabled: #9CA3AF;
  --color-text-inverse: #FFFFFF;
  --color-text-on-primary: #FFFFFF;
  --color-text-on-danger: #FFFFFF;
  --color-text-link: #2563EB;
  --color-text-link-hover: #1D4ED8;
  --color-status-ok: #16A34A;
  --color-status-degraded: #EAB308;
  --color-status-down: #DC2626;
  --font-family-body: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'D2Coding', monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-line-xs: 16px;
  --font-line-sm: 18px;
  --font-line-md: 20px;
  --font-line-lg: 24px;
  --font-line-xl: 28px;
  --font-weight-body: 400;
  --font-weight-label: 500;
  --font-weight-heading: 600;
  --font-weight-strong: 700;
  --space-inset-xs: 4px;
  --space-inset-sm: 8px;
  --space-inset-md: 16px;
  --space-inset-lg: 24px;
  --space-inset-xl: 32px;
  --space-gap-xs: 4px;
  --space-gap-sm: 8px;
  --space-gap-md: 16px;
  --space-gap-lg: 24px;
  --space-gap-xl: 32px;
  --space-gap-2xl: 48px;
  --space-stack-sm: 12px;
  --space-stack-md: 24px;
  --space-stack-lg: 40px;
  --space-stack-xl: 64px;
  --space-page-gutter: 48px;
  --space-sidebar-width: 240px;
  --space-sidebar-width-collapsed: 56px;
  --space-content-max: 1280px;
  --radius-control: 4px;
  --radius-card: 6px;
  --radius-modal: 8px;
  --radius-badge: 9999px;
  --radius-input: 4px;
  --shadow-card: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
  --shadow-dropdown: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
  --shadow-modal: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
  --shadow-focus-ring: 0 0 0 3px rgba(59,130,246,0.40);
  --motion-transition-control: {motion.duration.normal} {motion.easing.standard};
  --motion-transition-enter: {motion.duration.enter} {motion.easing.decelerate};
  --motion-transition-exit: {motion.duration.exit} {motion.easing.accelerate};
  --motion-transition-fast: {motion.duration.fast} {motion.easing.standard};
  --zindex-dropdown: 100;
  --zindex-sticky: 200;
  --zindex-modal-backdrop: 300;
  --zindex-modal: 400;
  --zindex-toast: 500;
}

/* ── Persona: ceo ── */
[data-persona="ceo"] {
  --space-inset-md: 20px;
  --space-inset-lg: 28px;
  --space-inset-xl: 36px;
  --space-gap-md: 16px;
  --space-gap-lg: 24px;
  --space-stack-md: 24px;
  --space-stack-lg: 36px;
  --space-page-gutter: 32px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-line-md: 24px;
  --font-line-lg: 28px;
  --color-border-input: #D1D5DB;
  --radius-card: 8px;
  --radius-modal: 12px;
  --shadow-card: 0 2px 8px 0 rgba(0,0,0,0.08), 0 1px 2px 0 rgba(0,0,0,0.06);
}

/* ── Persona: it ── */
[data-persona="it"] {
  --space-inset-md: 6px;
  --space-inset-lg: 10px;
  --space-inset-xl: 14px;
  --space-gap-md: 6px;
  --space-gap-lg: 10px;
  --space-stack-md: 10px;
  --space-stack-lg: 16px;
  --space-page-gutter: 16px;
  --font-size-md: 13px;
  --font-size-sm: 11px;
  --font-size-xs: 10px;
  --font-line-md: 18px;
  --font-line-sm: 16px;
  --font-family-body: 'JetBrains Mono', 'Fira Code', 'Consolas', 'D2Coding', monospace;
  --font-weight-body: 400;
  --radius-control: 2px;
  --radius-card: 2px;
  --radius-input: 2px;
  --color-surface-2: #F0F0F0;
  --color-surface-3: #E8E8E8;
}

/* ── Pico CSS v2 override — map --pico-* to our semantic tokens ── */
:root {
  /* Typography */
  --pico-font-family: var(--font-family-body);
  --pico-font-family-sans-serif: var(--font-family-body);
  --pico-font-family-monospace: var(--font-family-mono);
  --pico-font-size: 87.5%;
  --pico-line-height: 1.5;
  --pico-font-weight: var(--font-weight-body);

  /* Colors — surface & text */
  --pico-background-color: var(--color-surface-2);
  --pico-color: var(--color-text-1);
  --pico-muted-color: var(--color-text-3);
  --pico-muted-border-color: var(--color-border);

  /* Primary action color */
  --pico-primary: var(--color-primary);
  --pico-primary-background: var(--color-primary);
  --pico-primary-border: var(--color-primary);
  --pico-primary-hover: var(--color-primary-hover);
  --pico-primary-hover-background: var(--color-primary-hover);
  --pico-primary-hover-border: var(--color-primary-hover);
  --pico-primary-focus: var(--color-border-focus);
  --pico-primary-inverse: var(--color-text-on-primary);
  --pico-primary-underline: transparent;
  --pico-primary-hover-underline: transparent;

  /* Secondary (maps to our ghost/secondary tier) */
  --pico-secondary: var(--color-text-2);
  --pico-secondary-background: var(--color-surface-1);
  --pico-secondary-border: var(--color-border-strong);
  --pico-secondary-hover: var(--color-text-1);
  --pico-secondary-hover-background: var(--color-surface-2);
  --pico-secondary-hover-border: var(--color-border-strong);
  --pico-secondary-focus: var(--color-border-focus);
  --pico-secondary-inverse: var(--color-text-1);
  --pico-secondary-underline: transparent;
  --pico-secondary-hover-underline: transparent;

  /* Borders & radius */
  --pico-border-color: var(--color-border);
  --pico-border-radius: var(--radius-control);
  --pico-border-width: 1px;
  --pico-outline-width: 2px;

  /* Card */
  --pico-card-background-color: var(--color-surface-1);
  --pico-card-border-color: var(--color-border);
  --pico-card-box-shadow: var(--shadow-card);
  --pico-card-sectioning-background-color: var(--color-surface-2);

  /* Form elements */
  --pico-form-element-background-color: var(--color-surface-1);
  --pico-form-element-border-color: var(--color-border-input);
  --pico-form-element-color: var(--color-text-1);
  --pico-form-element-active-background-color: var(--color-surface-1);
  --pico-form-element-active-border-color: var(--color-border-focus);
  --pico-form-element-focus-color: var(--color-border-focus);
  --pico-form-element-placeholder-color: var(--color-text-3);
  --pico-form-element-invalid-border-color: var(--color-danger);
  --pico-form-element-invalid-active-border-color: var(--color-danger-hover);
  --pico-form-element-invalid-focus-color: var(--color-danger);
  --pico-form-element-valid-border-color: var(--color-success);
  --pico-form-element-valid-active-border-color: var(--color-success);
  --pico-form-element-valid-focus-color: var(--color-success);
  --pico-form-label-font-weight: var(--font-weight-label);

  /* Table */
  --pico-table-border-color: var(--color-border);
  --pico-table-row-stripped-background-color: var(--color-surface-2);

  /* Spacing — keep compact to match our density tokens */
  --pico-spacing: 1rem;
  --pico-block-spacing-vertical: 0.75rem;
  --pico-block-spacing-horizontal: 1rem;
  --pico-form-element-spacing-vertical: 4px;
  --pico-form-element-spacing-horizontal: 12px;

  /* Box shadow */
  --pico-box-shadow: var(--shadow-card);
  --pico-button-box-shadow: var(--shadow-xs);
  --pico-button-hover-box-shadow: var(--shadow-sm);

  /* Transition */
  --pico-transition: var(--motion-transition-control);

  /* Nav */
  --pico-nav-element-spacing-horizontal: var(--space-inset-md);
  --pico-nav-element-spacing-vertical: var(--space-inset-sm);
  --pico-nav-link-spacing-horizontal: var(--space-inset-sm);
  --pico-nav-link-spacing-vertical: var(--space-inset-xs);

  /* Modal overlay */
  --pico-modal-overlay-background-color: var(--color-surface-overlay);

  /* Code */
  --pico-code-background-color: var(--color-surface-3);
  --pico-code-color: var(--color-text-2);
}

/* ── Pico regression fix — button width ── */
button.btn {
  width: auto;
}

/* Login card: restore full-width submit inside .login-card */
.login-card button.btn[type=submit] {
  width: 100%;
}
