/*
* variables.css
* Centralised variables for colors, typography, and spacing to ensure consistency
* and scalability across the entire project.
*/

:root {
    /* Green Shades */
    --green-50 : #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-300: #86efac;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;
    --green-800: #166534;
    --green-900: #14532d;
    --green-950: #052e16;

    /* Red Shades */
    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-300: #fca5a5;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --red-900: #7f1d1d;
    --red-950: #450a0a;

    /* Grey Shades */
    --grey-50 : #f9fafb;
    --grey-100: #f3f4f6;
    --grey-200: #e5e7eb;
    --grey-300: #d1d5db;
    --grey-400: #9ca3af;
    --grey-500: #6b7280;
    --grey-600: #4b5563;
    --grey-700: #374151;
    --grey-800: #1f2937;
    --grey-900: #111827;
    --grey-950: #030712;

    /* Blue Shades (optional for accents) */
    --blue-100: #d0ebff;
    --blue-200: #a5d8ff;
    --blue-300: #74c0fc;
    --blue-400: #4dabf7;
    --blue-500: #339af0;
    --blue-600: #228be6;
    --blue-700: #1c7ed6;
    --blue-800: #1971c2;
    --blue-900: #1864ab;

    /* Backgrounds */
    --background-light: var(--grey-50);
    --background-hover: var(--grey-100);
    --background-complete: #e8f5e9;

    /* Borders */
    --border-color: #dcdcdc;
    --border-radius-sm: 5px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-width-thin: 1px;
    --border-width-thick: 2px;

    /* Accent Color */
    --accent-color: var(--green-500);
    --accent-color-hover: var(--green-700);

    /* Box Shadows */
    --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --box-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.15);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.16);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.2);

    /* Typography */
    --font-family-base: 'Arial', sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 20px;
    --font-size-xl: 22px;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --line-height-base: 1.5;

    /* Text Colors */
    --text-primary: var(--grey-900);
    --text-muted: var(--grey-500);
    --text-light: var(--grey-50);

    /* Button Styles */
    --button-primary-bg: var(--green-600);
    --button-primary-bg-hover: var(--green-700);
    --button-primary-text: var(--grey-50);
    --button-reject-bg: var(--red-600);
    --button-reject-bg-hover: var(--red-700);

    /* Progress Bar */
    --progress-bar-bg: var(--grey-500);
    --progress-bar-fill: var(--green-600);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Disabled States */
    --disabled-bg: var(--grey-300);
}

/* ─── SURFACES ──────────────────────────────────────────────────────────────
   Named separately from --background-light because a page and a card on it are
   the same colour in light mode and must not be in dark mode: without this, a
   card vanishes into the page as soon as the lights go out. */
:root {
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunken: var(--grey-100);
}

/* ─── DARK MODE ─────────────────────────────────────────────────────────────
   The standard app was built light and stays light by default; this block is
   what the toggle in the profile menu switches on. Only the semantic tokens are
   redefined - the palette scales above are left alone, so --green-600 still
   means the same green and anything already written against a token follows
   without being touched.

   The greys do not simply reverse. --grey-950 as a page background is too close
   to black to show elevation, so the page sits at 900 and cards lift to 800,
   which keeps the card-on-page relationship that light mode gets for free.    */
:root[data-theme='dark'] {
    --background-light: var(--grey-900);
    --background-hover: var(--grey-700);
    --background-complete: #14311c;

    --surface: var(--grey-800);
    --surface-raised: var(--grey-700);
    --surface-sunken: var(--grey-950);

    --border-color: var(--grey-700);

    --text-primary: var(--grey-50);
    --text-muted: var(--grey-400);

    /* Accents lighten, because the 600-weight greens chosen to sit on white are
       too dark to read against a dark page. */
    --accent-color: var(--green-400);
    --accent-color-hover: var(--green-300);
    --button-primary-bg: var(--green-600);
    --button-primary-bg-hover: var(--green-500);
    --progress-bar-bg: var(--grey-700);
    --progress-bar-fill: var(--green-500);

    --disabled-bg: var(--grey-700);

    /* Shadows read as depth on white by darkening the page. On a dark page that
       does nothing, so they deepen to stay visible at all. */
    --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --box-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.65);
}