/*
 * Ark design tokens.
 *
 * Compiled output of the approved SCSS token sheet. Values produced by SCSS
 * colour functions (darken/lighten/transparentize) are resolved here because
 * CSS cannot evaluate them at runtime.
 *
 * Theme-varying values are declared in the :root / [data-theme] blocks below.
 * Everything else is theme-invariant.
 */

:root {
    /* Brand */
    --brand-primary: #2a6572;
    --brand-secondary: #9cbd2b;
    --brand-tertiary: #6a329c;

    /* Neutrals */
    --gray-50: #f3f4f5;
    --gray-200: rgba(242, 242, 242, 1);
    --gray-700: #374151;
    --gray-800: #1f2937;

    /* Semantic brand */
    --primary-color: var(--brand-primary);
    --primary-hover-color: #1f4b54; /* darken(#2a6572, 8%) */
    --primary-active-color: #17373e; /* darken(#2a6572, 14%) */

    --secondary-color: var(--brand-secondary);
    --secondary-hover-color: #809c23; /* darken(#9cbd2b, 8%) */

    --tertiary-color: var(--brand-tertiary);
    --tertiary-hover-color: #55287d; /* darken(#6a329c, 8%) */

    /* State */
    --success-color: #16a34a;
    --success-bg: #d1fadf;
    --success-text: #067647;
    --success-border: #3be479; /* lighten(#16a34a, 20%) */

    --warning-color: #d97706;
    --warning-bg: #fef3c7;
    --warning-text: #b45309;
    --warning-border: #faa94b; /* lighten(#d97706, 20%) */

    --danger-color: #dc2626;
    --danger-bg: #fee2e2;
    --danger-text: #b91c1c;
    --danger-border: #ea7e7e; /* lighten(#dc2626, 20%) */

    --info-color: #0ea5e9;
    --info-bg: #e0f2fe;
    --info-text: #075985;
    --info-border: #67caf6; /* lighten(#0ea5e9, 20%) */

    /* Sizing */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --box-shadow: 0 18px 55px rgba(42, 101, 114, 0.11);
    --shadow-brand: 0 24px 70px rgba(25, 50, 62, 0.16);
    --motion-fast: 180ms;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;

    /* Layout */
    --sidebar-width: 270px;
    --sidebar-width-collapsed: 59px;
    --topbar-height: 60px;
    --breadcrumb-height: 40px;
    --page-title-height: 40px;

    --container-padding-x: var(--spacing-md);
    --container-padding-mobile: var(--spacing-md);
    --container-padding-tablet: var(--spacing-lg);
    --container-padding-desktop: var(--spacing-lg);
    --mobile-xs: 320px;
    --gutter-x: 1.5rem;

    /* Typography */
    --font-family-base: 'Public Sans', Arial, sans-serif;
    --font-family-heading: 'Public Sans', Arial, sans-serif;
    --font-family-body: 'Public Sans', Arial, sans-serif;
    --font-family-mono: 'Consolas', 'SF Mono', ui-monospace, monospace;
    --font-size-base: 12px;
    --font-weight-normal: 400;
    --font-weight-bold: 600;

    /* Gradient */
    --brand-gradient-start: var(--primary-color);
    --brand-gradient-end: var(--tertiary-color);

    /* Menu icons */
    --menu-icon-color: #737b82;
    --menu-icon-color-hover: var(--primary-hover-color);
    --menu-icon-color-active: var(--brand-primary);
    --menu-icon-color-selected: var(--brand-tertiary);
}

/* Light theme (default) */
:root {
    --surface-bg: #f5f7f8;
    --surface-subtle: #edf2f3;
    --surface-glass: rgba(255, 255, 255, 0.78);
    --surface-glass-strong: rgba(255, 255, 255, 0.92);
    --workspace-mesh:
        radial-gradient(circle at 78% 2%, rgba(106, 50, 156, 0.18), transparent 34rem),
        radial-gradient(circle at 42% 14%, rgba(156, 189, 43, 0.14), transparent 28rem),
        radial-gradient(circle at 12% 0%, rgba(42, 101, 114, 0.22), transparent 30rem);
    --grid-header-bg: #edf2f3;
    --text-header: #17242c;
    --menu-link-color-selected: #ffffff;
    --border: rgba(42, 101, 114, 0.14);
    --border-color: var(--border);
    --button-border: #c8d5d9;
    --border-color-secondary: rgba(106, 50, 156, 0.20);
    --text: #17242c;
    --text-color: var(--text);
    --text-secondary: #52636d;
    --text-muted: #6b7880;
    --hover-surface: rgba(42, 101, 114, 0.10);
    --selection: rgba(156, 189, 43, 0.15);
    --grid-header-line: #dce4e7;
    --surface-bg-2: #e7edef;

    color-scheme: light;
}

[data-theme="dark"] {
    --surface-bg: #0b1117;
    --surface-subtle: #121c24;
    --surface-glass: rgba(18, 28, 36, 0.78);
    --surface-glass-strong: rgba(13, 22, 29, 0.94);
    --workspace-mesh:
        radial-gradient(circle at 78% 2%, rgba(106, 50, 156, 0.30), transparent 34rem),
        radial-gradient(circle at 42% 14%, rgba(156, 189, 43, 0.12), transparent 28rem),
        radial-gradient(circle at 12% 0%, rgba(42, 101, 114, 0.38), transparent 30rem);
    --grid-header-bg: #18242d;
    --text-header: #f0f6f8;
    --menu-link-color-selected: #ffffff;
    --border: rgba(137, 174, 186, 0.18);
    --border-color: var(--border);
    --border-color-secondary: rgba(169, 117, 214, 0.26);
    --text: #e8f0f3;
    --text-color: var(--text);
    --text-secondary: #a9bac2;
    --text-muted: #82949d;
    --hover-surface: rgba(255, 255, 255, 0.07);
    --selection: rgba(156, 189, 43, 0.12);
    --button-border: #314650;
    --grid-header-line: #263640;
    --surface-bg-2: #18242d;
    --shadow-brand: 0 24px 70px rgba(0, 0, 0, 0.34);

    color-scheme: dark;
}

/* System preference fallback when no explicit theme is selected. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --surface-bg: #0b1117;
        --surface-subtle: #121c24;
        --surface-glass: rgba(18, 28, 36, 0.78);
        --surface-glass-strong: rgba(13, 22, 29, 0.94);
        --workspace-mesh:
            radial-gradient(circle at 78% 2%, rgba(106, 50, 156, 0.30), transparent 34rem),
            radial-gradient(circle at 42% 14%, rgba(156, 189, 43, 0.12), transparent 28rem),
            radial-gradient(circle at 12% 0%, rgba(42, 101, 114, 0.38), transparent 30rem);
        --grid-header-bg: #18242d;
        --surface-bg-2: #18242d;
        --text-header: #f0f6f8;
        --menu-link-color-selected: #ffffff;
        --border: rgba(137, 174, 186, 0.18);
        --border-color: var(--border);
        --border-color-secondary: rgba(169, 117, 214, 0.26);
        --text: #e8f0f3;
        --text-color: var(--text);
        --text-secondary: #a9bac2;
        --text-muted: #82949d;
        --hover-surface: rgba(255, 255, 255, 0.07);
        --selection: rgba(156, 189, 43, 0.12);
        --button-border: #314650;
        --grid-header-line: #263640;
        --shadow-brand: 0 24px 70px rgba(0, 0, 0, 0.34);

        color-scheme: dark;
    }
}