/*
 * Cobbo — brand layer for the Dreams Core dashboard template.
 *
 * Load after script-*.css. The template exposes its whole look as CSS custom
 * properties, so re-pointing those tokens re-brands every template component
 * (buttons, cards, sidebar, badges) for the user and admin dashboards alike.
 * Brand source of truth: prototype/DESIGN_SYSTEM.md, resources/scss/_tokens.scss.
 */

:root,
[data-theme=light] {
    color-scheme: light;

    /*
     * Typography — Geist for UI and headings, Geist Mono for references and codes.
     * Geist stays compact in dense tables and has true tabular figures for amounts.
     */
    --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-family-primary: var(--font-sans);

    /* Primary — Cobbo crimson (#8B1313 sits at 600) */
    --color-primary-50: #fcf3f3;
    --color-primary-100: #f8e1e1;
    --color-primary-200: #f0c0c0;
    --color-primary-300: #e39494;
    --color-primary-400: #cf5c5c;
    --color-primary-500: #b02a2a;
    --color-primary-600: #8b1313;
    --color-primary-700: #730f0f;
    --color-primary-800: #630f0e;
    --color-primary-900: #540c0d;
    --color-primary-950: #2e0707;
    --color-primary: var(--color-primary-600);
    --color-primary-hover: var(--color-primary-800);
    --color-primary-transparent: var(--color-primary-50);
    --background-image-primary-gradient: linear-gradient(90deg, #8b1313 0%, #540c0d 100%);

    /* Neutrals — slightly cool, so they sit beside crimson and navy */
    --color-neutral-50: #f6f7f9;
    --color-neutral-100: #eef0f3;
    --color-neutral-150: #e8ebef;
    --color-neutral-200: #e3e6ea;
    --color-neutral-300: #cfd4db;
    --color-neutral-400: #a8b0bb;
    --color-neutral-500: #6b7484;
    --color-neutral-600: #5c6575;
    --color-neutral-700: #3f444b;
    --color-neutral-800: #2a2e35;
    --color-neutral-900: #171a1f;

    /* State — danger stays vivid so an error never reads as "brand" */
    --color-danger-50: #fef3f2;
    --color-danger-100: #fee4e2;
    --color-danger-500: #f04438;
    --color-danger-600: #d92d20;
    --color-danger-700: #b42318;
    --color-danger: var(--color-danger-600);
    --color-success-50: #ecfaf3;
    --color-success-600: #0f7b4f;
    --color-success-700: #0b6140;

    /* Sidebar — Cobbo navy */
    --sidebar-bg: #1a1a2e;
    --sidebar-bg-active: #25253d;

    /* Shape & depth */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --shadow-xs: 0 1px 2px 0 #171a1f0d;
    --shadow-glow-primary: 0 6px 16px -8px #8b131399;

    /* Semantic aliases used by Cobbo screens */
    --brand-link: var(--color-primary-600);
    --focus-ring: #8b131326;
    --danger-ring: #d92d2026;
    --danger-text: var(--color-danger-700);
    --success-text: var(--color-success-700);
}

[data-theme=dark] {
    color-scheme: dark;

    --color-primary-50: #2a1416;
    --color-primary-100: #3a1a1c;
    --color-primary-transparent: #2a1416;

    --surface-canvas: #0c0d12;
    --surface-base: #12131a;
    --surface-raised: #191a23;
    --surface-sunken: #0f1016;
    --sidebar-bg: #0f1018;
    --sidebar-bg-active: #1c1d2b;

    --color-danger-50: #2c1513;
    --color-success-50: #10241b;

    --brand-link: #f0a3a3;
    --focus-ring: #e3949433;
    --danger-ring: #f0443833;
    --danger-text: #fda29b;
    --success-text: #75e0a7;
}

html {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Money, counts and dates line up in columns. */
table,
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

::selection {
    background: var(--color-primary-100);
    color: var(--text-primary);
}

.btn {
    border-radius: var(--radius-md);
}

.surface-card {
    border-radius: var(--radius-xl);
}

/* Template panels hard-code a green gradient; re-point them at Cobbo navy and crimson. */
.navy-panel {
    background: radial-gradient(120% 140% at 100% 0, #3a1420, #1a1a2e 55%, #0c0d12);
}

.sidebar-link.is-active {
    background: linear-gradient(90deg, color-mix(in oklab, var(--color-primary-400) 30%, transparent), transparent);
}