/*
 * MenuCliQ Analytics — Design System
 * Aesthetic: Editorial financial terminal × hospitality warmth
 * No AI-slop purple gradients. No rounded-everything. No "modern" sterility.
 *
 * Typography pairing:
 *   Display/numerals: Fraunces (serif, variable, editorial-grade)
 *   UI/body:          Geist (sans, sharp, readable at 12px)
 *   Mono/data:        JetBrains Mono (tabular, for tables & codes)
 */

/* ---------------------------------------------------------------------------
 * Font imports — CDN fonts, no build step needed
 * ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------------------------------------------------------------------------
 * Design tokens — the single source of truth
 * ------------------------------------------------------------------------- */
:root {
    /* ---- Surface colors (dark-first, warm-toned) ---- */
    --surface-0:          #0a0908;   /* page background — near-black, warm */
    --surface-1:          #131110;   /* card backgrounds */
    --surface-2:          #1c1a18;   /* elevated cards, modals */
    --surface-3:          #252320;   /* hover states */
    --surface-inset:      #080706;   /* deeper than page — for wells */

    /* ---- Border hierarchy ---- */
    --border-subtle:      rgba(255, 248, 235, 0.06);
    --border-default:     rgba(255, 248, 235, 0.10);
    --border-strong:      rgba(255, 248, 235, 0.18);
    --border-accent:      rgba(255, 107, 53, 0.35);

    /* ---- Text colors ---- */
    --text-primary:       #f5efe4;   /* warm off-white */
    --text-secondary:     #a8a09a;   /* muted warm grey */
    --text-tertiary:      #6b655f;
    --text-inverse:       #0a0908;
    --text-accent:        #ffb989;

    /* ---- Brand accents ---- */
    --accent-primary:     #FF6B35;   /* MenuCliQ orange — sparingly */
    --accent-primary-dim: rgba(255, 107, 53, 0.12);
    --accent-warm:        #e8a87c;   /* warm peach — numbers, highlights */
    --accent-gold:        #d4a354;   /* aged gold — premium indicators */

    /* ---- Semantic colors (restaurant context — food-appropriate) ---- */
    --positive:           #7ab87a;   /* sage green — revenue up, good */
    --positive-dim:       rgba(122, 184, 122, 0.15);
    --negative:           #d66b5a;   /* terracotta red, not fire-engine */
    --negative-dim:       rgba(214, 107, 90, 0.15);
    --warning:            #e0b54a;   /* warm amber */
    --warning-dim:        rgba(224, 181, 74, 0.15);
    --info:               #6ca3c7;   /* muted slate blue */
    --info-dim:           rgba(108, 163, 199, 0.15);

    /* ---- Chart color ramp (perceptually sequenced, food-warm) ---- */
    --chart-1:            #FF6B35;
    --chart-2:            #e8a87c;
    --chart-3:            #d4a354;
    --chart-4:            #7ab87a;
    --chart-5:            #6ca3c7;
    --chart-6:            #a67eb7;
    --chart-7:            #d66b5a;
    --chart-8:            #bdb4a5;

    /* ---- Typography ---- */
    --font-display:       'Fraunces', ui-serif, Georgia, serif;
    --font-sans:          'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:          'JetBrains Mono', ui-monospace, monospace;

    /* Type scale — modular, 1.2 ratio */
    --fs-xs:              11px;
    --fs-sm:              12px;
    --fs-base:            13px;
    --fs-md:              14px;
    --fs-lg:              16px;
    --fs-xl:              19px;
    --fs-2xl:             24px;
    --fs-3xl:             32px;
    --fs-4xl:             44px;
    --fs-5xl:             60px;

    /* ---- Spacing — 4px base grid ---- */
    --sp-1:               4px;
    --sp-2:               8px;
    --sp-3:               12px;
    --sp-4:               16px;
    --sp-5:               20px;
    --sp-6:               24px;
    --sp-8:               32px;
    --sp-10:              40px;
    --sp-12:              48px;
    --sp-16:              64px;

    /* ---- Radii — deliberately restrained, never fully pilled ---- */
    --radius-sm:          2px;
    --radius-md:          4px;
    --radius-lg:          6px;
    --radius-xl:          10px;

    /* ---- Shadows — warm-tinted, not pure black ---- */
    --shadow-sm:          0 1px 2px rgba(10, 9, 8, 0.4);
    --shadow-md:          0 4px 12px rgba(10, 9, 8, 0.5), 0 1px 2px rgba(10, 9, 8, 0.3);
    --shadow-lg:          0 10px 30px rgba(10, 9, 8, 0.6), 0 2px 6px rgba(10, 9, 8, 0.4);
    --shadow-accent:      0 0 0 1px var(--border-accent), 0 4px 20px rgba(255, 107, 53, 0.2);

    /* ---- Timing ---- */
    --ease-out:           cubic-bezier(0.2, 0, 0, 1);
    --ease-in-out:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:           120ms;
    --dur-med:            240ms;
    --dur-slow:           400ms;

    /* ---- Layout dimensions ---- */
    --sidebar-w:          232px;
    --topbar-h:           56px;
    --content-max:        1680px;
}

/* ---------------------------------------------------------------------------
 * Reset & base
 * ------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--surface-0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* Subtle noise texture — the detail that separates pro from AI-slop */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.8'/%3E%3C/svg%3E");
}

/* Warm glow orbs — ambient atmosphere, very subtle */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 800px 600px at 20% 0%, rgba(255, 107, 53, 0.04), transparent),
        radial-gradient(ellipse 600px 500px at 90% 100%, rgba(212, 163, 84, 0.03), transparent);
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

a { color: var(--accent-warm); text-decoration: none; }
a:hover { color: var(--accent-primary); }

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* ---------------------------------------------------------------------------
 * Scrollbars — thin, on-brand
 * ------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
    background-clip: padding-box;
    border: 2px solid transparent;
}

/* ---------------------------------------------------------------------------
 * Utility classes — tiny, focused set
 * ------------------------------------------------------------------------- */
.num-display {
    font-family: var(--font-display);
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    font-variation-settings: 'opsz' 144;
    letter-spacing: -0.03em;
}
.num-mono {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum' 1;
}
.label-uc {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
    font-weight: 500;
}
.delta-positive { color: var(--positive); }
.delta-negative { color: var(--negative); }
.delta-neutral  { color: var(--text-tertiary); }

/* Focus ring — keyboard-only */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Selection */
::selection {
    background: var(--accent-primary);
    color: var(--text-inverse);
}

/* ---------------------------------------------------------------------------
 * Motion — respect user preferences
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}