/* MyJamanot design tokens — Warm Marketplace (Red/Yellow/Cream).
   Every color/spacing/shape value used anywhere in components.css or a view's
   inline style should trace back to a variable defined here. Nothing else in
   the CSS tree should hardcode a hex value or a raw px spacing number.

   Token NAMES are kept from the previous Navy/Emerald system deliberately —
   every view/component references these names, not raw hex values, so this
   file alone re-skins the entire site (buyer/seller/admin dashboards, every
   marketing page) without touching a single view. Only the underlying
   hex VALUES changed. Semantic status colors (success/danger/warning/info)
   are intentionally left as their own distinct green/red/amber/blue set —
   not remapped to the new brand red — so a "danger" alert never reads as
   just another brand-colored element. */

:root {
    /* Base / neutrals — an ink-brown scale replacing navy, anchored on the
       new brand's --ink (#3A2E22) at the 900 step */
    --navy-950: #241b12;
    --navy-900: #3a2e22;
    --navy-800: #4a3c2c;
    --navy-700: #5c4b38;
    --ink-900: #3a2e22;
    --gray-600: #8a7a68;
    --gray-500: #9c8d7c;
    --gray-400: #b5a890;
    --gray-200: #f0e1c4;
    --gray-150: #f5e9d0;
    --gray-100: #fbf0da;
    --gray-50: #fff8ec;
    --white: #ffffff;

    /* Brand / accent — warm red as primary (replaces emerald) */
    --emerald-700: #c2431d;
    --emerald-600: #e4572e;
    --emerald-500: #eb7355;
    --emerald-50: #fdece6;

    /* Semantic — deliberately its own set, not brand-derived (see note above) */
    --success-text: #067a46;
    --success-bg: #e8f7ef;
    --success-border: #bfe6d1;
    --danger-text: #b42318;
    --danger-bg: #fef3f2;
    --danger-border: #fecdca;
    --warning-text: #b54708;
    --warning-bg: #fffaeb;
    --warning-border: #fedf89;
    --info-text: #175cd3;
    --info-bg: #eff8ff;
    --info-border: #b2ddff;

    /* Premium accent — warm yellow (replaces gold), used sparingly
       (Verified/Trusted badges, premium CTAs, the odd highlight) */
    --gold-600: #e39900;
    --gold-bg: #ffe7a8;

    /* Elevation / shape — rounder, friendlier than the old fintech-flat system */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --shadow-sm: 0 1px 2px rgba(58, 46, 34, .06);
    --shadow-md: 0 8px 20px -8px rgba(58, 46, 34, .16);
    --shadow-lg: 0 20px 40px -20px rgba(58, 46, 34, .22);

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

    /* Typography scale */
    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    /* Font families — loaded via Google Fonts <link> in layouts/main.php and
       layouts/admin.php. Bengali text falls back to the browser's native
       Bengali font within each stack (Noto Sans Bengali is NOT loaded to
       keep the added network request to just the two Latin faces actually
       needed for the new look; Bengali glyphs already render fine via the
       system fallback, same as the previous system-font-stack did). */
    --font-display: 'Baloo 2', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Layout */
    --header-height: 68px;
    --sidebar-width: 248px;
    --content-max: 1200px;

    /* Motion — short and purposeful only, per "avoid unnecessary animation" */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;

    /* z-index scale */
    --z-drawer: 60;
    --z-modal: 70;
    --z-toast: 80;
}