/* ==========================================================================
   UHE Media CRM: design tokens
   Single source of truth for brand colours, surfaces, typography, spacing,
   radii, shadows, component and layout dimensions, transitions and z-index.
   Components must consume these tokens; do not hardcode design values.
   Loaded before every other project stylesheet (see templates/base.html).
   ========================================================================== */

:root {
  /* ---- Brand palette (official) --------------------------------------- */
  --color-primary: #0b1320;
  --color-secondary: #6b7785;
  --color-neutral-400: #abb1bb;
  --color-neutral-300: #c9ced6;
  --color-neutral-200: #e6e8eb;
  --color-white: #ffffff;

  /* ---- Surfaces -------------------------------------------------------- */
  --surface-page: #f5f6f8;          /* application background (tint of neutral-200) */
  --surface-card: var(--color-white);
  --surface-subtle: #f0f2f4;        /* hover / zebra / quiet fills */
  --surface-dark: var(--color-primary);

  /* ---- Borders --------------------------------------------------------- */
  --border-subtle: var(--color-neutral-200);
  --border-default: var(--color-neutral-300);
  --border-strong: var(--color-neutral-400);

  /* ---- Text ------------------------------------------------------------
     --text-secondary (#6b7785) meets 4.5:1 only on white; on tinted
     surfaces use --text-muted (a darker shade of the same hue).           */
  --text-primary: var(--color-primary);
  --text-secondary: var(--color-secondary);
  --text-muted: #5a6572;
  --text-on-dark: var(--color-white);
  --text-on-dark-muted: var(--color-neutral-400);
  --text-on-dark-strong: var(--color-neutral-200);

  /* ---- Interactive on dark surfaces (sidebar) ------------------------- */
  --dark-hover-bg: rgba(255, 255, 255, 0.07);
  --dark-active-bg: rgba(255, 255, 255, 0.13);
  --dark-divider: rgba(255, 255, 255, 0.1);

  /* ---- Focus ----------------------------------------------------------- */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-primary);
  --focus-ring-color-on-dark: var(--color-neutral-300);

  /* ---- Semantic status colours ------------------------------------------
     Hues match the colours already used for approval / payment / workflow
     states so their business meaning is unchanged. Defined now, applied to
     badges in a later phase.                                              */
  --status-success: #198754;
  --status-success-soft: #d1e7dd;
  --status-warning: #ffc107;
  --status-warning-soft: #fff3cd;
  --status-danger: #dc3545;
  --status-danger-soft: #f8d7da;
  --status-info: #0e7490;
  --status-info-soft: #cff4fc;
  --status-neutral: var(--color-secondary);
  --status-neutral-soft: var(--color-neutral-200);

  /* ---- Typography ------------------------------------------------------ */
  --font-family-base: "Roboto", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --font-size-xs: 0.75rem;     /* 12px: captions, meta */
  --font-size-sm: 0.8125rem;   /* 13px: table cells, secondary text, sub-navigation */
  --font-size-md: 0.875rem;    /* 14px: navigation, labels, buttons */
  --font-size-base: 0.9375rem; /* 15px: body text */
  --font-size-lg: 1.0625rem;   /* 17px: h5 / emphasised text */
  --font-size-xl: 1.25rem;     /* 20px: h4 */
  --font-size-2xl: 1.5rem;     /* 24px: h3 / page title */
  --font-size-3xl: 1.75rem;    /* 28px: h2 */
  --font-size-4xl: 2rem;       /* 32px: h1 */

  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --letter-spacing-label: 0.06em;

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

  /* ---- Radii ----------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Shadows (restrained) ------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(11, 19, 32, 0.06);
  --shadow-md: 0 4px 12px rgba(11, 19, 32, 0.1);
  --shadow-lg: 0 12px 28px rgba(11, 19, 32, 0.16);

  /* ---- Component dimensions ------------------------------------------- */
  --control-height: 40px;
  --control-height-sm: 32px;
  --icon-size: 1.125rem;
  --nav-item-height: 40px;
  --nav-subitem-height: 34px;
  --avatar-size: 32px;

  /* ---- Layout dimensions ---------------------------------------------- */
  --sidebar-width: 264px;
  --sidebar-width-compact: 76px;
  --header-height: 64px;
  --content-max-width: 1680px;
  --content-padding-x: var(--space-6);
  --content-padding-y: var(--space-6);

  /* ---- Transitions ----------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-layout: 240ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Responsive breakpoints (documentation only) ---------------------
     CSS custom properties cannot be used inside @media queries, so these
     values are repeated as literals in the stylesheets. They mirror
     Bootstrap 5.3: sm 576px, md 768px, lg 992px, xl 1200px, xxl 1400px.
     The shell switches between off-canvas and fixed sidebar at lg (992px). */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;

  /* ---- Z-index hierarchy -------------------------------------------------
     Bootstrap: dropdown 1000, sticky 1020, fixed 1030, offcanvas-backdrop
     1040, offcanvas 1045, modal-backdrop 1050, modal 1055, popover 1070,
     tooltip 1080. The shell stays below modals so dialogs cover it.        */
  --z-content-sticky: 2;
  --z-header: 1020;
  --z-sidebar-backdrop: 1025;
  --z-sidebar: 1030;
  --z-picker: 1060;           /* full-screen record pickers (client, supplier) */
  --z-skip-link: 1090;

  /* ---- Interactive states (primary) ----------------------------------- */
  --color-primary-hover: #1d2a3f;
  --color-primary-active: #28374f;
  --focus-ring-soft: 0 0 0 3px rgba(11, 19, 32, 0.16);

  /* ---- Controls and buttons ------------------------------------------- */
  --input-height: 38px;
  --btn-height: 36px;
  --btn-height-sm: 30px;
  --btn-height-lg: 44px;
  --control-border: var(--border-default);

  /* ---- Tables ----------------------------------------------------------- */
  --table-header-bg: var(--surface-subtle);
  --table-header-color: var(--text-muted);
  --table-row-hover: var(--surface-subtle);
  --table-cell-padding-y: 0.625rem;
  --table-cell-padding-x: 0.875rem;

  /* ---- Extra status shade: fully paid / completed ------------------------ */
  --status-success-strong: #146c43;
  --status-info-text: #055160;
  --status-warning-text: #664d03;
  --status-danger-text: #58151c;
  --status-success-text: #0a3622;

  /* ---- Form widths ------------------------------------------------------- */
  --form-width: 860px;
  --form-width-wide: 1240px;
}

@media (max-width: 767.98px) {
  :root {
    --content-padding-x: var(--space-4);
    --content-padding-y: var(--space-4);
  }
}