/**
 * BuzzRFP Design Tokens
 *
 * Grayscale-first design system inspired by monitorworkspace.com
 * All sizing, spacing, and color decisions flow from these tokens.
 * Tailwind CDN config in base.html references these CSS custom properties.
 *
 * Density control: change --density-base to scale everything.
 *   13px = compact  |  14px = default  |  15px = comfortable  |  16px = spacious
 */

:root {
    /* ============================================
       DENSITY CONTROL
       ============================================ */
    --density-base: 13px;  /* Root font-size — all rem values scale from this */

    /* ============================================
       FONT FAMILIES
       ============================================ */
    --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "SF Mono", "Cascadia Code", "Consolas", monospace;

    /* ============================================
       FONT SIZES  (rem = relative to --density-base)
       ============================================ */
    --text-xs:   0.769rem;   /* 10px @ 13px base */
    --text-sm:   0.846rem;   /* 11px @ 13px base */
    --text-base: 1rem;       /* 13px @ 13px base */
    --text-lg:   1.077rem;   /* 14px @ 13px base */
    --text-xl:   1.154rem;   /* 15px @ 13px base */
    --text-2xl:  1.385rem;   /* 18px @ 13px base */
    --text-3xl:  1.538rem;   /* 20px @ 13px base */
    --text-4xl:  1.846rem;   /* 24px @ 13px base */

    /* ============================================
       LINE HEIGHTS
       ============================================ */
    --leading-tight:   1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    /* ============================================
       FONT WEIGHTS
       ============================================ */
    --weight-normal:    400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-extrabold: 800;

    /* ============================================
       GRAYSCALE PALETTE  (neutral backbone)
       ============================================ */
    --color-white:    #ffffff;
    --color-grey-50:  #fafafa;
    --color-grey-100: #f5f5f5;
    --color-grey-200: #e5e5e5;
    --color-grey-300: #d4d4d4;
    --color-grey-400: #a3a3a3;
    --color-grey-500: #737373;
    --color-grey-600: #525252;
    --color-grey-700: #404040;
    --color-grey-800: #262626;
    --color-grey-900: #171717;
    --color-black:    #0a0a0a;

    /* ============================================
       SEMANTIC COLORS  (mapped from grey + status)
       ============================================ */
    /* Backgrounds */
    --color-bg:            var(--color-white);
    --color-bg-subtle:     var(--color-grey-50);
    --color-bg-muted:      var(--color-grey-100);
    --color-surface:       var(--color-white);
    --color-surface-hover: var(--color-grey-50);

    /* Borders */
    --color-border:        var(--color-grey-200);
    --color-border-strong: var(--color-grey-300);

    /* Text */
    --color-text:           var(--color-grey-900);
    --color-text-secondary: var(--color-grey-600);
    --color-text-muted:     var(--color-grey-400);
    --color-text-inverse:   var(--color-white);

    /* Accent (dark — used for primary buttons, active states) */
    --color-accent:       var(--color-grey-900);
    --color-accent-hover: var(--color-grey-700);

    /* Status */
    --color-danger:     #b91c1c;
    --color-danger-bg:  #fef2f2;
    --color-success:    #15803d;
    --color-success-bg: #f0fdf4;
    --color-warning:    #a16207;
    --color-warning-bg: #fefce8;
    --color-info:       #1d4ed8;
    --color-info-bg:    #eff6ff;

    /* ============================================
       BRAND COLORS  (BuzzRFP identity — used sparingly)
       ============================================ */
    --brand-navy:  #112E51;
    --brand-blue:  #205493;
    --brand-teal:  #3B82A0;
    --brand-gold:  #FBBF24;
    --brand-red:   #B51D09;

    /* Sidebar uses brand navy */
    --sidebar-bg:        #1E3A5F;
    --sidebar-text:      rgba(255, 255, 255, 0.7);
    --sidebar-text-active: #ffffff;
    --sidebar-border:    rgba(255, 255, 255, 0.1);
    --sidebar-hover:     rgba(255, 255, 255, 0.1);
    --sidebar-active-bg: var(--brand-teal);

    /* ============================================
       SPACING  (4px base unit)
       ============================================ */
    --space-0:  0;
    --space-1:  0.25rem;   /*  3.25px @ 13px */
    --space-2:  0.5rem;    /*  6.5px  */
    --space-3:  0.75rem;   /*  9.75px */
    --space-4:  1rem;      /* 13px    */
    --space-5:  1.25rem;   /* 16.25px */
    --space-6:  1.5rem;    /* 19.5px  */
    --space-8:  2rem;      /* 26px    */
    --space-10: 2.5rem;    /* 32.5px  */
    --space-12: 3rem;      /* 39px    */
    --space-16: 4rem;      /* 52px    */

    /* ============================================
       BORDER RADIUS
       ============================================ */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:  12px;
    --radius-full: 9999px;

    /* ============================================
       SHADOWS
       ============================================ */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:  0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-card:       0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* ============================================
       TRANSITIONS
       ============================================ */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;

    /* ============================================
       LAYOUT DIMENSIONS
       ============================================ */
    --nav-height:       3.5rem;     /* 45.5px @ 13px — compact nav */
    --sidebar-width:    240px;
    --sidebar-width-min: 80px;
    --content-max-width: 1600px;    /* Wide content area */
    --content-padding:   var(--space-6);

    /* ============================================
       Z-INDEX SCALE
       ============================================ */
    --z-sidebar:  40;
    --z-nav:      50;
    --z-overlay:  30;
    --z-modal:    60;
    --z-toast:    70;
}

/* ============================================
   ROOT FONT SIZE (density control)
   ============================================ */
html {
    font-size: var(--density-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   SCROLLBAR STYLING (thin, grayscale)
   ============================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--color-grey-100);
}

::-webkit-scrollbar-thumb {
    background: var(--color-grey-300);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-grey-400);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-grey-300) var(--color-grey-100);
}