/*
 * Design tokens — Takealot for Business UI redesign.
 * Source: docs/WIP Takealot-Identity Guideline-Colour Palette.pdf (brand colours)
 *         and the values already in use across auth.css / master.html (spacing, radii, shadows).
 * Both devs should build against these variables rather than hardcoding new values.
 * See docs/design-system.md for usage guidance.
 */

:root {
    /* --- Brand colours (from the official Colour Palette PDF) --- */
    --color-primary: #008cf0;
    --color-black: #000000;
    --color-white: #ffffff;

    /* Primary blue scale, lightest to darkest */
    --color-blue-100: #69b9f5;
    --color-blue-200: #32a5f5;
    --color-blue-300: var(--color-primary);
    --color-blue-400: #006edc;
    --color-blue-500: #005fdc;

    /* Web-specific brand colours */
    --color-blue-tint: #ebf0ff;
    --color-blue-grey: #6e7d82;

    /* Semantic colours, drawn from the brand's secondary palette.
       Not yet used on auth pages, defined here so status/validation
       states elsewhere in the app pull from the same brand family. */
    --color-success: #55c346;
    --color-danger: #e14646;
    --color-warning: #f59119;
    --color-info: #6ebee1;

    /* Neutral greyscale — NOT part of the brand guide (it defines no grey
       scale beyond black/white/blue-grey). These are functional values for
       borders, placeholders and disabled states; revisit if/when the brand
       guide adds an official neutral scale. */
    --color-neutral-100: #f5f5f5;
    --color-neutral-200: #eeeeee;
    --color-neutral-300: #dddddd;
    --color-neutral-400: #cccccc;
    --color-neutral-500: #999999;
    --color-neutral-600: #666666;
    --color-neutral-700: #333333;

    /* --- Typography ---
       Base face confirmed against the Axure prototype's actual computed
       styles (measured Lato-Regular on plain labels, weight 700 on
       headings) - not just eyeballed from a screenshot. */
    --font-family-base: "Lato", sans-serif;

    --font-size-sm: 0.85rem;
    --font-size-base: 0.9rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;

    --font-weight-regular: 400;
    --font-weight-semibold: 700;
    --font-weight-bold: 700;

    /* --- Spacing scale (4px base) --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 60px;

    /* --- Borders & radii --- */
    --border-width: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;

    /* --- Shadows --- */
    --shadow-sm: 0 2px 8px rgba(20, 24, 36, 0.08);
    --shadow-md: 0 4px 16px rgba(20, 24, 36, 0.12);
    --shadow-focus: 0 0 0 3px rgba(0, 140, 240, 0.25);

    /* --- Motion --- */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
}