/*
 * Design tokens (BRD 40.30). Every component in the application reads from these
 * custom properties - no component defines a raw colour, spacing or radius value.
 */

:root {
    /* --- Primary: deep indigo / violet (BRD 40.2) -------------------------- */
    --primary-900: #1b1836;
    --primary-800: #2b2260;
    --primary-700: #5b34c7;
    --primary-600: #6d42e0;
    --primary-500: #8261e8;
    --primary-100: #e6dffb;
    --primary-50:  #f4effe;

    /* Navigation and header surfaces, kept apart from the button scale so the
       chrome can be dark while primary actions stay vivid. */
    --sidebar-bg:      #171a33;
    --sidebar-bg-deep: #12142a;
    --header-from:     #5b34c7;
    --header-to:       #7a4fe0;

    /* --- Premium accent: champagne gold. Accent only, never dominant. ----- */
    --gold-700: #856620;
    --gold-600: #ae892c;
    --gold-500: #c9a227;
    --gold-100: #f5ebcd;
    --gold-50:  #fbf6e9;

    /* --- Semantic (BRD 40.2). Always paired with a label or icon. --------- */
    --success-700: #1a6b45;
    --success-600: #228555;
    --success-100: #d8f0e4;
    --warning-700: #97600b;
    --warning-600: #b8790f;
    --warning-100: #fbecd2;
    --error-700:   #a12b2b;
    --error-600:   #c53a3a;
    --error-100:   #fadedd;
    --info-700:    #1f5f92;
    --info-600:    #2a77b4;
    --info-100:    #d9ebf8;
    --neutral-700: #4a5462;
    --neutral-600: #5f6b7a;
    --neutral-100: #e8ebef;

    /* --- Greys ------------------------------------------------------------ */
    --grey-900: #16191d;
    --grey-800: #24282e;
    --grey-700: #3b414a;
    --grey-600: #5a626e;
    --grey-500: #676f7b;
    --grey-400: #a4acb8;
    --grey-300: #cbd1d9;
    --grey-200: #e2e6eb;
    --grey-100: #f0f2f5;
    --grey-50:  #f7f8fa;
    --white:    #ffffff;

    /* --- Surfaces --------------------------------------------------------- */
    --surface-page:    #f4f5fa;
    --surface-raised:  var(--white);
    --surface-sunken:  var(--grey-100);
    --border-subtle:   var(--grey-200);
    --border-strong:   var(--grey-300);

    --text-primary:    var(--grey-900);
    --text-secondary:  var(--grey-600);
    --text-muted:      var(--grey-500);
    --text-on-dark:    #e9edf2;
    --text-on-dark-muted: #9aa8b8;

    /* --- Typography (BRD 40.3) -------------------------------------------- */
    --font-sans: "Inter", "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-numeric: var(--font-sans);

    --text-display: 1.75rem;  /* 28px - dashboard KPI numbers */
    --text-h1:      1.375rem; /* 22px */
    --text-h2:      1.125rem; /* 18px */
    --text-h3:      1rem;     /* 16px */
    --text-body-lg: 0.9375rem;/* 15px */
    --text-body:    0.8125rem;/* 13px */
    --text-small:   0.75rem;  /* 12px */
    --text-caption: 0.6875rem;/* 11px */

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    --leading-tight: 1.25;
    --leading-normal: 1.5;

    /* --- Spacing: 4px scale (BRD 40.4) ------------------------------------ */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  12px;
    --space-lg:  16px;
    --space-xl:  20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 40px;
    --space-5xl: 48px;
    --space-6xl: 64px;

    /* --- Radius (BRD 40.5) ------------------------------------------------ */
    --radius-sm:    6px;
    --radius-input: 8px;
    --radius-card:  12px;
    --radius-lg:    16px;
    --radius-pill:  999px;

    /* --- Elevation (BRD 40.6): subtle, three levels ----------------------- */
    --elevation-1: 0 1px 2px rgba(27, 24, 54, 0.05), 0 1px 3px rgba(27, 24, 54, 0.04);
    --elevation-2: 0 2px 4px rgba(27, 24, 54, 0.05), 0 4px 14px rgba(27, 24, 54, 0.07);
    --elevation-3: 0 8px 16px rgba(27, 24, 54, 0.10), 0 16px 40px rgba(27, 24, 54, 0.12);

    --focus-ring: 0 0 0 3px rgba(109, 66, 224, 0.35);

    /* --- Motion (BRD 40.29) ----------------------------------------------- */
    --motion-fast: 150ms;
    --motion-base: 200ms;
    --motion-slow: 250ms;
    --easing: cubic-bezier(0.2, 0, 0.2, 1);

    /* --- Shell ------------------------------------------------------------ */
    --sidebar-width: 212px;
    --sidebar-width-collapsed: 56px;
    --header-height: 46px;
    --footer-height: 32px;

    /* Control heights, so inputs and buttons stay on one compact scale. */
    --control-height: 32px;
    --control-height-sm: 27px;
    --control-height-lg: 38px;
}

/* BRD 40.29: honour the operating system's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}