/* KellySystem theme tokens.
   Keep this file to variables only; layout and component rules belong in the existing CSS files. */
:root {
    /* White-label brand tokens */
    --brand-primary: #653c69;
    --brand-primary-dark: #3e0b43;
    --brand-primary-mid: #76477a;
    --brand-primary-gradient-start: #7d4c84;
    --brand-primary-mid-light: #8f5b93;
    --brand-primary-muted: #9a789d;
    --brand-primary-muted-hover: #7b5a88;
    --brand-primary-soft: #f5d3f8;
    --brand-primary-tint: #f3eaf4;
    --brand-primary-tint-muted: #f3eff4;
    --brand-primary-tint-soft: #f4f0f6;
    --brand-primary-tint-strong: #e7dfe9;
    --brand-primary-tint-section: #e7ddeb;
    --brand-primary-tint-hover: #efe8f5;
    --brand-primary-surface-soft: #f7f4f8;
    --brand-primary-border-soft: #e5dfe8;
    --brand-primary-border: #d8c8de;
    --brand-primary-border-muted: #d9d4df;
    --brand-primary-border-light: #d8d2e0;
    --brand-primary-line-soft: #ded8e4;
    --brand-primary-surface-muted: #e9e5ee;
    --brand-primary-deep-alt: #6d3b67;
    --brand-primary-deep-muted: #6b3b64;
    --brand-primary-deep: #58365c;
    --brand-primary-ink: #4f1656;
    --brand-primary-text-soft: #5d3f67;
    --brand-primary-action-muted: #8f5a96;
    --brand-primary-border-action: #8b5a91;
    --brand-primary-accent-muted: #b487b8;
    --brand-primary-tooltip-text: #f5d7f1;
    --brand-primary-border-strong: #c9bdcd;
    --brand-primary-border-panel: #cdbfd1;
    --brand-primary-border-subtle: #c6b7ca;
    --brand-primary-border-faint: #d8d0dc;
    --brand-primary-tint-pale: #f6eff7;
    --brand-primary-tint-paler: #eee5f0;
    --brand-primary-tint-featured: #f5eef6;
    --brand-primary-tint-accent: #eadfed;
    --brand-primary-tint-lifted: #f7f1f8;
    --brand-primary-tint-current-start: #f8f3fa;
    --brand-primary-tint-current-end: #efe5f2;
    --brand-primary-tint-modal-hover: #f4ebf6;
    --brand-primary-tint-modal-current: #f7f0f8;
    --brand-primary-tint-modal-current-soft: #fbf7fc;
    --brand-primary-tint-modal-selected-hover: #f1e7f3;
    --brand-primary-surface-wash: #fbf8fc;
    --brand-primary-surface-pale: #fbfafc;
    --brand-primary-surface-table: #fdfbfe;
    --brand-primary-surface-lavender: #e5dde9;
    --brand-primary-surface-muted-2: #ebe6ee;
    --brand-primary-surface-progress: #f6f1f8;
    --brand-primary-rgb: 101, 60, 105;
    --brand-primary-dark-rgb: 62, 11, 67;
    --brand-primary-accent-muted-rgb: 180, 135, 184;
    --brand-focus-ring: rgba(var(--brand-primary-rgb), .8);
    --brand-primary-dark-ring: rgba(var(--brand-primary-dark-rgb), 0.6980392157);
    --brand-primary-dark-hover-bg: rgba(var(--brand-primary-dark-rgb), .2);

    --color-page-bg: #f2f0f4;
    --color-surface: #ffffff;
    --color-text: #020817;
    --color-text-muted: rgba(2, 8, 23, .68);
    --color-border: #cdcdcd;
    --color-success: #16805b;
    --color-success-soft: rgba(22, 128, 91, .12);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;

    --font-family-base: "Kumbh Sans", sans-serif;

    /* Compatibility tokens used by components.css. */
    --background: var(--color-surface);
    --foreground: var(--color-text);
    --card: var(--color-surface);
    --card-foreground: var(--color-text);
    --primary: var(--brand-primary);
    --primary-foreground: #ffffff;
    --secondary: var(--brand-primary-tint-soft);
    --secondary-foreground: var(--brand-primary-dark);
    --muted: var(--brand-primary-tint-soft);
    --muted-foreground: var(--color-text-muted);
    --accent: var(--brand-primary-tint);
    --accent-foreground: var(--brand-primary-dark);
    --destructive: #dc2626;
    --destructive-foreground: #ffffff;
    --border: var(--color-border);
    --input: var(--color-border);
    --ring: var(--brand-focus-ring);
    --radius: var(--radius-sm);

    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    --spacing-30: 7.5rem;
    --spacing-72: 18rem;

    --font-family: var(--font-family-base);
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}