/* ============================================================
   PeachCut Design System
   Based on Osmo Supply (osmo.supply) dark theme
   Fluid scaling — all values in em, scales with viewport
   ============================================================ */

/* --- Fonts ---
   Loaded via <link> in base.html for non-blocking fetch.
   Fallback: system fonts defined in --font-body.
*/

/* ============================================================
   Responsive Fluid Scaling System
   ============================================================ */

:root {
    --size-unit: 16;
    --size-container-ideal: 1440;
    --size-container-min: 992px;
    --size-container-max: 1920px;
    --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
    --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

@media screen and (max-width: 991px) {
    :root {
        --size-container-ideal: 834;
        --size-container-min: 768px;
        --size-container-max: 991px;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --size-container-ideal: 390;
        --size-container-min: 480px;
        --size-container-max: 767px;
    }
}

@media screen and (max-width: 479px) {
    :root {
        --size-container-ideal: 390;
        --size-container-min: 320px;
        --size-container-max: 479px;
    }
}


/* ============================================================
   Design Tokens
   ============================================================ */

:root {
    /* Typography — easy to swap later */
    --font-body: 'Inter', Arial, sans-serif;
    --font-heading: 'Inter', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Font sizes (em) */
    --text-xxs: 0.625em;    /* 10px */
    --text-xs: 0.75em;      /* 12px */
    --text-sm: 0.8125em;    /* 13px */
    --text-base: 0.875em;   /* 14px — Osmo default */
    --text-md: 1em;          /* 16px */
    --text-l: 1.0625em;     /* 17px */
    --text-lg: 1.125em;     /* 18px */
    --text-xl: 1.25em;      /* 20px */
    --text-2xl: 1.5em;      /* 24px */
    --text-3xl: 1.875em;    /* 30px */
    --text-4xl: 2.25em;     /* 36px */

    /* Line heights */
    --leading-tight: 1.2;
    --leading-normal: 1.43;
    --leading-relaxed: 1.6;

    /* Font weights */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* --- Neutral scale (Osmo exact values, dark mode) --- */
    --neutral-100: #151313;  /* Page background */
    --neutral-200: #201D1D;  /* Surface / cards */
    --neutral-300: #2A2727;  /* Surface elevated / sidebar */
    --neutral-400: #312E2E;  /* Border subtle */
    --neutral-450: #393636;  /* Border */
    --neutral-475: #4F4C4C;  /* Border strong */
    --neutral-500: #817F7F;  /* Muted text / placeholders */
    --neutral-525: #B8B8B8;  /* Secondary text */
    --neutral-550: #D8D8D8;  /* Secondary text light */
    --neutral-600: #E1E1E1;  /* Primary text muted */
    --neutral-700: #EAEAEA;  /* Primary text */
    --neutral-800: #F4F4F4;  /* Primary text bright */
    --neutral-900: #FFFFFF;  /* White / headings */

    /* --- Accent colors --- */
    --color-coral: #f84131;
    --color-coral-hover: #ff5545;
    --color-coral-muted: rgba(248, 65, 49, 0.15);
    --color-purple: #6840ff;
    --color-electric: #a1ff62;
    --color-electric-muted: rgba(161, 255, 98, 0.15);

    /* --- Semantic colors --- */
    --color-bg: var(--neutral-100);
    --color-surface: var(--neutral-200);
    --color-surface-hover: var(--neutral-300);
    --color-surface-elevated: var(--neutral-300);
    --color-border: var(--neutral-450);
    --color-border-subtle: var(--neutral-400);
    --color-text: var(--neutral-800);
    --color-text-secondary: var(--neutral-525);
    --color-text-muted: var(--neutral-500);
    --color-text-heading: var(--neutral-900);
    --color-accent: var(--color-coral);
    --color-accent-hover: var(--color-coral-hover);
    --color-success: var(--color-electric);
    --color-error: #d15252;
    --color-warning: #d07a4c;
    --color-danger: #d15252;
    --color-text-body: var(--neutral-700);
    --color-bg-alt: var(--neutral-300);
    --color-link: var(--color-coral);

    /* --- Spacing scale (em) --- */
    --space-xxs: 0.5em;      /* 8px */
    --space-xs: 0.75em;      /* 12px */
    --space-s: 1em;           /* 16px */
    --space-sm: 1.25em;       /* 20px */
    --space-m: 1.5em;         /* 24px */
    --space-l: 1.875em;       /* 30px */
    --space-xl: 2em;          /* 32px */
    --space-xxl: 2.5em;       /* 40px */
    --space-3xl: 3.75em;      /* 60px */
    --space-4xl: 5em;         /* 80px */

    /* --- Layout --- */
    --container-padding: 1.875em;   /* 30px */
    --sidebar-width: 19em;          /* 304px */
    --nav-height: 4.625em;          /* 74px */

    /* --- Component tokens (em) --- */
    --radius-xs: 0.25em;     /* 4px */
    --radius-sm: 0.375em;    /* 6px */
    --radius-md: 0.5em;      /* 8px */
    --radius-lg: 0.75em;     /* 12px */
    --radius-xl: 1em;        /* 16px */
    --radius-full: 9999px;

    --btn-height: 2.5em;     /* 40px */
    --input-height: 3em;     /* 48px */
    --stroke-weight: 1px;

    /* --- Shadows --- */
    --shadow-sm: 0 0.0625em 0.125em rgba(0, 0, 0, 0.3);
    --shadow-md: 0 0.25em 0.75em rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 0.5em 1.5em rgba(0, 0, 0, 0.4);

    /* --- Animations (Osmo exact) --- */
    --ease-default: cubic-bezier(0.625, 0.05, 0, 1);
    --duration-fast: 0.15s;
    --duration-normal: 0.3s;
    --duration-slow: 0.6s;
    --transition-default: var(--duration-normal) var(--ease-default);
    --transition-fast: var(--duration-fast) var(--ease-default);
}


/* ============================================================
   Reset & Base
   ============================================================ */

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    scroll-behavior: initial;
}

html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--size-font);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    letter-spacing: -0.01em;
    margin: 0;
    min-height: 100vh;
}

/* Minimal scrollbar — visible but unobtrusive */
body::-webkit-scrollbar,
body ::-webkit-scrollbar { width: 6px; height: 6px; }
body::-webkit-scrollbar-track,
body ::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb,
body ::-webkit-scrollbar-thumb { background: var(--neutral-400); border-radius: var(--radius-full); }
body::-webkit-scrollbar-thumb:hover,
body ::-webkit-scrollbar-thumb:hover { background: var(--neutral-475); }
html { scrollbar-width: thin; scrollbar-color: var(--neutral-400) transparent; }

::selection {
    background-color: rgba(129, 127, 127, 0.2);
    text-shadow: none;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover { color: var(--color-accent); }

svg {
    max-width: none;
    height: auto;
    box-sizing: border-box;
    vertical-align: middle;
}


/* ============================================================
   Typography
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-heading);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    margin: 0;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0; }

.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }


/* ============================================================
   Layout
   ============================================================ */

.container {
    max-width: var(--size-container);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.container.medium {
    max-width: calc(var(--size-container) * 0.85);
}

.container.small {
    max-width: calc(var(--size-container) * 0.7);
}

.container-narrow {
    max-width: 40em;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}


/* ============================================================
   Navbar
   ============================================================ */

.navbar {
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--container-padding);
    background-color: var(--color-surface);
    border-bottom: var(--stroke-weight) solid var(--color-border-subtle);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-brand {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text-heading);
    letter-spacing: -0.02em;
}

.navbar-nav {
    display: flex;
    align-items: center;
    gap: var(--space-m);
}


/* ============================================================
   Cards
   ============================================================ */

.card {
    background-color: var(--color-surface);
    border: var(--stroke-weight) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-m);
    transition: border-color var(--transition-fast),
                background-color var(--transition-fast);
}

.card:hover {
    border-color: var(--color-border);
    background-color: var(--color-surface-hover);
}

.card-flat {
    background-color: transparent;
    border: none;
    padding: var(--space-m);
}


/* ============================================================
   Buttons
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--btn-height);
    padding: 0 var(--space-m);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: -0.01em;
    line-height: 1;
    border-radius: var(--radius-md);
    border: var(--stroke-weight) solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    gap: var(--space-xxs);
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--neutral-900);
    border-color: var(--color-accent);
}

.btn-primary:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--neutral-900);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn-secondary:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-text-muted);
    color: var(--color-text-heading);
}

.btn-ghost {
    background-color: transparent;
    color: var(--color-text-secondary);
    border-color: transparent;
}

.btn-ghost:hover {
    color: var(--color-text-heading);
    background-color: var(--color-surface-hover);
}

.btn-sm {
    height: 2em;
    padding: 0 var(--space-s);
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
}

.btn-lg {
    height: 3em;
    padding: 0 var(--space-xl);
    font-size: var(--text-base);
}

.btn-block { width: 100%; }


/* ============================================================
   Inputs / Forms
   ============================================================ */

.input, .select, .file-input {
    height: var(--input-height);
    width: 100%;
    padding: 0 var(--space-s);
    background-color: var(--neutral-300);
    border: var(--stroke-weight) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    letter-spacing: -0.01em;
    outline: none;
    transition: border-color var(--transition-fast);
}

.input:focus, .select:focus {
    border-color: var(--color-accent);
}

.input::placeholder {
    color: var(--color-text-muted);
}

.input-sm {
    height: 2em;
    padding: 0 var(--space-xs);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
}

.label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xxs);
}

.label-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-xxs);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.form-group + .form-group {
    margin-top: var(--space-m);
}


/* ============================================================
   Badges
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.75em;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-full);
    letter-spacing: 0;
    white-space: nowrap;
}

.badge-success {
    background-color: var(--color-electric-muted);
    color: var(--color-success);
}

.badge-error {
    background-color: rgba(209, 82, 82, 0.15);
    color: var(--color-error);
}

.badge-warning {
    background-color: rgba(208, 122, 76, 0.15);
    color: var(--color-warning);
}

.badge-accent {
    background-color: var(--color-coral-muted);
    color: var(--color-accent);
}

.badge-neutral {
    background-color: var(--neutral-400);
    color: var(--color-text-secondary);
}


/* ============================================================
   Progress bar
   ============================================================ */

.progress {
    width: 100%;
    height: 0.25em;
    background-color: var(--neutral-400);
    border-radius: var(--radius-full);
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
}

.progress::-webkit-progress-bar {
    background-color: var(--neutral-400);
    border-radius: var(--radius-full);
}

.progress::-webkit-progress-value {
    background-color: var(--color-accent);
    border-radius: var(--radius-full);
    transition: width var(--transition-default);
}

.progress::-moz-progress-bar {
    background-color: var(--color-accent);
    border-radius: var(--radius-full);
}


/* ============================================================
   Stats
   ============================================================ */

.stats {
    display: flex;
    gap: var(--stroke-weight);
    background-color: var(--color-border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.stat {
    flex: 1;
    background-color: var(--color-surface);
    padding: var(--space-s) var(--space-m);
}

.stat-title {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xxs);
}

.stat-value {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-text-heading);
}


/* ============================================================
   Alerts
   ============================================================ */

.alert {
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.alert-success {
    background-color: var(--color-electric-muted);
    color: var(--color-success);
    border: var(--stroke-weight) solid rgba(161, 255, 98, 0.2);
}

.alert-error {
    background-color: rgba(209, 82, 82, 0.1);
    color: var(--color-error);
    border: var(--stroke-weight) solid rgba(209, 82, 82, 0.2);
}


/* ============================================================
   Utility classes
   ============================================================ */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-xxs { gap: var(--space-xxs); }
.gap-xs { gap: var(--space-xs); }
.gap-s { gap: var(--space-s); }
.gap-m { gap: var(--space-m); }
.gap-l { gap: var(--space-l); }
.gap-xl { gap: var(--space-xl); }
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-xxs { margin-top: var(--space-xxs); }
.mt-xs { margin-top: var(--space-xs); }
.mt-s { margin-top: var(--space-s); }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }
.mt-xxl { margin-top: var(--space-xxl); }
.mb-xxs { margin-bottom: var(--space-xxs); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-s { margin-bottom: var(--space-s); }
.mb-m { margin-bottom: var(--space-m); }
.mb-l { margin-bottom: var(--space-l); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-xxl { margin-bottom: var(--space-xxl); }