/* ==========================================================================
   Bellwether — design tokens
   One warm neutral family, exactly one accent (orange), four status hues.
   Nothing below is decorative: every token has a stated job.
   ========================================================================== */

:root {
  /* --- Sidebar / dark chrome -------------------------------------------
     Depth here comes from layered translucency rather than flat fills, so the
     panel reads as one material catching light instead of three grey blocks. */
  --color-sidebar:        #171512;  /* warm charcoal, never pure black */
  --color-sidebar-top:    #201D19;  /* the lit top edge of the panel */
  --color-sidebar-raised: rgba(255, 255, 255, 0.055);  /* active nav fill */
  --color-sidebar-hover:  rgba(255, 255, 255, 0.032);  /* hover fill */
  --color-sidebar-border: rgba(255, 255, 255, 0.065);  /* dividers on dark */
  --color-sidebar-edge:   rgba(255, 255, 255, 0.055);  /* inner top highlight */
  --color-on-dark:        #F2EEE8;  /* primary text on charcoal */
  --color-on-dark-soft:   #C3BBB0;  /* resting nav labels */
  --color-on-dark-muted:  #8C847A;  /* section labels, secondary text */

  /* --- Application surfaces --------------------------------------------- */
  --color-bg:             #F6F4F1;  /* app background */
  --color-surface:        #FFFFFF;  /* cards, tables, inputs */
  --color-surface-muted:  #F0ECE7;  /* table headers, insets, zebra */
  --color-surface-sunken: #EAE5DF;  /* wells, progress tracks */

  /* --- Ink -------------------------------------------------------------- */
  --color-text:           #191612;
  --color-text-muted:     #6B635A;
  --color-text-faint:     #998F84;
  --color-border:         #EAE4DC;  /* hairlines: present, never assertive */
  --color-border-strong:  #DCD5CB;

  /* --- The single accent ------------------------------------------------
     One hue. The gradient stops exist only to give a control a lit top edge;
     they are two steps of the same colour, not decoration. */
  --color-primary:        #E2691C;
  --color-primary-lit:    #EB7B31;
  --color-primary-hover:  #C85A12;
  --color-primary-press:  #AC4B0B;
  --color-primary-wash:   rgba(226, 105, 28, 0.085);
  --color-primary-edge:   rgba(226, 105, 28, 0.28);

  /* --- Status. Never used for decoration, only for state. --------------- */
  --color-success:        #1F7A55;
  --color-success-wash:   rgba(31, 122, 85, 0.11);
  --color-warning:        #A87708;
  --color-warning-wash:   rgba(168, 119, 8, 0.13);
  --color-danger:         #BE3A2B;
  --color-danger-wash:    rgba(190, 58, 43, 0.11);
  --color-neutral:        #7C736A;
  --color-neutral-wash:   rgba(124, 115, 106, 0.12);
  --color-info:           #2B6C8F;
  --color-info-wash:      rgba(43, 108, 143, 0.12);

  /* --- Channel identity. Used only on channel chips + cadence rail. ----- */
  --channel-sms:       #2B6C8F;
  --channel-linkedin:  #14618C;
  --channel-facebook:  #3B5998;
  --channel-instagram: #A8386B;

  /* --- Type ------------------------------------------------------------- */
  --font-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono",
               "JetBrains Mono", Menlo, Consolas, monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   19px;
  --text-2xl:  23px;
  --text-3xl:  28px;

  /* --- Spacing ---------------------------------------------------------- */
  --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;

  /* --- Shape ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* Shadows are tinted with the ink, never pure black, and always layered:
     a tight contact shadow for the edge, a wide soft one for the lift. A
     single blurred shadow is the thing that makes an interface look cheap. */
  --shadow-sm: 0 1px 1px rgba(25, 22, 18, 0.04), 0 1px 2px rgba(25, 22, 18, 0.03);
  --shadow:    0 1px 2px rgba(25, 22, 18, 0.05), 0 4px 10px -3px rgba(25, 22, 18, 0.06);
  --shadow-md: 0 1px 2px rgba(25, 22, 18, 0.05), 0 10px 24px -6px rgba(25, 22, 18, 0.10);
  --shadow-lg: 0 2px 6px rgba(25, 22, 18, 0.07), 0 24px 56px -12px rgba(25, 22, 18, 0.22);

  /* The lit top edge that makes a filled control read as a physical surface. */
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --edge-hairline: inset 0 0 0 1px rgba(25, 22, 18, 0.04);

  /* --- Layout ----------------------------------------------------------- */
  --sidebar-w: 236px;
  --sidebar-w-collapsed: 60px;
  --header-h: 56px;
  --row-h: 44px;
  --page-max: 1560px;

  /* --- Motion. Subtle by default; this is a tool, not a showreel. ------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  --z-header: 40;
  --z-sidebar: 50;
  --z-dropdown: 60;
  --z-modal: 80;
  --z-toast: 90;
}

/* Compact mode — a Settings toggle. Tightens rows without changing layout. */
:root[data-density="compact"] {
  --row-h: 34px;
  --text-base: 12px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}