/* ==========================================================================
   NerdBerry CRM Design System — Design Tokens
   --------------------------------------------------------------------------
   The single source of truth for every value used by the design system.
   Nothing else in the system may hard-code a colour, radius, shadow, spacing
   step, duration or font size. If you need a new value, add a token here.

   Naming: --nb-<category>-<name>
   Themes: light is defined on :root. Dark overrides only the *semantic*
           tokens (surface/text/border/state), never the raw palette.
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       1. RAW PALETTE  (never used directly in components — map to semantics)
       ---------------------------------------------------------------------- */

    /* Brand — NerdBerry berry-violet */
    --nb-brand-50: #fcf4ff;
    --nb-brand-100: #f7e7fe;
    --nb-brand-200: #efcffc;
    --nb-brand-300: #e2aaf8;
    --nb-brand-400: #ce77f1;
    --nb-brand-500: #b747df;
    --nb-brand-600: #9c2bc0;
    --nb-brand-700: #82219e;
    --nb-brand-800: #6b1d81;
    --nb-brand-900: #581a6a;
    --nb-brand-950: #3a0748;

    /* Neutral — cool grey ramp */
    --nb-neutral-0: #ffffff;
    --nb-neutral-25: #fcfcfd;
    --nb-neutral-50: #f9fafb;
    --nb-neutral-100: #f2f4f7;
    --nb-neutral-150: #eaecf0;
    --nb-neutral-200: #e4e7ec;
    --nb-neutral-300: #d0d5dd;
    --nb-neutral-400: #98a2b3;
    --nb-neutral-500: #667085;
    --nb-neutral-600: #475467;
    --nb-neutral-700: #344054;
    --nb-neutral-800: #1d2939;
    --nb-neutral-900: #101828;
    --nb-neutral-950: #0c111d;

    /* Semantic palette ramps */
    --nb-green-50: #ecfdf3;
    --nb-green-100: #d1fadf;
    --nb-green-200: #a6f4c5;
    --nb-green-500: #12b76a;
    --nb-green-600: #039855;
    --nb-green-700: #027a48;
    --nb-green-900: #054f31;

    --nb-amber-50: #fffaeb;
    --nb-amber-100: #fef0c7;
    --nb-amber-200: #fedf89;
    --nb-amber-500: #f79009;
    --nb-amber-600: #dc6803;
    --nb-amber-700: #b54708;
    --nb-amber-900: #7a2e0e;

    --nb-red-50: #fef3f2;
    --nb-red-100: #fee4e2;
    --nb-red-200: #fecdca;
    --nb-red-500: #f04438;
    --nb-red-600: #d92d20;
    --nb-red-700: #b42318;
    --nb-red-900: #7a271a;

    --nb-blue-50: #f0f9ff;
    --nb-blue-100: #e0f2fe;
    --nb-blue-200: #b9e6fe;
    --nb-blue-500: #0ba5ec;
    --nb-blue-600: #0086c9;
    --nb-blue-700: #026aa2;
    --nb-blue-900: #065986;

    /* Extra hues used only by charts / avatars / tag colours */
    --nb-teal-500: #15b79e;
    --nb-teal-600: #0e9384;
    --nb-indigo-500: #6172f3;
    --nb-indigo-600: #444ce7;
    --nb-pink-500: #ee46bc;
    --nb-pink-600: #dd2590;
    --nb-orange-500: #ef6820;
    --nb-orange-600: #e04f16;

    /* ----------------------------------------------------------------------
       2. SPACING  (4px base grid)
       ---------------------------------------------------------------------- */
    --nb-space-0: 0px;
    --nb-space-px: 1px;
    --nb-space-1: 4px;
    --nb-space-2: 8px;
    --nb-space-3: 12px;
    --nb-space-4: 16px;
    --nb-space-5: 24px;
    --nb-space-6: 32px;
    --nb-space-7: 40px;
    --nb-space-8: 48px;
    --nb-space-9: 64px;
    --nb-space-10: 80px;

    /* ----------------------------------------------------------------------
       3. RADII
       ---------------------------------------------------------------------- */
    --nb-radius-xs: 4px;
    --nb-radius-sm: 6px;
    --nb-radius-md: 8px;
    --nb-radius-lg: 10px;
    --nb-radius-xl: 14px;
    --nb-radius-2xl: 18px;
    --nb-radius-full: 9999px;

    /* ----------------------------------------------------------------------
       4. TYPOGRAPHY
       ---------------------------------------------------------------------- */
    --nb-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --nb-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    /* Compact-but-comfortable SaaS scale. Nothing above 22px in the app UI. */
    --nb-text-2xs: 10px;
    --nb-text-xs: 11px;
    --nb-text-sm: 12px;
    --nb-text-base: 13px;
    --nb-text-md: 14px;
    --nb-text-lg: 15px;
    --nb-text-xl: 17px;
    --nb-text-2xl: 20px;
    --nb-text-3xl: 24px;
    --nb-text-4xl: 30px;

    --nb-leading-none: 1;
    --nb-leading-tight: 1.25;
    --nb-leading-snug: 1.4;
    --nb-leading-normal: 1.55;
    --nb-leading-relaxed: 1.7;

    --nb-weight-normal: 400;
    --nb-weight-medium: 500;
    --nb-weight-semibold: 600;
    --nb-weight-bold: 700;

    --nb-tracking-tight: -0.014em;
    --nb-tracking-snug: -0.008em;
    --nb-tracking-normal: 0;
    --nb-tracking-wide: 0.02em;
    --nb-tracking-caps: 0.06em;

    /* ----------------------------------------------------------------------
       5. SEMANTIC SURFACES / TEXT / BORDERS  (light theme)
       ---------------------------------------------------------------------- */

    /* Surfaces */
    --nb-surface-app: var(--nb-neutral-50);       /* the page canvas          */
    --nb-surface-raised: var(--nb-neutral-0);     /* cards, tables, panels    */
    --nb-surface-sunken: var(--nb-neutral-100);   /* wells, inset areas       */
    --nb-surface-nav: #fbfbfc;                    /* sidebar                  */
    --nb-surface-topbar: var(--nb-neutral-0);
    --nb-surface-overlay: var(--nb-neutral-0);    /* modals, drawers, popovers*/
    --nb-surface-hover: var(--nb-neutral-100);
    --nb-surface-active: var(--nb-neutral-150);
    --nb-surface-selected: var(--nb-brand-50);
    --nb-surface-disabled: var(--nb-neutral-100);
    --nb-surface-inverse: var(--nb-neutral-900);
    --nb-surface-skeleton: var(--nb-neutral-150);

    /* Text */
    --nb-text-primary: var(--nb-neutral-900);
    --nb-text-secondary: var(--nb-neutral-600);
    --nb-text-muted: var(--nb-neutral-500);
    --nb-text-subtle: var(--nb-neutral-400);
    --nb-text-disabled: var(--nb-neutral-400);
    --nb-text-inverse: var(--nb-neutral-0);
    --nb-text-link: var(--nb-brand-700);
    --nb-text-link-hover: var(--nb-brand-800);
    --nb-text-on-brand: #ffffff;

    /* Borders */
    --nb-border-subtle: var(--nb-neutral-150);    /* row separators           */
    --nb-border-default: var(--nb-neutral-200);   /* cards, inputs            */
    --nb-border-strong: var(--nb-neutral-300);    /* hovered inputs           */
    --nb-border-inverse: rgba(255, 255, 255, 0.14);
    --nb-border-brand: var(--nb-brand-600);

    /* Brand / accent semantics */
    --nb-accent: var(--nb-brand-600);
    --nb-accent-hover: var(--nb-brand-700);
    --nb-accent-active: var(--nb-brand-800);
    --nb-accent-subtle: var(--nb-brand-50);
    --nb-accent-subtle-hover: var(--nb-brand-100);
    --nb-accent-border: var(--nb-brand-200);
    --nb-accent-text: var(--nb-brand-700);

    /* Status semantics — text / subtle background / subtle border */
    --nb-success: var(--nb-green-600);
    --nb-success-text: var(--nb-green-700);
    --nb-success-bg: var(--nb-green-50);
    --nb-success-border: var(--nb-green-200);

    --nb-warning: var(--nb-amber-600);
    --nb-warning-text: var(--nb-amber-700);
    --nb-warning-bg: var(--nb-amber-50);
    --nb-warning-border: var(--nb-amber-200);

    --nb-danger: var(--nb-red-600);
    --nb-danger-text: var(--nb-red-700);
    --nb-danger-bg: var(--nb-red-50);
    --nb-danger-border: var(--nb-red-200);

    --nb-info: var(--nb-blue-600);
    --nb-info-text: var(--nb-blue-700);
    --nb-info-bg: var(--nb-blue-50);
    --nb-info-border: var(--nb-blue-200);

    --nb-neutral-text: var(--nb-neutral-700);
    --nb-neutral-bg: var(--nb-neutral-100);
    --nb-neutral-border: var(--nb-neutral-200);

    /* Focus ring — used by every interactive element, never removed */
    --nb-focus-ring-color: color-mix(in srgb, var(--nb-brand-600) 42%, transparent);
    --nb-focus-ring-width: 3px;
    --nb-focus-ring: 0 0 0 var(--nb-focus-ring-width) var(--nb-focus-ring-color);

    /* ----------------------------------------------------------------------
       6. ELEVATION
       ---------------------------------------------------------------------- */
    --nb-shadow-none: none;
    --nb-shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    --nb-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --nb-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
    --nb-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
    --nb-shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.1), 0 8px 8px -4px rgba(16, 24, 40, 0.04);
    --nb-shadow-drawer: -12px 0 32px -8px rgba(16, 24, 40, 0.14);
    --nb-shadow-inset: inset 0 1px 2px rgba(16, 24, 40, 0.06);

    /* ----------------------------------------------------------------------
       7. LAYERING  (z-index scale — no magic numbers anywhere else)
       ---------------------------------------------------------------------- */
    --nb-z-base: 1;
    --nb-z-sticky: 20;      /* sticky table headers                        */
    --nb-z-nav: 90;         /* sidebar                                     */
    --nb-z-topbar: 100;     /* app topbar                                  */
    --nb-z-dropdown: 1050;  /* matches Bootstrap 3 dropdown                */
    --nb-z-backdrop: 1200;
    --nb-z-drawer: 1210;
    --nb-z-modal: 1250;     /* above Bootstrap 3 modal (1050)              */
    --nb-z-palette: 1300;
    --nb-z-toast: 1400;
    --nb-z-tooltip: 1500;

    /* ----------------------------------------------------------------------
       8. MOTION
       ---------------------------------------------------------------------- */
    --nb-duration-instant: 80ms;
    --nb-duration-fast: 120ms;
    --nb-duration-base: 160ms;
    --nb-duration-slow: 240ms;
    --nb-duration-slower: 320ms;

    --nb-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --nb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --nb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --nb-transition-colors: color var(--nb-duration-fast) var(--nb-ease-out),
        background-color var(--nb-duration-fast) var(--nb-ease-out),
        border-color var(--nb-duration-fast) var(--nb-ease-out),
        box-shadow var(--nb-duration-fast) var(--nb-ease-out);

    /* ----------------------------------------------------------------------
       9. LAYOUT METRICS
       ---------------------------------------------------------------------- */
    --nb-sidebar-width: 244px;
    --nb-sidebar-width-collapsed: 60px;
    --nb-topbar-height: 52px;
    /* The app shell fills the available width: a CRM is dense tables,
       dashboards and record pages, none of which benefit from a reading
       measure, and capping it strands hundreds of pixels on wide monitors.
       Long-form forms opt in to `--nb-measure` via `.nb-content--measure`. */
    --nb-measure: 1100px;
    --nb-content-pad-x: var(--nb-space-5);
    --nb-content-pad-y: var(--nb-space-5);
    --nb-drawer-width: 460px;
    --nb-drawer-width-wide: 640px;

    /* Control sizing — one height language across every input and button */
    --nb-control-height-xs: 26px;
    --nb-control-height-sm: 30px;
    --nb-control-height-md: 34px;
    --nb-control-height-lg: 40px;
    --nb-control-pad-x: var(--nb-space-3);

    /* Table density */
    --nb-row-height: 40px;
    --nb-cell-pad-x: var(--nb-space-3);
    --nb-cell-pad-y: var(--nb-space-2);
}

/* ==========================================================================
   DARK THEME
   Only semantic tokens are re-pointed. Component CSS needs no dark rules.
   Applied via <body class="nb-theme-dark"> (set server-side + by theme.js so
   there is no flash), or by system preference when nb-theme-system is set.
   ========================================================================== */

.nb-theme-dark {
    --nb-surface-app: #0d1117;
    --nb-surface-raised: #151b24;
    --nb-surface-sunken: #10161e;
    --nb-surface-nav: #11171f;
    --nb-surface-topbar: #151b24;
    --nb-surface-overlay: #1a212b;
    --nb-surface-hover: #1e2631;
    --nb-surface-active: #253040;
    --nb-surface-selected: rgba(183, 71, 223, 0.14);
    --nb-surface-disabled: #1a212b;
    --nb-surface-inverse: var(--nb-neutral-100);
    --nb-surface-skeleton: #232c38;

    --nb-text-primary: #e6edf5;
    --nb-text-secondary: #a9b6c7;
    --nb-text-muted: #8494a8;
    --nb-text-subtle: #6b7b8f;
    --nb-text-disabled: #5b6a7d;
    --nb-text-inverse: var(--nb-neutral-900);
    --nb-text-link: var(--nb-brand-300);
    --nb-text-link-hover: var(--nb-brand-200);
    --nb-text-on-brand: #ffffff;

    --nb-border-subtle: #212a36;
    --nb-border-default: #2a3543;
    --nb-border-strong: #3a4859;
    --nb-border-inverse: rgba(0, 0, 0, 0.2);

    /* Filled-button surfaces. These are NOT ramp steps: they are solved for
       two constraints at once, because `.btn-primary` puts white text on them
       while they sit on the dark page.

         white label >= 4.5:1  (AA, and these labels are 12-13px)
         vs #151b24  >= 3.0:1  (AA non-text, so the button reads as a shape)

       The ramp cannot satisfy both — brand-500 gives the label only 4.22:1,
       brand-600 drops the shape to 2.90:1 — so these sit between the two.

       Note the direction: hover is *lighter* and active is *darker*. The
       previous values ran lighter on both (brand-400 / brand-300), which took
       the white label to 2.79:1 on hover and ~1.9:1 while pressed.

         #a736cc  label 5.19:1   shape 3.33:1
         #b241d9  label 4.52:1   shape 3.83:1
         #9f2ec3  label 5.75:1   shape 3.01:1 */
    --nb-accent: #a736cc;
    --nb-accent-hover: #b241d9;
    --nb-accent-active: #9f2ec3;
    --nb-accent-subtle: rgba(183, 71, 223, 0.16);
    --nb-accent-subtle-hover: rgba(183, 71, 223, 0.24);
    --nb-accent-border: rgba(183, 71, 223, 0.35);
    --nb-accent-text: var(--nb-brand-300);

    --nb-success-text: #6ce9a6;
    --nb-success-bg: rgba(18, 183, 106, 0.14);
    --nb-success-border: rgba(18, 183, 106, 0.3);

    --nb-warning-text: #fec84b;
    --nb-warning-bg: rgba(247, 144, 9, 0.14);
    --nb-warning-border: rgba(247, 144, 9, 0.3);

    --nb-danger-text: #fda29b;
    --nb-danger-bg: rgba(240, 68, 56, 0.14);
    --nb-danger-border: rgba(240, 68, 56, 0.32);

    --nb-info-text: #7cd4fd;
    --nb-info-bg: rgba(11, 165, 236, 0.14);
    --nb-info-border: rgba(11, 165, 236, 0.3);

    --nb-neutral-text: #a9b6c7;
    --nb-neutral-bg: #1e2631;
    --nb-neutral-border: #2a3543;

    --nb-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --nb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --nb-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --nb-shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --nb-shadow-xl: 0 20px 24px -4px rgba(0, 0, 0, 0.6), 0 8px 8px -4px rgba(0, 0, 0, 0.35);
    --nb-shadow-drawer: -12px 0 32px -8px rgba(0, 0, 0, 0.6);
    --nb-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);

    color-scheme: dark;
}

/* Compact density modifier — opt-in per user, changes only metrics. */
.nb-density-compact {
    --nb-row-height: 34px;
    --nb-cell-pad-y: var(--nb-space-1);
    --nb-content-pad-y: var(--nb-space-4);
    --nb-control-height-md: 30px;
}

/* Respect the user's reduced-motion preference everywhere at once. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --nb-duration-instant: 0ms;
        --nb-duration-fast: 0ms;
        --nb-duration-base: 0ms;
        --nb-duration-slow: 0ms;
        --nb-duration-slower: 0ms;
    }
}