/*
 * FundBot UI design tokens
 *
 * This file owns global values only. Component-specific custom properties stay
 * next to their components in app.css so legacy layouts keep their cascade.
 */
@layer reset, tokens, foundations, themes;

@layer tokens {
    :root {
        /* Brand */
        --brand-emerald: #0faf82;
        --brand-mint: #25d6a7;
        --brand-blue: #168fc7;
        --brand-ink: #10231e;

        /* Legacy aliases retained while components migrate to semantic names. */
        --green: var(--brand-emerald);
        --green-strong: #08785b;
        --green-soft: #e5f6ef;
        --blue: var(--brand-blue);
        --gold: #c18a28;

        /* Semantic color surfaces */
        --paper: #f7faf8;
        --card: #fff;
        --ink: #17221f;
        --muted: #71807b;
        --line: #e5ece8;
        --shadow: 0 12px 32px rgba(23, 55, 43, .06);

        --ui-card-bg: var(--card);
        --ui-surface-raised: var(--card);
        --ui-surface-subtle: var(--paper);
        --ui-text: var(--ink);
        --ui-muted: var(--muted);
        --ui-danger: #b53c47;
        --ui-live-color: #16a678;
        --text-primary: var(--ink);
        --text-secondary: var(--muted);
        --text-muted: var(--muted);
        --border-color: var(--line);
        --border-color-dark: #2d6653;
        --danger-color: #c94f55;

        /* Layout and interaction */
        --ui-space-1: 4px;
        --ui-space-2: 8px;
        --ui-space-3: 12px;
        --ui-space-4: 16px;
        --ui-space-5: 20px;
        --ui-space-6: 24px;
        --ui-font-xs: .75rem;
        --ui-font-sm: .875rem;
        --ui-font-md: 1rem;
        --ui-font-lg: 1.125rem;
        --ui-font-xl: 1.5rem;
        --ui-line-compact: 1.2;
        --ui-line-normal: 1.45;
        --ui-surface-padding: var(--ui-space-4);
        --ui-surface-padding-comfortable: var(--ui-space-5);
        --ui-radius-sm: 9px;
        --ui-radius-md: 12px;
        --ui-radius-lg: 15px;
        --ui-card-radius: 18px;
        --ui-control-height: 44px;
        --ui-control-radius: 12px;
        --ui-control-gap: 10px;
        --ui-focus-ring: 0 0 0 4px rgba(22, 166, 120, .18);
        --ui-control-focus: 0 0 0 3px rgba(14, 170, 132, .18);
        --ui-card-border: #c5e6d8;
        --ui-card-border-hover: #69c39f;
        --ui-card-shadow-hover: 0 18px 38px rgba(24, 109, 77, .12);
        --ui-transition: 180ms ease;
        --ui-motion-fast: 120ms;
        --ui-motion-normal: 180ms;
        --ui-motion-slow: 320ms;
        --ui-ease-standard: cubic-bezier(.2, 0, 0, 1);
        --ui-ease-emphasized: cubic-bezier(.2, .8, .2, 1);
        --ui-hover-lift: -2px;
        --ui-hover-surface: color-mix(in srgb, var(--card) 90%, var(--green-soft));
        --ui-hover-border: color-mix(in srgb, var(--green) 48%, var(--line));
        --ui-skeleton-base: color-mix(in srgb, var(--green-soft) 78%, var(--card));
        --ui-skeleton-highlight: color-mix(in srgb, var(--green-soft) 38%, var(--card));
        --ui-busy-backdrop: color-mix(in srgb, var(--card) 82%, transparent);

        /* Shell-specific values are tokens because light and dark themes share them. */
        --sidebar-top: #fbfffd;
        --sidebar-mid: #e9f9f0;
        --sidebar-bottom: #b8e9d0;
        --topbar-green: #eefbf4;
        --hover-green: #d9f6e8;
        --hover-green-strong: #b9eed4;
    }
}