/* AlpsCraft ERP — design tokens (shared by admin + customer portal).
   Consumed by components.css, utilities.css, app.css, portal.css. */

:root {
    color-scheme: dark;

    /* Surfaces */
    --color-bg-base: #0A0B0F;
    --color-bg-elevated: #111318;
    --color-bg-raised: #181B22;
    --color-bg-overlay: #1F2330;
    --color-bg-inset: #0D0F14;

    /* Borders */
    --color-border-subtle: rgba(255, 255, 255, 0.06);
    --color-border-default: rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.16);
    --color-border-focus: rgba(125, 211, 252, 0.45);

    /* Foreground */
    --color-fg-primary: #F4F5F7;
    --color-fg-secondary: #B4B8C5;
    --color-fg-tertiary: #6E7384;
    --color-fg-muted: #474B58;
    --color-fg-inverse: #0A0B0F;

    /* Accent — alpine ice */
    --color-accent: #7DD3FC;
    --color-accent-strong: #38BDF8;
    --color-accent-bg: rgba(56, 189, 248, 0.10);
    --color-accent-bg-strong: rgba(56, 189, 248, 0.18);
    --color-accent-ring: rgba(56, 189, 248, 0.25);

    /* Primary CTA — warm amber */
    --color-cta: #F5B544;
    --color-cta-hover: #E5A332;
    --color-cta-fg: #1A1410;
    --color-cta-ring: rgba(245, 181, 68, 0.28);

    /* Semantic */
    --color-success: #4ADE80;
    --color-success-bg: rgba(74, 222, 128, 0.12);
    --color-danger: #F87171;
    --color-danger-bg: rgba(248, 113, 113, 0.12);
    --color-warning: #FBBF24;
    --color-warning-bg: rgba(251, 191, 36, 0.12);
    --color-info: #60A5FA;
    --color-info-bg: rgba(96, 165, 250, 0.12);

    /* Badge / pill neutrals */
    --color-neutral-bg: rgba(255, 255, 255, 0.06);
    --color-neutral-fg: #B4B8C5;

    /* Typography */
    --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;

    --fs-2xs: 0.6875rem;   /* 11px */
    --fs-xs: 0.75rem;      /* 12px */
    --fs-sm: 0.8125rem;    /* 13px */
    --fs-base: 0.875rem;   /* 14px */
    --fs-md: 0.9375rem;    /* 15px */
    --fs-lg: 1rem;         /* 16px */
    --fs-xl: 1.125rem;     /* 18px */
    --fs-2xl: 1.25rem;     /* 20px */
    --fs-3xl: 1.5rem;      /* 24px */
    --fs-4xl: 1.875rem;    /* 30px */
    --fs-5xl: 2.25rem;     /* 36px */
    --fs-display: 3rem;    /* 48px */
    --fs-hero: 6rem;       /* 96px — used for error pages */

    --lh-tight: 1.2;
    --lh-snug: 1.35;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    --ls-tight: -0.01em;
    --ls-tighter: -0.02em;
    --ls-wide: 0.04em;
    --ls-wider: 0.08em;

    /* Radii */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-raised: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 32px rgba(0, 0, 0, 0.55);
    --shadow-overlay: 0 20px 48px rgba(0, 0, 0, 0.6);
    --shadow-focus: 0 0 0 3px var(--color-accent-ring);
    --shadow-focus-cta: 0 0 0 3px var(--color-cta-ring);

    /* Motion */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out: cubic-bezier(0.6, 0, 0.4, 1);
    --dur-fast: 120ms;
    --dur: 180ms;
    --dur-slow: 280ms;

    /* Layout */
    --layout-max: 1360px;
    --layout-pad: 1.5rem;
    --layout-pad-lg: 2rem;
    --sidebar-w: 248px;
    --topbar-h: 60px;

    /* Z */
    --z-nav: 50;
    --z-sidebar: 40;
    --z-overlay: 70;
    --z-toast: 90;
}

@media (min-width: 1024px) {
    :root {
        --layout-pad: 2rem;
    }
}

/* Opt-in: some surface regions want the same dark theme on light-mode user agents. */
html, body { background-color: var(--color-bg-base); color: var(--color-fg-primary); }