/* ImageBulkify design tokens: Midnight & Marigold
   The old ImageBulkify layout (soft cards, solid midnight bands, dark app rail) on a cool porcelain ground.
   Royal blue does the work (buttons, links, selection), midnight carries the dark bands and the app
   rail, marigold marks the personal part: the typed name, merge fields, the one highlight per view. */

:root {
  /* Ground + neutrals (cool, never cream) */
  --ib-bg: #F5F6F9;
  --ib-surface: #FFFFFF;
  --ib-surface-2: #F9FAFC;
  --ib-surface-raised: #FFFFFF;
  --ib-surface-sunken: #EDEFF5;
  --ib-ink: #121726;
  --ib-ink-soft: #3C4357;
  --ib-muted: #5B6478;
  --ib-subtle: #636C80;
  --ib-border: #DFE3EC;
  --ib-border-strong: #C9CFDC;

  /* Royal blue: working actions, links, focus, selection */
  --ib-primary: #2B4ACB;
  --ib-primary-hover: #2340B0;
  --ib-primary-deep: #1A2F8A;
  --ib-primary-bright: #4F6EF0;
  --ib-primary-soft: #E9EDFB;
  --ib-primary-softer: #F3F5FD;
  --ib-on-primary: #FFFFFF;
  --ib-on-primary-muted: #D5DCF8;   /* secondary copy on royal fields */

  /* Midnight: hero and CTA bands, app rail, footer */
  --ib-midnight: #131B47;
  --ib-midnight-deep: #0F1638;
  --ib-midnight-2: #1B2560;
  --ib-midnight-line: #2A3570;
  --ib-on-midnight: #F3F5FD;
  --ib-on-midnight-muted: #A9B2D8;
  --ib-on-midnight-soft: #C7CEEC;   /* rail links, footer links */
  --ib-on-midnight-lead: #D3DAF5;   /* lead copy on midnight bands */
  --ib-on-midnight-faint: #8E97BD;  /* rail section labels, small print on midnight */

  /* Marigold: the personal part (names, merge fields) and the one highlight per view */
  --ib-marigold: #F4B731;
  --ib-marigold-hover: #E9A817;
  --ib-marigold-soft: #FDF3DA;
  --ib-marigold-ink: #6B4A00;
  --ib-accent: var(--ib-marigold);
  --ib-accent-hover: var(--ib-marigold-hover);
  --ib-accent-soft: var(--ib-marigold-soft);
  --ib-accent-ink: var(--ib-marigold-ink);
  --ib-on-accent: #121726;

  /* Brass: warm secondary for icon tiles and "running low" bars */
  --ib-brass: #C98A12;
  --ib-brass-soft: #FBF0DA;

  /* Status */
  --ib-success: #137444;
  --ib-success-soft: #E3F4EA;
  --ib-success-line: #B9E3CB;
  --ib-success-deep: #0B5532;
  --ib-warning: #B54708;
  --ib-warning-soft: #FEF0E6;
  --ib-warning-line: #F8D2B8;
  --ib-warning-deep: #7A2F05;
  --ib-danger: #C2283B;
  --ib-danger-hover: #A31E30;
  --ib-danger-soft: #FDE8EA;
  --ib-danger-line: #F6C2C9;
  --ib-danger-deep: #8A1626;
  --ib-info: #2B4ACB;
  --ib-info-soft: #E9EDFB;

  /* Typography: Bricolage Grotesque for display, Source Sans 3 for reading and UI */
  --ib-font-display: "Bricolage Grotesque", "Source Sans 3", system-ui, sans-serif;
  --ib-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ib-font-accent: var(--ib-font-display);
  --ib-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --ib-text-xs: 0.75rem;
  --ib-text-sm: 0.875rem;
  --ib-text-base: 1rem;
  --ib-text-lg: 1.125rem;
  --ib-text-xl: 1.25rem;
  --ib-text-2xl: 1.5rem;
  --ib-text-3xl: 1.875rem;
  --ib-text-4xl: 2.25rem;
  --ib-text-5xl: 3rem;
  --ib-text-6xl: 3.75rem;

  --ib-leading-tight: 1.08;
  --ib-leading-snug: 1.25;
  --ib-leading-normal: 1.55;
  --ib-tracking-tight: -0.02em;
  --ib-tracking-display: -0.03em;
  --ib-tracking-wide: 0.04em;

  /* Spacing (4px base) */
  --ib-space-1: 0.25rem;
  --ib-space-2: 0.5rem;
  --ib-space-3: 0.75rem;
  --ib-space-4: 1rem;
  --ib-space-5: 1.25rem;
  --ib-space-6: 1.5rem;
  --ib-space-8: 2rem;
  --ib-space-10: 2.5rem;
  --ib-space-12: 3rem;
  --ib-space-16: 4rem;
  --ib-space-20: 5rem;
  --ib-space-24: 6rem;

  /* Radii: controls 10px, cards 16px, feature panels 20px, bands 28px */
  --ib-radius-sm: 0.375rem;
  --ib-radius: 0.625rem;
  --ib-radius-md: 0.75rem;
  --ib-radius-lg: 1rem;
  --ib-radius-xl: 1.25rem;
  --ib-radius-2xl: 1.75rem;
  --ib-radius-full: 9999px;

  /* Depth: offset + soft blur, tinted toward midnight */
  --ib-shadow-xs: 0 1px 2px rgba(18, 23, 38, 0.05);
  --ib-shadow-sm: 0 2px 6px rgba(18, 23, 38, 0.06), 0 1px 2px rgba(18, 23, 38, 0.04);
  --ib-shadow: 0 6px 16px rgba(18, 23, 38, 0.07), 0 2px 4px rgba(18, 23, 38, 0.04);
  --ib-shadow-md: 0 12px 28px rgba(18, 23, 38, 0.10), 0 3px 8px rgba(18, 23, 38, 0.05);
  --ib-shadow-lg: 0 24px 56px rgba(15, 22, 56, 0.16), 0 6px 16px rgba(15, 22, 56, 0.06);
  --ib-shadow-card: 0 22px 44px rgba(8, 12, 36, 0.32), 0 6px 14px rgba(8, 12, 36, 0.18);
  --ib-shadow-glow: 0 0 0 3px rgba(43, 74, 203, 0.18);
  --ib-shadow-accent-glow: 0 0 0 3px rgba(244, 183, 49, 0.35);
  --ib-focus-ring: 0 0 0 3px rgba(43, 74, 203, 0.32);

  /* Layout */
  --ib-container: 74rem;
  --ib-container-narrow: 44rem;
  --ib-container-wide: 80rem;
  --ib-header-h: 4.25rem;
  --ib-sidebar-w: 16rem;
  --ib-sidebar-collapsed: 4.5rem;
  --ib-app-topbar-h: 3.75rem;

  /* Motion: exponential ease-out */
  --ib-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ib-duration-fast: 150ms;
  --ib-duration: 220ms;
  --ib-duration-slow: 420ms;

  /* No gradients: bands, art, the logo and bars are all solid token colors. */

  /* Z-index */
  --ib-z-dropdown: 50;
  --ib-z-sticky: 100;
  --ib-z-drawer: 200;
  --ib-z-modal: 300;
  --ib-z-toast: 400;
}