@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap";/*!
 * Cogniyon Design System — CSS Reset
 * File: reset.css
 * --------------------------------------------------
 * Purpose
 *   Provides a clean, predictable baseline across browsers by:
 *     - Normalizing browser inconsistencies
 *     - Removing opinionated defaults
 *     - Preserving accessibility and usability
 *
 * Philosophy
 *   - Light reset, not destructive
 *   - Keep semantics intact
 *   - Let typography.css define text appearance
 *
 * Influences
 *   - modern-normalize
 *   - Andy Bell’s modern CSS reset
 *   - Tailwind / Radix baseline practices
 *
 * IMPORTANT
 *   This file should be loaded BEFORE:
 *     - tokens.css
 *     - typography.css
 *     - components.css
 */*,*:before,*:after{box-sizing:border-box}html,body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}body{min-height:100vh;text-rendering:optimizeSpeed}ul,ol{padding:0;margin:0;list-style:none}a{background-color:transparent;text-decoration:none;color:inherit}img,picture,video,canvas,svg{display:block;max-width:100%}img{height:auto}:where(button,input,select,textarea){font:inherit;color:inherit}:where(button){cursor:pointer}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{resize:vertical}:where(button,input,select,textarea){-webkit-tap-highlight-color:transparent}:where(button:disabled,input:disabled,select:disabled,textarea:disabled){cursor:not-allowed}table{border-collapse:collapse;border-spacing:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:inherit;font-size:1em}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}/*!
* Cogniyon Design System — Palette
* --------------------------------
* Purpose:
*   Raw, theme-agnostic color ramps (50..950 etc). This file defines WHAT colors exist.
*
* Rules:
*   - ✅ Only raw colors here (no semantic meaning like "primary", "surface", "text").
*   - ✅ Names should be stable and scale-based (e.g., --gray-100, --sky-600).
*   - ❌ Do not reference other tokens (no var(--cogni-...)).
*   - ❌ Do not add component tokens here.
*
* Used by:
*   themes.css maps these ramps into semantic tokens for light/dark modes.
*
* Example:
*   --sky-600: #0284c7;   (a raw ramp value)
*/:root{--white: hsl(0 0% 100%);--black: hsl(0 0% 0%);--gray-50: #f9f9f9;--gray-100: #f4f4f5;--gray-200: #e4e4e7;--gray-300: #d4d4d8;--gray-400: #a1a1aa;--gray-500: #71717a;--gray-600: #52525b;--gray-700: #3f3f46;--gray-800: #27272a;--gray-900: #18181b;--gray-950: #131316;--red-50: #fef2f2;--red-100: #fee2e2;--red-200: #fecaca;--red-300: #fca5a5;--red-400: #f87171;--red-500: #ef4444;--red-600: #dc2626;--red-700: #b91c1c;--red-800: #991b1b;--red-900: #7f1d1d;--red-950: #501414;--orange-50: #fff7ed;--orange-100: #ffedd5;--orange-200: #fed7aa;--orange-300: #fdba74;--orange-400: #fb923c;--orange-500: #f97316;--orange-600: #ea580c;--orange-700: #c2410c;--orange-800: #9a3412;--orange-900: #7c2d12;--orange-950: #52200f;--amber-50: #fffbeb;--amber-100: #fef3c7;--amber-200: #fde68a;--amber-300: #fcd34d;--amber-400: #fbbf24;--amber-500: #f59e0b;--amber-600: #d97706;--amber-700: #b45309;--amber-800: #92400e;--amber-900: #78350f;--amber-950: #4a230b;--yellow-50: #fefce8;--yellow-100: #fef9c3;--yellow-200: #fef08a;--yellow-300: #fde047;--yellow-400: #facc15;--yellow-500: #eab308;--yellow-600: #ca8a04;--yellow-700: #a16207;--yellow-800: #854d0e;--yellow-900: #713f12;--yellow-950: #3c260b;--lime-50: #f7fee7;--lime-100: #ecfccb;--lime-200: #d9f99d;--lime-300: #bef264;--lime-400: #a3e635;--lime-500: #84cc16;--lime-600: #65a30d;--lime-700: #4d7c0f;--lime-800: #3f6212;--lime-900: #365314;--lime-950: #26390e;--green-50: #f0fdf4;--green-100: #dcfce7;--green-200: #bbf7d0;--green-300: #86efac;--green-400: #4ade80;--green-500: #22c55e;--green-600: #16a34a;--green-700: #15803d;--green-800: #166534;--green-900: #14532d;--green-950: #0c311b;--emerald-50: #ecfdf5;--emerald-100: #d1fae5;--emerald-200: #a7f3d0;--emerald-300: #6ee7b7;--emerald-400: #34d399;--emerald-500: #10b981;--emerald-600: #059669;--emerald-700: #047857;--emerald-800: #065f46;--emerald-900: #064e3b;--emerald-950: #032d22;--teal-50: #f0fdfa;--teal-100: #ccfbf1;--teal-200: #99f6e4;--teal-300: #5eead4;--teal-400: #2dd4bf;--teal-500: #14b8a6;--teal-600: #0d9488;--teal-700: #0f766e;--teal-800: #115e59;--teal-900: #134e4a;--teal-950: #0c2e2c;--cyan-50: #ecfeff;--cyan-100: #cffafe;--cyan-200: #a5f3fc;--cyan-300: #67e8f9;--cyan-400: #22d3ee;--cyan-500: #06b6d4;--cyan-600: #0891b2;--cyan-700: #0e7490;--cyan-800: #155e75;--cyan-900: #164e63;--cyan-950: #103442;--sky-50: #f0f9ff;--sky-100: #e0f2fe;--sky-200: #bae6fd;--sky-300: #7dd3fc;--sky-400: #38bdf8;--sky-500: #0ea5e9;--sky-600: #0284c7;--sky-700: #0369a1;--sky-800: #075985;--sky-900: #0c4a6e;--sky-950: #0b3249;--blue-50: #eff6ff;--blue-100: #dbeafe;--blue-200: #bfdbfe;--blue-300: #93c5fd;--blue-400: #60a5fa;--blue-500: #3b82f6;--blue-600: #2563eb;--blue-700: #1d4ed8;--blue-800: #1e40af;--blue-900: #1e3a8a;--blue-950: #152149;--indigo-50: #eef2ff;--indigo-100: #e0e7ff;--indigo-200: #c7d2fe;--indigo-300: #a5b4fc;--indigo-400: #818cf8;--indigo-500: #6366f1;--indigo-600: #4f46e5;--indigo-700: #4338ca;--indigo-800: #3730a3;--indigo-900: #312e81;--indigo-950: #242154;--violet-50: #f5f3ff;--violet-100: #ede9fe;--violet-200: #ddd6fe;--violet-300: #c4b5fd;--violet-400: #a78bfa;--violet-500: #8b5cf6;--violet-600: #7c3aed;--violet-700: #6d28d9;--violet-800: #5b21b6;--violet-900: #4c1d95;--violet-950: #311558;--purple-50: #faf5ff;--purple-100: #f3e8ff;--purple-200: #e9d5ff;--purple-300: #d8b4fe;--purple-400: #c084fc;--purple-500: #a855f7;--purple-600: #9333ea;--purple-700: #7e22ce;--purple-800: #6b21a8;--purple-900: #581c87;--purple-950: #2f1143;--fuchsia-50: #fdf4ff;--fuchsia-100: #fae8ff;--fuchsia-200: #f5d0fe;--fuchsia-300: #f0abfc;--fuchsia-400: #e879f9;--fuchsia-500: #d946ef;--fuchsia-600: #c026d3;--fuchsia-700: #a21caf;--fuchsia-800: #86198f;--fuchsia-900: #701a75;--fuchsia-950: #38103a;--pink-50: #fdf2f8;--pink-100: #fce7f3;--pink-200: #fbcfe8;--pink-300: #f9a8d4;--pink-400: #f472b6;--pink-500: #ec4899;--pink-600: #db2777;--pink-700: #be185d;--pink-800: #9d174d;--pink-900: #831843;--pink-950: #430e23;--rose-50: #fff1f2;--rose-100: #ffe4e6;--rose-200: #fecdd3;--rose-300: #fda4af;--rose-400: #fb7185;--rose-500: #f43f5e;--rose-600: #e11d48;--rose-700: #be123c;--rose-800: #9f1239;--rose-900: #881337;--rose-950: #4a0d20}/*!
* Cogniyon Design System — Themes (Light/Dark)
* -------------------------------------------
* Purpose:
*   Semantic token mapping for each theme (light/dark). This is where design decisions live.
*   Defines meaning like:
*     --cogni-bg, --cogni-surface-1, --cogni-text-1, --cogni-primary, --cogni-border, etc.
*
* Rules:
*   - ✅ Only semantic tokens here.
*   - ✅ Semantic tokens MUST reference palette.css ramps and/or tokens.css primitives.
*   - ✅ Define themes as classes (e.g., .cogni-theme-light, .cogni-theme-dark).
*   - ❌ Do not define raw ramps here (no --gray-100 etc).
*   - ❌ Do not define component-specific tokens here.
*
* How to apply:
*   Add one theme class at the root container:
*     <html class="cogni-theme-light"> ... or <body class="cogni-theme-dark">
*
* Future:
*   Additional themes can be added (e.g., .cogni-theme-solarized-light).
*//*!
* Cogniyon Design System — Foundation Tokens
* -----------------------------------------
* Purpose:
*   Global primitives for layout + UI behavior (spacing, radius, shadows, typography base, motion, z-index).
*   This file defines HOW the system behaves (not the theme colors).
*
* Rules:
*   - ✅ Use stable primitives (space, radius, shadows, font stacks, durations, z-index).
*   - ✅ Prefer a small set of primitives; expand only when a real need appears.
*   - ❌ Do not define theme semantics here (no --cogni-bg, --cogni-text, --cogni-primary).
*   - ❌ Avoid hard-coded brand colors in this file.
*
* Used by:
*   themes.css for semantic mapping, and component CSS for consistent sizing/motion.
*
* Notes:
*   Keep names generic and reusable (e.g., --cogni-space-16, --cogni-radius-md).
*/:root{--cogni-radius-sm: .1875rem;--cogni-radius-md: .25rem;--cogni-radius-lg: .5rem;--cogni-radius-xl: 1rem;--cogni-radius-pill: 9999px;--cogni-space-4: .25rem;--cogni-space-8: .5rem;--cogni-space-12: .75rem;--cogni-space-16: 1rem;--cogni-space-24: 1.5rem;--cogni-space-32: 2rem;--cogni-space-48: 3rem;--cogni-space-72: 4.5rem;--cogni-shadow-sm: 0 1px 2px rgb(0 0 0 / 8%);--cogni-shadow-md: 0 2px 4px rgb(0 0 0 / 12%);--cogni-shadow-lg: 0 4px 16px rgb(0 0 0 / 16%);--cogni-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--cogni-font-mono: SFMono-Regular, Consolas, Menlo, monospace;--cogni-text-sm: .875rem;--cogni-text-md: 1rem;--cogni-text-lg: 1.25rem;--cogni-text-xl: 1.5rem;--cogni-text-2xl: 2.25rem;--cogni-fw-normal: 400;--cogni-fw-semibold: 500;--cogni-fw-bold: 700;--cogni-lh-tight: 1.3;--cogni-lh-normal: 1.6;--cogni-dur-fast: .15s;--cogni-dur-base: .25s;--cogni-dur-slow: .5s;--cogni-z-dropdown: 900;--cogni-z-dialog: 1000}/*!
* Cogniyon Theme Family — CLASSIC
*/.cogni-theme-light{color-scheme:light;--cogni-bg: hsl(210 20% 98%);--cogni-surface-1: hsl(0 0% 100%);--cogni-surface-2: hsl(210 22% 95%);--cogni-text-1: hsl(222 35% 14%);--cogni-text-2: hsl(222 14% 36%);--cogni-border: hsl(214 18% 85%);--cogni-primary: hsl(221 83% 53%);--cogni-primary-hover: hsl(221 83% 46%);--cogni-success: hsl(142 70% 34%);--cogni-warning: hsl(38 92% 45%);--cogni-danger: hsl(0 72% 48%);--cogni-ring: hsl(221 83% 53% / 35%);--cogni-overlay: hsl(0 0% 0% / 40%);--cogni-surface: var(--cogni-surface-1);--cogni-surface-muted: var(--cogni-surface-2);--cogni-text: var(--cogni-text-1);--cogni-text-muted: var(--cogni-text-2);--cogni-color-primary-50: hsl(214 100% 97%);--cogni-color-primary-100: hsl(214 95% 93%);--cogni-color-primary-200: hsl(213 96% 87%);--cogni-color-primary-300: hsl(212 96% 78%);--cogni-color-primary-400: hsl(221 90% 66%);--cogni-color-primary-500: hsl(221 83% 53%);--cogni-color-primary-600: hsl(221 83% 46%);--cogni-color-primary-700: hsl(222 78% 39%);--cogni-color-primary-800: hsl(223 72% 32%);--cogni-color-primary-900: hsl(224 66% 24%);--cogni-link: var(--cogni-color-primary-700);--cogni-link-hover: var(--cogni-color-primary-800);--cogni-focus-ring: 3px solid var(--cogni-color-primary-600);--cogni-focus-ring-offset: 1px;--cogni-focus-ring-color: var(--cogni-color-primary-600);--cogni-white: #ffffff}.cogni-theme-dark{color-scheme:dark;--cogni-bg: hsl(222 35% 8%);--cogni-surface-1: hsl(222 32% 12%);--cogni-surface-2: hsl(222 28% 16%);--cogni-text-1: hsl(210 20% 96%);--cogni-text-2: hsl(215 16% 72%);--cogni-border: hsl(222 18% 26%);--cogni-primary: hsl(214 95% 70%);--cogni-primary-hover: hsl(214 95% 76%);--cogni-success: hsl(142 55% 52%);--cogni-warning: hsl(38 92% 60%);--cogni-danger: hsl(0 78% 64%);--cogni-ring: hsl(214 95% 70% / 45%);--cogni-overlay: hsl(0 0% 0% / 55%);--cogni-surface: var(--cogni-surface-1);--cogni-surface-muted: var(--cogni-surface-2);--cogni-text: var(--cogni-text-1);--cogni-text-muted: var(--cogni-text-2);--cogni-color-primary-50: hsl(214 100% 97%);--cogni-color-primary-100: hsl(214 95% 93%);--cogni-color-primary-200: hsl(213 96% 87%);--cogni-color-primary-300: hsl(212 96% 78%);--cogni-color-primary-400: hsl(214 95% 70%);--cogni-color-primary-500: hsl(214 95% 70%);--cogni-color-primary-600: hsl(214 95% 76%);--cogni-color-primary-700: hsl(213 96% 84%);--cogni-color-primary-800: hsl(214 95% 90%);--cogni-color-primary-900: hsl(210 20% 96%);--cogni-link: var(--cogni-color-primary-600);--cogni-link-hover: var(--cogni-color-primary-700);--cogni-focus-ring: 3px solid var(--cogni-color-primary-500);--cogni-focus-ring-offset: 1px;--cogni-focus-ring-color: var(--cogni-color-primary-500);--cogni-white: #ffffff}/*!
* Cogniyon Design System — Component Tokens
* File: components.tokens.css
* --------------------------------------------------
* Purpose
*   Defines component-level *semantic* tokens for common UI primitives:
*   buttons, inputs/textboxes, selects, textareas, checkboxes/radios/switches,
*   cards/panels, and overlays.
*
* How to use
*   - Components should consume ONLY these tokens (and global foundation tokens),
*     not hard-coded colors/sizes.
*   - Themes (themes.*.css) are responsible for providing the base semantic colors:
*       --cogni-surface, --cogni-surface-muted, --cogni-text, --cogni-text-muted,
*       --cogni-border, --cogni-focus-ring-color, --cogni-color-primary-*
*
* Theme compatibility
*   Works with .cogni-theme-light / .cogni-theme-dark / other themes, because
*   it derives from semantic tokens and palette ramps.
*
* Notes
*   - This file does NOT style elements. It only defines tokens.
*   - Put actual CSS rules in component styles (e.g., button.css, input.css),
*     using these tokens.
*/:root{--cogni-component-transition: var(--cogni-transition-fast, .15s);--cogni-component-focus-ring: var(--cogni-focus-ring, 3px solid #0284c7);--cogni-component-focus-ring-offset: var(--cogni-focus-ring-offset, 1px);--cogni-disabled-opacity: .55;--cogni-disabled-cursor: not-allowed;--cogni-radius-sm: var(--cogni-border-radius-small, .1875rem);--cogni-radius-md: var(--cogni-border-radius-medium, .25rem);--cogni-radius-lg: var(--cogni-border-radius-large, .5rem);--cogni-radius-xl: var(--cogni-border-radius-x-large, 1rem);--cogni-radius-pill: var(--cogni-border-radius-pill, 9999px);--cogni-elevation-1: var(--cogni-shadow-x-small, 0 1px 2px rgb(0 0 0 / 6%));--cogni-elevation-2: var(--cogni-shadow-small, 0 1px 2px rgb(0 0 0 / 12%));--cogni-elevation-3: var(--cogni-shadow-medium, 0 2px 4px rgb(0 0 0 / 12%));--cogni-elevation-4: var(--cogni-shadow-large, 0 2px 8px rgb(0 0 0 / 12%));--cogni-elevation-5: var(--cogni-shadow-x-large, 0 4px 16px rgb(0 0 0 / 12%));--cogni-pad-xs: var(--cogni-spacing-x-small, .5rem);--cogni-pad-sm: var(--cogni-spacing-small, .75rem);--cogni-pad-md: var(--cogni-spacing-medium, 1rem);--cogni-pad-lg: var(--cogni-spacing-large, 1.25rem)}:root{--cogni-button-height-sm: 2rem;--cogni-button-height-md: 2.5rem;--cogni-button-height-lg: 3rem;--cogni-button-padding-x-sm: .75rem;--cogni-button-padding-x-md: 1rem;--cogni-button-padding-x-lg: 1.25rem;--cogni-button-padding-y-sm: .375rem;--cogni-button-padding-y-md: .5rem;--cogni-button-padding-y-lg: .625rem;--cogni-button-radius: var(--cogni-radius-md);--cogni-button-font-family: var(--cogni-font-ui, var(--cogni-font-sans));--cogni-button-font-weight: var(--cogni-font-weight-semibold, 600);--cogni-button-font-size-sm: var(--cogni-button-font-size-small, .75rem);--cogni-button-font-size-md: var(--cogni-button-font-size-medium, .875rem);--cogni-button-font-size-lg: var(--cogni-button-font-size-large, 1rem);--cogni-button-border-width: 1px;--cogni-button-transition: var(--cogni-component-transition);--cogni-button-bg: var(--cogni-surface, #fff);--cogni-button-fg: var(--cogni-text, #0b1220);--cogni-button-border: var(--cogni-border, #e2e8f0);--cogni-button-bg-hover: var(--cogni-surface-muted, #f4f4f5);--cogni-button-fg-hover: var(--cogni-button-fg);--cogni-button-border-hover: color-mix(in srgb, var(--cogni-border, #e2e8f0) 70%, var(--cogni-text, #0b1220));--cogni-button-bg-active: color-mix(in srgb, var(--cogni-surface-muted, #f4f4f5) 80%, var(--cogni-border, #e2e8f0));--cogni-button-border-active: var(--cogni-button-border-hover);--cogni-button-primary-bg: var(--cogni-color-primary-600, #0284c7);--cogni-button-primary-fg: var(--cogni-white, #fff);--cogni-button-primary-border: color-mix(in srgb, var(--cogni-button-primary-bg) 85%, black);--cogni-button-primary-bg-hover: var(--cogni-color-primary-700, #0369a1);--cogni-button-primary-border-hover: color-mix(in srgb, var(--cogni-button-primary-bg-hover) 85%, black);--cogni-button-primary-bg-active: var(--cogni-color-primary-800, #075985);--cogni-button-primary-border-active: color-mix(in srgb, var(--cogni-button-primary-bg-active) 85%, black);--cogni-button-secondary-bg: color-mix(in srgb, var(--cogni-color-primary-100, #e0f2fe) 70%, var(--cogni-surface, #fff));--cogni-button-secondary-fg: var(--cogni-color-primary-800, #075985);--cogni-button-secondary-border: color-mix(in srgb, var(--cogni-color-primary-200, #bae6fd) 70%, var(--cogni-border, #e2e8f0));--cogni-button-secondary-bg-hover: color-mix(in srgb, var(--cogni-color-primary-200, #bae6fd) 70%, var(--cogni-surface, #fff));--cogni-button-secondary-border-hover: color-mix(in srgb, var(--cogni-color-primary-300, #7dd3fc) 70%, var(--cogni-border, #e2e8f0));--cogni-button-secondary-bg-active: color-mix(in srgb, var(--cogni-color-primary-300, #7dd3fc) 70%, var(--cogni-surface, #fff));--cogni-button-secondary-border-active: color-mix(in srgb, var(--cogni-color-primary-400, #38bdf8) 70%, var(--cogni-border, #e2e8f0));--cogni-button-ghost-bg: transparent;--cogni-button-ghost-fg: var(--cogni-text, #0b1220);--cogni-button-ghost-border: transparent;--cogni-button-ghost-bg-hover: color-mix(in srgb, var(--cogni-surface-muted, #f4f4f5) 75%, transparent);--cogni-button-ghost-bg-active: color-mix(in srgb, var(--cogni-border, #e2e8f0) 55%, transparent);--cogni-button-danger-bg: var(--cogni-color-red-600, #dc2626);--cogni-button-danger-fg: var(--cogni-white, #fff);--cogni-button-danger-border: color-mix(in srgb, var(--cogni-button-danger-bg) 85%, black);--cogni-button-danger-bg-hover: var(--cogni-color-red-700, #b91c1c);--cogni-button-danger-bg-active: var(--cogni-color-red-800, #991b1b);--cogni-button-icon-gap: .5rem;--cogni-button-spinner-size: 1em;--cogni-button-disabled-bg: var(--cogni-surface-muted, #f4f4f5);--cogni-button-disabled-fg: var(--cogni-text-muted, #64748b);--cogni-button-disabled-border: var(--cogni-border, #e2e8f0)}:root{--cogni-button-tertiary-bg: transparent;--cogni-button-tertiary-fg: var(--cogni-text, #0b1220);--cogni-button-tertiary-border: transparent;--cogni-button-tertiary-bg-hover: color-mix(in srgb, var(--cogni-surface-muted, #f4f4f5) 75%, transparent);--cogni-button-tertiary-bg-active: color-mix(in srgb, var(--cogni-border, #e2e8f0) 55%, transparent);--cogni-button-quaternary-bg: transparent;--cogni-button-quaternary-fg: var(--cogni-text-muted, #64748b);--cogni-button-quaternary-border: transparent;--cogni-button-quaternary-bg-hover: color-mix(in srgb, var(--cogni-surface-muted, #f4f4f5) 65%, transparent);--cogni-button-quaternary-bg-active: color-mix(in srgb, var(--cogni-border, #e2e8f0) 45%, transparent);--cogni-button-tonal-bg: color-mix(in srgb, var(--cogni-color-primary-100, #e0f2fe) 70%, var(--cogni-surface, #fff));--cogni-button-tonal-fg: var(--cogni-color-primary-800, #075985);--cogni-button-tonal-border: color-mix(in srgb, var(--cogni-color-primary-200, #bae6fd) 70%, var(--cogni-border, #e2e8f0));--cogni-button-tonal-bg-hover: color-mix(in srgb, var(--cogni-color-primary-200, #bae6fd) 70%, var(--cogni-surface, #fff));--cogni-button-tonal-bg-active: color-mix(in srgb, var(--cogni-color-primary-300, #7dd3fc) 70%, var(--cogni-surface, #fff));--cogni-button-success-bg: var(--cogni-color-emerald-600, #059669);--cogni-button-success-fg: var(--cogni-white, #fff);--cogni-button-success-border: color-mix(in srgb, var(--cogni-button-success-bg) 85%, black);--cogni-button-success-bg-hover: var(--cogni-color-emerald-700, #047857);--cogni-button-success-bg-active: var(--cogni-color-emerald-800, #065f46);--cogni-button-warning-bg: var(--cogni-color-amber-600, #d97706);--cogni-button-warning-fg: var(--cogni-white, #fff);--cogni-button-warning-border: color-mix(in srgb, var(--cogni-button-warning-bg) 85%, black);--cogni-button-warning-bg-hover: var(--cogni-color-amber-700, #b45309);--cogni-button-warning-bg-active: var(--cogni-color-amber-800, #92400e);--cogni-button-shadow-elevated: var(--cogni-elevation-4);--cogni-button-shadow-elevated-hover: var(--cogni-elevation-5);--cogni-button-fab-size: 3.25rem;--cogni-button-icon-size: 1.125rem}:root{--cogni-field-height-sm: var(--cogni-input-height-small, 1.875rem);--cogni-field-height-md: var(--cogni-input-height-medium, 2.5rem);--cogni-field-height-lg: var(--cogni-input-height-large, 3.125rem);--cogni-field-radius: var(--cogni-input-border-radius-medium, var(--cogni-radius-md));--cogni-field-border-width: var(--cogni-input-border-width, 1px);--cogni-field-font-family: var(--cogni-font-ui, var(--cogni-font-sans));--cogni-field-font-weight: var(--cogni-input-font-weight, 400);--cogni-field-letter-spacing: var(--cogni-input-letter-spacing, normal);--cogni-field-font-size-sm: var(--cogni-input-font-size-small, .875rem);--cogni-field-font-size-md: var(--cogni-input-font-size-medium, 1rem);--cogni-field-font-size-lg: var(--cogni-input-font-size-large, 1.25rem);--cogni-field-padding-x-sm: .75rem;--cogni-field-padding-x-md: .875rem;--cogni-field-padding-x-lg: 1rem;--cogni-field-padding-y-sm: .375rem;--cogni-field-padding-y-md: .5rem;--cogni-field-padding-y-lg: .625rem;--cogni-field-bg: var(--cogni-input-background-color, var(--cogni-surface, #fff));--cogni-field-fg: var(--cogni-input-color, var(--cogni-text, #0b1220));--cogni-field-border: var(--cogni-input-border-color, var(--cogni-border, #e2e8f0));--cogni-field-bg-hover: var(--cogni-input-background-color-hover, var(--cogni-field-bg));--cogni-field-border-hover: var( --cogni-input-border-color-hover, color-mix(in srgb, var(--cogni-border, #e2e8f0) 70%, var(--cogni-text, #0b1220)) );--cogni-field-bg-focus: var(--cogni-input-background-color-focus, var(--cogni-field-bg));--cogni-field-border-focus: var( --cogni-input-border-color-focus, var(--cogni-focus-ring-color, var(--cogni-color-primary-600, #0284c7)) );--cogni-field-placeholder: var(--cogni-input-placeholder-color, var(--cogni-text-muted, #64748b));--cogni-field-icon: var(--cogni-input-icon-color, var(--cogni-text-muted, #64748b));--cogni-field-shadow: none;--cogni-field-shadow-focus: 0 0 0 4px color-mix( in srgb, var(--cogni-focus-ring-color, var(--cogni-color-primary-600, #0284c7)) 35%, transparent );--cogni-field-filled-bg: var(--cogni-input-filled-background-color, var(--cogni-surface-muted, #f4f4f5));--cogni-field-filled-fg: var(--cogni-input-filled-color, var(--cogni-text, #0b1220));--cogni-field-filled-border: transparent;--cogni-field-bg-disabled: var(--cogni-input-background-color-disabled, var(--cogni-surface-muted, #f4f4f5));--cogni-field-fg-disabled: var(--cogni-input-color-disabled, var(--cogni-text-muted, #64748b));--cogni-field-border-disabled: var(--cogni-input-border-color-disabled, var(--cogni-border, #e2e8f0));--cogni-field-placeholder-disabled: var(--cogni-input-placeholder-color-disabled, var(--cogni-text-muted, #64748b));--cogni-field-label-color: var(--cogni-input-label-color, inherit);--cogni-field-label-font-size-sm: var(--cogni-input-label-font-size-small, .875rem);--cogni-field-label-font-size-md: var(--cogni-input-label-font-size-medium, 1rem);--cogni-field-label-font-size-lg: var(--cogni-input-label-font-size-large, 1.25rem);--cogni-field-help-color: var(--cogni-input-help-text-color, var(--cogni-text-muted, #64748b));--cogni-field-help-font-size-sm: var(--cogni-input-help-text-font-size-small, .75rem);--cogni-field-help-font-size-md: var(--cogni-input-help-text-font-size-medium, .875rem);--cogni-field-help-font-size-lg: var(--cogni-input-help-text-font-size-large, 1rem);--cogni-field-success-border: var(--cogni-color-emerald-600, #059669);--cogni-field-success-ring: 0 0 0 4px color-mix(in srgb, var(--cogni-color-emerald-500, #10b981) 35%, transparent);--cogni-field-warning-border: var(--cogni-color-amber-600, #d97706);--cogni-field-warning-ring: 0 0 0 4px color-mix(in srgb, var(--cogni-color-amber-500, #f59e0b) 35%, transparent);--cogni-field-danger-border: var(--cogni-color-red-600, #dc2626);--cogni-field-danger-ring: 0 0 0 4px color-mix(in srgb, var(--cogni-color-red-500, #ef4444) 35%, transparent)}:root{--cogni-toggle-size-sm: var(--cogni-toggle-size-small, .875rem);--cogni-toggle-size-md: var(--cogni-toggle-size-medium, 1.125rem);--cogni-toggle-size-lg: var(--cogni-toggle-size-large, 1.375rem);--cogni-toggle-radius: var(--cogni-radius-sm);--cogni-toggle-border-width: 1px;--cogni-toggle-bg: var(--cogni-surface, #fff);--cogni-toggle-border: var(--cogni-border, #e2e8f0);--cogni-toggle-fg: var(--cogni-text, #0b1220);--cogni-toggle-bg-checked: var(--cogni-color-primary-600, #0284c7);--cogni-toggle-border-checked: color-mix(in srgb, var(--cogni-toggle-bg-checked) 85%, black);--cogni-toggle-fg-checked: var(--cogni-white, #fff);--cogni-toggle-bg-hover: var(--cogni-surface-muted, #f4f4f5);--cogni-toggle-border-hover: color-mix(in srgb, var(--cogni-border, #e2e8f0) 70%, var(--cogni-text, #0b1220));--cogni-toggle-bg-disabled: var(--cogni-surface-muted, #f4f4f5);--cogni-toggle-border-disabled: var(--cogni-border, #e2e8f0);--cogni-toggle-opacity-disabled: var(--cogni-disabled-opacity);--cogni-switch-track-width: 2.25rem;--cogni-switch-track-height: 1.25rem;--cogni-switch-thumb-size: 1rem;--cogni-switch-radius: var(--cogni-radius-pill);--cogni-switch-track-bg: var(--cogni-color-neutral-300, #d4d4d8);--cogni-switch-track-bg-checked: var(--cogni-color-primary-600, #0284c7);--cogni-switch-thumb-bg: var(--cogni-white, #fff);--cogni-switch-shadow: var(--cogni-elevation-2)}:root{--cogni-card-bg: var(--cogni-panel-background-color, var(--cogni-surface, #fff));--cogni-card-fg: var(--cogni-text, #0b1220);--cogni-card-border-color: var(--cogni-panel-border-color, var(--cogni-border, #e2e8f0));--cogni-card-border-width: var(--cogni-panel-border-width, 1px);--cogni-card-radius: var(--cogni-radius-lg);--cogni-card-padding-sm: 1rem;--cogni-card-padding-md: 1.25rem;--cogni-card-padding-lg: 1.75rem;--cogni-card-shadow: var(--cogni-elevation-2);--cogni-card-shadow-hover: var(--cogni-elevation-4);--cogni-card-header-gap: .75rem;--cogni-card-section-gap: 1rem;--cogni-card-border-hover: color-mix(in srgb, var(--cogni-card-border-color) 75%, var(--cogni-text, #0b1220));--cogni-card-bg-hover: var(--cogni-card-bg)}:root{--cogni-popover-bg: var(--cogni-surface, #fff);--cogni-popover-fg: var(--cogni-text, #0b1220);--cogni-popover-border: var(--cogni-border, #e2e8f0);--cogni-popover-radius: var(--cogni-radius-lg);--cogni-popover-shadow: var(--cogni-elevation-5);--cogni-popover-padding: .5rem;--cogni-overlay-bg: var(--cogni-overlay, hsl(0 0% 0% / 40%))}:root{--cogni-badge-radius: var(--cogni-radius-pill);--cogni-badge-font-size: var(--cogni-font-size-x-small, .75rem);--cogni-badge-font-weight: var(--cogni-font-weight-semibold, 600);--cogni-badge-padding-x: .5rem;--cogni-badge-padding-y: .15rem;--cogni-badge-bg: var(--cogni-surface-muted, #f4f4f5);--cogni-badge-fg: var(--cogni-text, #0b1220);--cogni-badge-border: var(--cogni-border, #e2e8f0);--cogni-badge-primary-bg: color-mix(in srgb, var(--cogni-color-primary-100, #e0f2fe) 70%, var(--cogni-surface, #fff));--cogni-badge-primary-fg: var(--cogni-color-primary-800, #075985);--cogni-badge-primary-border: color-mix(in srgb, var(--cogni-color-primary-200, #bae6fd) 70%, var(--cogni-border, #e2e8f0));--cogni-badge-danger-bg: color-mix(in srgb, var(--cogni-color-red-100, #fee2e2) 70%, var(--cogni-surface, #fff));--cogni-badge-danger-fg: var(--cogni-color-red-800, #991b1b);--cogni-badge-danger-border: color-mix(in srgb, var(--cogni-color-red-200, #fecaca) 70%, var(--cogni-border, #e2e8f0))}:root{--cogni-alert-radius: var(--cogni-radius-lg);--cogni-alert-padding: 1rem;--cogni-alert-border-width: 1px;--cogni-alert-bg: var(--cogni-surface, #fff);--cogni-alert-fg: var(--cogni-text, #0b1220);--cogni-alert-border: var(--cogni-border, #e2e8f0);--cogni-alert-shadow: var(--cogni-elevation-4);--cogni-alert-info-accent: var(--cogni-color-primary-600, #0284c7);--cogni-alert-success-accent: var(--cogni-color-emerald-600, #059669);--cogni-alert-warning-accent: var(--cogni-color-amber-600, #d97706);--cogni-alert-danger-accent: var(--cogni-color-red-600, #dc2626)}/*!
* Cogniyon Design System — Typography
* File: typography.css
* ------------------------------------------------------------
* Purpose
*   Defines the global baseline typography for the Cogniyon design system.
*   This file styles native HTML text elements to ensure consistent,
*   readable, and accessible typography across:
*     - Application UI
*     - Documentation & knowledge pages
*     - Blogs & marketing content
*
* Scope
*   - Base element styles only (h1–h6, p, a, small, strong, em, mark, abbr,
*     code, pre, blockquote, ul/ol/li, tables, hr).
*   - Establishes default rhythm: font sizes, line heights, spacing.
*   - Provides small, reusable helpers (e.g., .kicker, .typo-*, .font-*).
*
* Design Principles
*   - ✅ Use semantic tokens for colors (from themes.css).
*   - ✅ Use foundation tokens for font sizes, weights, spacing, and rhythm
*     (from tokens.css).
*   - ✅ Use font role tokens for font families (from fonts.*.css).
*   - ✅ Keep styles global, predictable, and minimal.
*   - ❌ Do not hardcode palette colors.
*   - ❌ Do not add page-specific or component-specific styling here.
*
* Dependencies
*   - tokens.css
*       Font sizes, font weights, line heights, spacing, radii, shadows.
*   - themes.css
*       Semantic color tokens such as:
*         --cogni-text
*         --cogni-text-muted
*         --cogni-surface
*         --cogni-surface-muted
*         --cogni-border
*         --cogni-focus-ring
*         --cogni-bg
*   - fonts.*.css
*       Only ONE font set should be loaded at a time.
*       Provides font roles:
*         --cogni-font-body
*         --cogni-font-heading
*         --cogni-font-ui
*         --cogni-font-mono
*
* Usage
*   Applied globally by default.
*   Theme is controlled at the root level:
*     <html class="cogni-theme-light">
*     <html class="cogni-theme-dark">
*
* Extension Tip
*   If typography needs to differ for specific content types
*   (e.g., marketing pages vs documentation), wrap content in a modifier:
*     .prose { ... }
*   rather than overriding global element defaults.
*
* Audience
*   This file is intentionally written for long-term maintainability.
*   Changes here affect *every page* — edit conservatively.
*/:root{--cogni-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;--cogni-font-heading: var(--cogni-font-body);--cogni-font-ui: var(--cogni-font-body);--cogni-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--cogni-type-body-size: var(--cogni-font-size-medium, 1rem);--cogni-type-body-line: var(--cogni-line-height-normal, 1.8);--cogni-type-heading-line: var(--cogni-line-height-dense, 1.4);--cogni-type-heading-tracking: var(--cogni-letter-spacing-dense, -.015em);--cogni-type-paragraph-gap: var(--cogni-spacing-medium, 1rem);--cogni-type-list-gap: var(--cogni-spacing-x-small, .5rem)}html{text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;font-size:100%;text-size-adjust:100%}body{font-family:var(--cogni-font-body);font-size:var(--cogni-type-body-size);line-height:var(--cogni-type-body-line);color:var(--cogni-text, var(--cogni-color-neutral-900, #111827));background:var(--cogni-bg, var(--cogni-surface, #ffffff));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:where(input,textarea)::placeholder{color:var(--cogni-text-muted);opacity:1}:where(a,button,input,select,textarea):focus-visible{outline:var(--cogni-focus-ring);outline-offset:var(--cogni-focus-ring-offset, 2px);border-radius:var(--cogni-border-radius-small, .1875rem)}button,input,select,textarea{font-family:var(--cogni-font-ui)}::selection{background:color-mix(in srgb,var(--cogni-color-primary-300, #7dd3fc) 40%,transparent)}h1,h2,h3,h4,h5,h6{margin:0 0 var(--cogni-spacing-small, .75rem);font-family:var(--cogni-font-heading);font-weight:var(--cogni-font-weight-bold, 700);line-height:var(--cogni-type-heading-line);letter-spacing:var(--cogni-type-heading-tracking);color:var(--cogni-text, var(--cogni-color-neutral-900, #111827));text-wrap:balance}h1{font-size:clamp(2.5rem,5vw + 1rem,3.8rem);line-height:1.1;margin-bottom:.5em}h2{font-size:clamp(2rem,4vw + 1rem,3.05rem);line-height:1.2;margin-bottom:.5em}h3{font-size:clamp(1.6rem,3vw + 1rem,2.44rem);line-height:1.25;margin-bottom:.5em}h4{font-size:clamp(1.28rem,2vw + 1rem,1.95rem);line-height:1.3}h5{font-size:clamp(1.1rem,1vw + 1rem,1.56rem);line-height:1.35}h6{font-size:clamp(1rem,.5vw + 1rem,1.25rem);font-weight:var(--cogni-font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.02em}.kicker{margin:0 0 var(--cogni-spacing-2x-small, .25rem);font-family:var(--cogni-font-ui);font-size:var(--cogni-font-size-small, .875rem);letter-spacing:var(--cogni-letter-spacing-loose, .075em);text-transform:uppercase;color:var(--cogni-text-muted, var(--cogni-color-neutral-500, #6b7280))}p{margin:0 0 var(--cogni-type-paragraph-gap);color:var(--cogni-text, var(--cogni-color-neutral-900, #111827))}small{font-size:var(--cogni-font-size-small, .875rem);color:var(--cogni-text-muted, var(--cogni-color-neutral-500, #6b7280))}strong{font-weight:var(--cogni-font-weight-bold, 700)}em{font-style:italic}mark{background:color-mix(in srgb,var(--cogni-color-warning-300, #fcd34d) 55%,transparent);padding:0 .15em;border-radius:var(--cogni-border-radius-small, .1875rem)}abbr[title]{text-decoration:underline dotted;text-underline-offset:.2em}a{color:var(--cogni-color-primary-700, var(--cogni-color-primary-600, #0284c7));text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}a:hover{color:var(--cogni-color-primary-800, #075985)}a:visited{color:color-mix(in srgb,var(--cogni-color-primary-700, #0369a1) 80%,var(--cogni-color-violet-600, #7c3aed))}a:focus-visible{outline:var(--cogni-focus-ring, 3px solid #0284c7);outline-offset:var(--cogni-focus-ring-offset, 1px);border-radius:var(--cogni-border-radius-small, .1875rem)}ul,ol{margin:0 0 var(--cogni-type-paragraph-gap);padding-left:1.25em}li{margin:0 0 var(--cogni-type-list-gap)}li>ul,li>ol{margin-top:var(--cogni-type-list-gap);margin-bottom:0}blockquote{margin:0 0 var(--cogni-type-paragraph-gap);padding:var(--cogni-spacing-medium, 1rem) var(--cogni-spacing-large, 1.25rem);border-left:3px solid var(--cogni-border, var(--cogni-color-neutral-200, #e5e7eb));background:var(--cogni-surface-muted, var(--cogni-color-neutral-100, #f3f4f6));color:var(--cogni-text, var(--cogni-color-neutral-900, #111827));border-radius:var(--cogni-border-radius-medium, .25rem)}blockquote p:last-child{margin-bottom:0}code,kbd,samp{font-family:var(--cogni-font-mono);font-size:.95em}code{padding:.15em .35em;border-radius:var(--cogni-border-radius-small, .1875rem);background:var(--cogni-surface-muted, var(--cogni-color-neutral-100, #f3f4f6));border:1px solid var(--cogni-border, var(--cogni-color-neutral-200, #e5e7eb))}pre{font-family:var(--cogni-font-mono);margin:0 0 var(--cogni-type-paragraph-gap);padding:var(--cogni-spacing-medium, 1rem);overflow:auto;border-radius:var(--cogni-border-radius-large, .5rem);background:var(--cogni-surface-muted, var(--cogni-color-neutral-100, #f3f4f6));border:1px solid var(--cogni-border, var(--cogni-color-neutral-200, #e5e7eb))}pre code{padding:0;border:0;background:transparent}kbd{padding:.15em .4em;border-radius:var(--cogni-border-radius-small, .1875rem);border:1px solid var(--cogni-border, var(--cogni-color-neutral-200, #e5e7eb));background:var(--cogni-surface, var(--cogni-color-neutral-0, #fff));box-shadow:var(--cogni-shadow-x-small, 0 1px 2px rgba(0, 0, 0, .06))}hr{border:0;height:1px;background:var(--cogni-border, var(--cogni-color-neutral-200, #e5e7eb));margin:var(--cogni-spacing-2x-large, 2.25rem) 0}table{width:100%;border-collapse:collapse;margin:0 0 var(--cogni-type-paragraph-gap);font-size:var(--cogni-font-size-small, .875rem)}th,td{padding:var(--cogni-spacing-small, .75rem);border-bottom:1px solid var(--cogni-border, var(--cogni-color-neutral-200, #e5e7eb));text-align:left;vertical-align:top}th{font-weight:var(--cogni-font-weight-semibold, 600);color:var(--cogni-text, var(--cogni-color-neutral-900, #111827))}:focus-visible{outline:var(--cogni-focus-ring, 3px solid #0284c7);outline-offset:var(--cogni-focus-ring-offset, 1px)}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}.typo-display{font-family:var(--cogni-font-heading);font-size:var(--cogni-font-size-4x-large);line-height:1.05;letter-spacing:var(--cogni-letter-spacing-denser);font-weight:var(--cogni-font-weight-bold)}.typo-h1{font-family:var(--cogni-font-heading);font-size:var(--cogni-font-size-3x-large)}.typo-h2{font-family:var(--cogni-font-heading);font-size:var(--cogni-font-size-2x-large)}.typo-h3{font-family:var(--cogni-font-heading);font-size:var(--cogni-font-size-x-large)}.typo-body{font-family:var(--cogni-font-body);font-size:var(--cogni-font-size-medium);line-height:var(--cogni-line-height-normal)}.typo-body-sm{font-family:var(--cogni-font-body);font-size:var(--cogni-font-size-small)}.typo-caption{font-family:var(--cogni-font-body);font-size:var(--cogni-font-size-x-small);color:var(--cogni-text-muted)}.typo-ui{font-family:var(--cogni-font-ui)}.typo-ui-sm{font-family:var(--cogni-font-ui);font-size:var(--cogni-font-size-small);line-height:var(--cogni-line-height-dense)}.typo-code{font-family:var(--cogni-font-mono)}.font-body{font-family:var(--cogni-font-body)!important}.font-heading{font-family:var(--cogni-font-heading)!important}.font-ui{font-family:var(--cogni-font-ui)!important}.font-mono{font-family:var(--cogni-font-mono)!important}.text-muted{color:var(--cogni-text-muted)!important}.text-strong{color:var(--cogni-text-strong, var(--cogni-text))!important}.cogni-button{appearance:none;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--cogni-button-icon-gap);height:var(--cogni-button-height-md);padding:var(--cogni-button-padding-y-md) var(--cogni-button-padding-x-md);border-radius:var(--cogni-button-radius);border:var(--cogni-button-border-width) solid var(--cogni-button-border);background:var(--cogni-button-bg);color:var(--cogni-button-fg);font-family:var(--cogni-button-font-family);font-weight:var(--cogni-button-font-weight);font-size:var(--cogni-button-font-size-md);line-height:1;letter-spacing:var(--cogni-letter-spacing-normal, 0);text-decoration:none;user-select:none;white-space:nowrap;cursor:pointer;box-shadow:var(--cogni-elevation-3);transition:transform var(--cogni-button-transition),box-shadow var(--cogni-button-transition),background var(--cogni-button-transition),border-color var(--cogni-button-transition),color var(--cogni-button-transition)}.cogni-button:hover{background:var(--cogni-button-bg-hover);color:var(--cogni-button-fg-hover);border-color:var(--cogni-button-border-hover);box-shadow:var(--cogni-elevation-5);transform:translateY(-1px)}.cogni-button:active{background:var(--cogni-button-bg-active);border-color:var(--cogni-button-border-active);transform:translateY(0);box-shadow:var(--cogni-elevation-3)}.cogni-button:focus-visible{outline:var(--cogni-component-focus-ring);outline-offset:var(--cogni-component-focus-ring-offset)}.cogni-button:disabled,.cogni-button[aria-disabled=true]{opacity:var(--cogni-disabled-opacity);cursor:var(--cogni-disabled-cursor);background:var(--cogni-button-disabled-bg);color:var(--cogni-button-disabled-fg);border-color:var(--cogni-button-disabled-border);box-shadow:none;transform:none;pointer-events:none}.cogni-button.sm{height:var(--cogni-button-height-sm);padding:var(--cogni-button-padding-y-sm) var(--cogni-button-padding-x-sm);font-size:var(--cogni-button-font-size-sm)}.cogni-button.lg{height:var(--cogni-button-height-lg);padding:var(--cogni-button-padding-y-lg) var(--cogni-button-padding-x-lg);font-size:var(--cogni-button-font-size-lg)}.cogni-button.primary{background:var(--cogni-button-primary-bg);color:var(--cogni-button-primary-fg);border-color:var(--cogni-button-primary-border)}.cogni-button.primary:hover{background:var(--cogni-button-primary-bg-hover);border-color:var(--cogni-button-primary-border-hover)}.cogni-button.primary:active{background:var(--cogni-button-primary-bg-active);border-color:var(--cogni-button-primary-border-active)}.cogni-button.secondary{background:var(--cogni-button-secondary-bg);color:var(--cogni-button-secondary-fg);border-color:var(--cogni-button-secondary-border)}.cogni-button.secondary:hover{background:var(--cogni-button-secondary-bg-hover);border-color:var(--cogni-button-secondary-border-hover)}.cogni-button.secondary:active{background:var(--cogni-button-secondary-bg-active);border-color:var(--cogni-button-secondary-border-active)}.cogni-button.tertiary{background:var(--cogni-button-tertiary-bg);color:var(--cogni-button-tertiary-fg);border-color:var(--cogni-button-tertiary-border);box-shadow:none}.cogni-button.tertiary:hover{background:var(--cogni-button-tertiary-bg-hover);transform:none;box-shadow:none}.cogni-button.tertiary:active{background:var(--cogni-button-tertiary-bg-active);box-shadow:none}.cogni-button.quaternary{background:var(--cogni-button-quaternary-bg);color:var(--cogni-button-quaternary-fg);border-color:var(--cogni-button-quaternary-border);box-shadow:none}.cogni-button.quaternary:hover{background:var(--cogni-button-quaternary-bg-hover);transform:none;box-shadow:none}.cogni-button.quaternary:active{background:var(--cogni-button-quaternary-bg-active);box-shadow:none}.cogni-button.outlined{background:transparent;color:var(--cogni-button-fg);border-color:var(--cogni-button-border);box-shadow:none}.cogni-button.outlined:hover{background:var(--cogni-button-bg-hover);border-color:var(--cogni-button-border-hover);transform:none}.cogni-button.tonal{background:var(--cogni-button-tonal-bg);color:var(--cogni-button-tonal-fg);border-color:var(--cogni-button-tonal-border)}.cogni-button.tonal:hover{background:var(--cogni-button-tonal-bg-hover)}.cogni-button.tonal:active{background:var(--cogni-button-tonal-bg-active)}.cogni-button.text{background:transparent;border-color:transparent;box-shadow:none;padding-left:0;padding-right:0;height:auto;color:var(--cogni-color-primary-700, #0369a1)}.cogni-button.text:hover{background:transparent;text-decoration:underline;box-shadow:none;transform:none}.cogni-button.text:active{text-decoration:underline}.cogni-button.elevated{box-shadow:var(--cogni-button-shadow-elevated, var(--cogni-elevation-4))}.cogni-button.elevated:hover{box-shadow:var(--cogni-button-shadow-elevated-hover, var(--cogni-elevation-5))}.cogni-button.success{background:var(--cogni-button-success-bg);color:var(--cogni-button-success-fg);border-color:var(--cogni-button-success-border)}.cogni-button.success:hover{background:var(--cogni-button-success-bg-hover)}.cogni-button.success:active{background:var(--cogni-button-success-bg-active)}.cogni-button.warning{background:var(--cogni-button-warning-bg);color:var(--cogni-button-warning-fg);border-color:var(--cogni-button-warning-border)}.cogni-button.warning:hover{background:var(--cogni-button-warning-bg-hover)}.cogni-button.warning:active{background:var(--cogni-button-warning-bg-active)}.cogni-button.danger{background:var(--cogni-button-danger-bg);color:var(--cogni-button-danger-fg);border-color:var(--cogni-button-danger-border)}.cogni-button.danger:hover{background:var(--cogni-button-danger-bg-hover)}.cogni-button.danger:active{background:var(--cogni-button-danger-bg-active)}.cogni-button.icon{padding:0;width:var(--cogni-button-height-md);height:var(--cogni-button-height-md);border-radius:var(--cogni-radius-md)}.cogni-button.icon.sm{width:var(--cogni-button-height-sm);height:var(--cogni-button-height-sm)}.cogni-button.icon.lg{width:var(--cogni-button-height-lg);height:var(--cogni-button-height-lg)}.cogni-button svg{width:var(--cogni-button-icon-size, 1.125rem);height:var(--cogni-button-icon-size, 1.125rem)}.cogni-button.fab{width:var(--cogni-button-fab-size, 3.25rem);height:var(--cogni-button-fab-size, 3.25rem);padding:0;border-radius:var(--cogni-radius-pill);box-shadow:var(--cogni-elevation-5)}.cogni-button.toggle[aria-pressed=true]{background:var(--cogni-button-bg-active);border-color:var(--cogni-button-border-active);box-shadow:var(--cogni-elevation-4)}.cogni-button.primary.toggle[aria-pressed=true]{background:var(--cogni-button-primary-bg-active);border-color:var(--cogni-button-primary-border-active)}.cogni-button.secondary.toggle[aria-pressed=true]{background:var(--cogni-button-secondary-bg-active);border-color:var(--cogni-button-secondary-border-active)}.cogni-button.menu:after{content:"▾";display:inline-block;margin-left:.5rem;font-size:.9em;line-height:1;opacity:.9}.cogni-split{display:inline-flex;align-items:stretch;border-radius:var(--cogni-button-radius);overflow:hidden;box-shadow:var(--cogni-elevation-3)}.cogni-split .cogni-button{border-radius:0;box-shadow:none;transform:none}.cogni-split .cogni-button+.cogni-button{border-left-width:1px}.cogni-split .cogni-button:hover{transform:none;box-shadow:none}.cogni-button-menu:after{content:"▾";display:inline-block;margin-left:.5rem;font-size:.9em;line-height:1;opacity:.9}html[class*=cogni-theme-]:before{content:attr(class);position:fixed;bottom:12px;right:12px;z-index:9999;font:12px/1.2 system-ui;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--cogni-surface, #fff) 85%,transparent);border:1px solid var(--cogni-border, #e2e8f0);color:var(--cogni-text, #0b1220);box-shadow:var(--cogni-elevation-3, 0 2px 4px rgb(0 0 0 / 12%))}/*!
* Cogniyon Design System — Font Theme: Brand (External)
* File: fonts.brand.css
*
* Purpose
* - Brand-forward modern sans + strong display headings.
* - Sets the 4 font role tokens used by typography.css.
*
* Default pairing
* - Body/UI: Inter
* - Headings: Sora
* - Mono: JetBrains Mono
*
* Usage
* - Include exactly ONE fonts.*.css file per page/app:
*   <link rel="stylesheet" href="/styles/fonts.brand.css" />
*
* Notes
* - Replace the @import with self-hosted @font-face in production for best control.
*/:root{--cogni-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--cogni-font-heading: "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, system-ui;--cogni-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, system-ui;--cogni-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}