/* ============================================================
   Breezeway Design System — Tokens
   Color is functional, not decorative.
   Green = good/scale  Yellow = caution  Red = problem/kill
   Blue = neutral data  Brand-blue trio = logo only
   ============================================================ */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/Inter-VariableFont.ttf") format("truetype-variations"),
         url("fonts/Inter-VariableFont.ttf") format("truetype");
}
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/Inter-VariableFont.ttf") format("truetype-variations"),
         url("fonts/Inter-VariableFont.ttf") format("truetype");
}

:root {
    /* ---------- Brand (logo only — do not decorate) ---------- */
    --brand-navy:        #0B1B3D;  /* deep navy used on white wordmark bg */
    --brand-navy-deep:   #061030;  /* keyart bg variant */
    --brand-blue-sky:    #7CC4FA;  /* top bar of triple-bar mark */
    --brand-blue:        #3490F0;  /* middle bar */
    --brand-blue-iris:   #5660F0;  /* bottom bar */

    /* ---------- Dark UI surfaces (the app) ----------
       Mirrors Tailwind gray scale used in the codebase. */
    --bg-base:           #111827;  /* gray-900  body */
    --bg-elev-1:         #1F2937;  /* gray-800  nav, cards */
    --bg-elev-2:         #252F3E;  /* gray-775  alt row, weekend */
    --bg-elev-3:         #2B3544;  /* gray-750  business switcher */
    --bg-elev-4:         #313B4B;  /* gray-725  hover row */
    --bg-elev-5:         #374151;  /* gray-700  borders, hover surface */

    --border-subtle:     #374151;  /* gray-700 */
    --border-default:    #4B5563;  /* gray-600 */
    --border-strong:     #6B7280;  /* gray-500 — scrollbar */

    /* ---------- Foreground (dark mode) ---------- */
    --fg-1:              #FFFFFF;  /* primary white */
    --fg-2:              #F3F4F6;  /* gray-100 row text */
    --fg-3:              #D1D5DB;  /* gray-300 body */
    --fg-4:              #9CA3AF;  /* gray-400 muted / labels */
    --fg-5:              #6B7280;  /* gray-500 placeholder */

    /* ---------- Light surfaces (marketing & Bad Day Detector) ---------- */
    --lt-bg:             #FFFFFF;
    --lt-bg-soft:        #F9FAFB;  /* gray-50 */
    --lt-bg-mute:        #F3F4F6;  /* gray-100 */
    --lt-border:         #E5E7EB;  /* gray-200 */
    --lt-fg-1:           #0B1B3D;  /* brand navy used as primary ink */
    --lt-fg-2:           #1F2937;  /* gray-800 */
    --lt-fg-3:           #4B5563;  /* gray-600 body */
    --lt-fg-4:           #6B7280;  /* gray-500 muted */

    /* ---------- Semantic — these carry meaning ---------- */
    /* Green = good / scale */
    --good-50:           #F0FDF4;
    --good-100:          #DCFCE7;
    --good-300:          #86EFAC;
    --good-500:          #22C55E;
    --good-600:          #16A34A;
    --good-700:          #15803D;
    --good-900:          #14532D;
    /* Yellow / amber = caution */
    --warn-50:           #FEFCE8;
    --warn-100:          #FEF9C3;
    --warn-300:          #FDE047;
    --warn-400:          #FACC15;
    --warn-500:          #EAB308;
    --warn-700:          #A16207;
    --warn-900:          #713F12;
    /* Red = problem / kill */
    --bad-50:            #FEF2F2;
    --bad-100:           #FEE2E2;
    --bad-300:           #FCA5A5;
    --bad-500:           #EF4444;
    --bad-600:           #DC2626;
    --bad-700:           #B91C1C;
    --bad-900:           #7F1D1D;
    /* Blue = neutral data */
    --data-50:           #EFF6FF;
    --data-100:          #DBEAFE;
    --data-300:          #93C5FD;
    --data-500:          #3B82F6;
    --data-600:          #2563EB;

    /* Purple→pink = benchmark / BreezeBrain custom target.
       Official accent: reserved EXCLUSIVELY for "your goal vs. actual"
       annotations (bento goal row, demo trend overlay + chart marks).
       Never used for status — status is always green/amber/red. */
    --benchmark-300:     #C4B5FD;  /* violet-300 — trend overlay line on dark */
    --benchmark-400:     #A855F7;  /* purple-500 — chart-mark icon on dark */
    --benchmark-500:     #8B5CF6;  /* violet-500 — gradient start */
    --benchmark-600:     #EC4899;  /* pink-500 — gradient end */
    --benchmark-700:     #6D28D9;  /* violet-700 — annotation ink on light tint */
    --benchmark-grad:    linear-gradient(120deg, #8B5CF6 0%, #EC4899 100%);
    --data-700:          #1D4ED8;
    --data-900:          #1E3A8A;

    /* BreezeScore badges — exact tints used in the app */
    --score-green-bg:    rgba(34, 197, 94, 0.50);   /* green-500/50 */
    --score-green-fg:    #F0FDF4;
    --score-amber-bg:    rgba(253, 224, 71, 0.60);  /* yellow-300/60 */
    --score-amber-fg:    #1F2937;
    --score-red-bg:      rgba(239, 68, 68, 0.50);   /* red-500/50 */
    --score-red-fg:      #FEF2F2;
    --score-null-bg:     #374151;                    /* gray-700 */
    --score-null-fg:     #9CA3AF;

    /* Trend chips */
    --trend-up-soft:     rgba(34, 197, 94, 0.30);
    --trend-up-strong:   rgba(34, 197, 94, 0.50);
    --trend-down-soft:   rgba(239, 68, 68, 0.30);
    --trend-down-strong: rgba(239, 68, 68, 0.50);

    /* ---------- Type ---------- */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: "Courier New", ui-monospace, SFMono-Regular, Menlo, Monaco,
                 Consolas, "Liberation Mono", monospace;
    --font-num:  "Inter", ui-sans-serif, system-ui, sans-serif;
    /* tabular numerals for any number that should align in a column */

    /* Scale — used across product + marketing.
       Marketing headlines lean heavier (800–900); product headers lean 600. */
    --fs-xxs:   10px;   /* labels in dense tables */
    --fs-xs:    12px;   /* meta, small labels */
    --fs-sm:    14px;   /* secondary body, dense UI */
    --fs-base:  16px;   /* body */
    --fs-lg:    18px;
    --fs-xl:    20px;
    --fs-2xl:   24px;   /* card titles */
    --fs-3xl:   30px;   /* page H1 in app */
    --fs-4xl:   36px;
    --fs-5xl:   48px;   /* marketing H2 */
    --fs-6xl:   60px;
    --fs-7xl:   72px;   /* marketing hero */
    --fs-8xl:   96px;   /* the big number — "$4.2M+/mo" */

    --lh-tight:  1.05;
    --lh-snug:   1.2;
    --lh-normal: 1.5;
    --lh-loose:  1.75;

    --ls-hero:   -0.035em;  /* tight hero tracking */
    --ls-tight:  -0.02em;
    --ls-normal: -0.011em;  /* Inter looks best slightly negative */
    --ls-eyebrow: 0.08em;   /* uppercase eyebrow labels */

    /* ---------- Spacing scale (Tailwind-compatible) ---------- */
    --space-0:  0;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ---------- Radius ---------- */
    --r-sm:   4px;    /* rounded-sm — trend chips */
    --r-md:   6px;    /* rounded-md — score pill, sidenav item */
    --r-lg:   8px;    /* rounded-lg — buttons, inputs, alerts */
    --r-xl:   12px;
    --r-2xl:  16px;
    --r-full: 9999px; /* status dot, badge, avatar */

    /* ---------- Shadow ---------- */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.20);
    --shadow:    0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.30);
    --shadow-lg: 0 10px 25px -3px rgb(0 0 0 / 0.40), 0 4px 10px -4px rgb(0 0 0 / 0.30);
    /* Marketing (light) shadow */
    --shadow-lt: 0 8px 24px -10px rgb(11 27 61 / 0.18), 0 1px 2px rgb(11 27 61 / 0.06);

    /* ---------- Motion ---------- */
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:  cubic-bezier(0.4, 0, 1, 1);
    --dur-1:    120ms;
    --dur-2:    180ms;  /* default ui transitions */
    --dur-3:    250ms;  /* sidebar collapse */
    --dur-4:    400ms;
}

/* ============================================================
   Semantic typography (use these in components)
   ============================================================ */
html { font-family: var(--font-sans); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.bw-eyebrow {
    font: 600 var(--fs-xs)/1.2 var(--font-sans);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--fg-4);
}
.bw-h1 {
    font: 800 var(--fs-5xl)/var(--lh-tight) var(--font-sans);
    letter-spacing: var(--ls-hero);
    color: var(--fg-1);
}
.bw-h2 {
    font: 700 var(--fs-3xl)/var(--lh-snug) var(--font-sans);
    letter-spacing: var(--ls-tight);
    color: var(--fg-1);
}
.bw-h3 {
    font: 600 var(--fs-xl)/var(--lh-snug) var(--font-sans);
    letter-spacing: var(--ls-normal);
    color: var(--fg-1);
}
.bw-h4 {
    font: 600 var(--fs-base)/var(--lh-snug) var(--font-sans);
    color: var(--fg-1);
}
.bw-body {
    font: 400 var(--fs-base)/var(--lh-normal) var(--font-sans);
    color: var(--fg-3);
}
.bw-body-sm {
    font: 400 var(--fs-sm)/var(--lh-normal) var(--font-sans);
    color: var(--fg-3);
}
.bw-label {
    font: 500 var(--fs-xs)/1.3 var(--font-sans);
    color: var(--fg-4);
}
.bw-num-hero {
    font: 800 var(--fs-7xl)/0.95 var(--font-sans);
    letter-spacing: var(--ls-hero);
    font-variant-numeric: tabular-nums;
    color: var(--fg-1);
}
.bw-num {
    font: 600 var(--fs-2xl)/1.1 var(--font-sans);
    letter-spacing: var(--ls-tight);
    font-variant-numeric: tabular-nums;
    color: var(--fg-1);
}
.bw-mono {
    font: 400 var(--fs-sm)/var(--lh-normal) var(--font-mono);
    color: var(--fg-3);
}