/* ==========================================================================
   variables.css — ★ THE HEART OF THE DESIGN ★
   --------------------------------------------------------------------------
   Every design token of the project lives here as a CSS variable.
   Change a value here and the WHOLE project changes — no other file
   needs to be touched for a redesign (or a future dark theme).

   RULES:
   - No hex color, font size or spacing value may appear outside this
     file — components always use var(--...).
   - FLAT design: no shadows, no gradients, no 3D. Depth is created
     only with thin borders (--color-border) and background tints.
   ========================================================================== */

:root {
    /* ----- Brand colors (Stripe-like) ------------------------------------ */
    --color-primary: #063F47;          /* main brand colour — buttons, links, accents */
    --color-primary-hover: #042F35;    /* darker shade for hover states */
    --color-primary-soft: #E9F1F2;     /* very light tint — selected/soft backgrounds */

    /* ----- Text colors ---------------------------------------------------- */
    --color-text: #30313d;             /* main body text */
    --color-text-muted: #6a7383;       /* secondary text, hints, footers */
    --color-text-invert: #ffffff;      /* text on primary/dark backgrounds */

    /* ----- Surfaces & borders (flat depth) ------------------------------- */
    --color-bg: #f6f8fa;               /* page background */
    --color-surface: #ffffff;          /* cards, panels, sidebar, slide-in */
    --color-surface-alt: #f6f8fa;      /* alternate rows, hover backgrounds */
    --color-border: #e6e8eb;           /* the ONE border color that creates depth */
    --color-border-strong: #d5d9de;    /* focused / emphasized borders */

    /* ----- State colors --------------------------------------------------- */
    --color-success: #217005;          /* success text */
    --color-success-bg: #e5f6de;       /* success badge/alert background */
    --color-danger: #df1b41;           /* errors, destructive actions */
    --color-danger-bg: #ffe7eb;        /* danger badge/alert background */
    --color-warning: #a86500;          /* warnings, pending states */
    --color-warning-bg: #fcf1d6;       /* warning badge/alert background */
    --color-info: #0055bc;             /* informational */
    --color-info-bg: #e0eefc;          /* info badge/alert background */

    /* ----- Typography (Google Font "Inter" — NEVER monospace) ------------ */
    --font-family: 'Inter', Arial, Helvetica, sans-serif;
    --font-size-xs: 12px;              /* fine print, badges */
    --font-size-sm: 13px;              /* secondary text, table cells */
    --font-size-base: 14px;            /* default UI text */
    --font-size-md: 16px;              /* leads, larger inputs */
    --font-size-lg: 20px;              /* section titles */
    --font-size-xl: 28px;              /* page titles */
    --font-size-hero: 40px;            /* landing hero title */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height: 1.55;

    /* ----- Spacing scale (used for all margins/paddings/gaps) ------------ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* ----- Radius (kept small — flat look) -------------------------------- */
    --radius-sm: 4px;                  /* badges, small controls */
    --radius: 6px;                     /* buttons, inputs, cards */
    --radius-lg: 10px;                 /* large panels */

    /* ----- Motion ---------------------------------------------------------- */
    --transition-fast: 120ms ease;     /* hovers */
    --transition: 200ms ease;          /* slide-in panel, drawers */

    /* ----- Layout ----------------------------------------------------------- */
    --sidebar-width: 248px;            /* dashboard sidebar (no header/logo inside) */
    --topbar-height: 56px;             /* topbar with bell */
    --content-max-width: 1080px;       /* max width of page content */
    --slidein-width-desktop: 50%;      /* slide-in panel width on desktop */

    /* ----- Breakpoints (for reference in media queries; CSS variables
             cannot be used inside @media — keep these values in sync):
             --bp-mobile:  640px
             --bp-tablet:  900px
             --bp-desktop: 1200px                                            */
}