/* =========================================================
PROJECT: Walanda platform
FILE: variables.css
PATH: /src/styles/variables.css
MODULE: ui / design system
SCOPE: styling (global / component / page)
PURPOSE: defines the Walanda global design tokens
AUTHOR: Simasiku Nasilele
STANDARD: Walanda pro ui system
VERSION: 1.0.0
LAST UPDATED: 2026
========================================================= */
/* =========================================================
SECTION: variables
DESCRIPTION: root variables and theme tokens
========================================================= */

:root {
    --primary: #1FA78A;
    --primary-hover: #168F77;
    --background: #F4F7F8;
    --card: #FFFFFF;
    /* Subtle inset surface (segmented tracks, inputs, soft panels) — sits
       between the page background and white cards. */
    --surface: #EEF2F3;
    --text-dark: #2D3A3A;
    --muted: #6B7C7C;
    --border: #E6ECEC;
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.08);
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --container-width: 1200px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 56px;
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --font-base: "Inter", "Segoe UI", sans-serif;
    /* Fixed height for full-width rotating ad banners (top/middle/bottom) so
       cycling between ads never resizes the box and shifts the page/feed. */
    --ad-banner-h: 220px;
    /* Fixed height for stacked sidebar ad cards (fillSidebar) — the column
       packs as many of these as fit down to the centre's height. */
    --ad-card-h: 300px;

    /* Status colours — used by .pill, .register-status, banner cards,
       trader inventory pills, etc. Always use these tokens; never
       sprinkle the literal hex values across files. */
    --status-success-bg: rgba(31, 167, 138, 0.12);
    --status-success-fg: #177b67;
    --status-warning-bg: #fff3dd;
    --status-warning-fg: #b66e10;
    --status-info-bg: #e7f0ff;
    --status-info-fg: #2672d8;
    --status-danger-bg: #ffe9e7;
    --status-danger-fg: #c5544a;

    /* Workspace accents — used by role-workspace stat tiles, schedule
       action buttons, and dashboard status indicators where a single
       teal/amber/red palette isn't enough to differentiate channels.
       Always use these tokens; never sprinkle the literal hex values. */
    --accent-blue:        #1c86ff;
    --accent-blue-soft:   #1576f2;
    --accent-blue-bg:     #eef8ff;
    --accent-amber:       #ffb33e;
    --accent-amber-soft:  #ff9741;
    --accent-amber-bg:    #fff5e2;
    --accent-purple:      #8a63f6;
    --accent-purple-soft: #7350e6;
    --accent-purple-bg:   #f0ebff;

    /* Deep teal gradient stops for hero / "continue" feature cards. */
    --primary-deep:  #149a84;
    --primary-light: #52d3bd;

    /* Footer-band gradient stops. Use --footer-green for any green
       that has to match the footer exactly (e.g. anchor links inside
       legal checkboxes that reference the footer's "Walanda Terms"
       wording). Always reference the token, never the hex literal. */
    --footer-green-top:    #3aa49b;
    --footer-green:        #2f8f83;
}
/* =========================================================
END OF FILE
FILE: variables.css
PATH: /src/styles/variables.css
MODULE: ui / design system
STATUS: stable
MAINTAINED BY: Walanda core system
COPYRIGHT: © 2026 Walanda Inc. Ltd. All rights reserved.
========================================================= */