/* ========== Design system (aligned with HeroUI theme) ========== */
:root {
    /* Colors – mapped to frontend HeroUI palette from tpm-tool-frontend-dev/src/index.css */
    --color-primary: #5d7f99;
    --color-primary-hover: #23445d;
    --color-secondary: #b85450;
    --color-success: #82b366;
    --color-warning: #d89a00;
    --color-error: #ef5350;
    --color-error-bg: #fee2e2;

    /* Neutral scale tuned to match frontend background/borders */
    --neutral-50: #f5f5f5;
    --neutral-100: #ebeff2;
    --neutral-200: #e6e6e6;
    --neutral-300: #d7d7d7;
    --neutral-400: #b0b0b0;
    --neutral-500: #7a7a7a;
    --neutral-600: #5b5b5b;
    --neutral-700: #444444;
    --neutral-800: #333333;
    --neutral-900: #23445d;

    /* Typography (mobile-first) – keep sizes, align font family in body */
    --font-display: 2.25rem;   /* 36px */
    --font-display-line: 2.5rem;
    --font-h1: 1.875rem;       /* 30px */
    --font-h1-line: 2.25rem;
    --font-h2: 1.5rem;         /* 24px */
    --font-h2-line: 2rem;
    --font-h3: 1.25rem;        /* 20px */
    --font-h3-line: 1.75rem;
    --font-body: 0.875rem;     /* 14px */
    --font-body-line: 1.375rem;
    --font-small: 0.875rem;    /* 14px */
    --font-small-line: 1.25rem;

    /* Spacing (4px grid) */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-12: 3rem;     /* 48px */

    /* Radius – based on frontend --radius (=0.4rem) and derived values */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;

    /* Shadows – closer to HeroUI card shadows */
    --shadow-card: 0 8px 16px -12px rgba(0, 0, 0, 0.15), 0 4px 8px -8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 10px 20px -12px rgba(0, 0, 0, 0.18), 0 6px 12px -10px rgba(0, 0, 0, 0.12);
    --shadow-input: 0 8px 20px rgba(0, 0, 0, 0.06);
    --shadow-input-focus: 0 0 0 1px rgba(93, 127, 153, 0.75), 0 0 0 4px rgba(93, 127, 153, 0.16);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto Condensed', 'Inter', 'Segoe UI', sans-serif;
    font-size: var(--font-body);
    line-height: var(--font-body-line);
    color: var(--neutral-900);
    background:
        radial-gradient(ellipse 80% 50% at 20% 10%, rgba(37, 99, 235, 0.06), transparent 50%),
        radial-gradient(ellipse 60% 40% at 85% 5%, rgba(16, 185, 129, 0.08), transparent 45%),
        radial-gradient(ellipse 50% 30% at 50% 90%, rgba(99, 102, 241, 0.04), transparent 40%),
        var(--neutral-50);
    height: 100vh;
    overflow: hidden;
}