/*
 * Pulse Variables - Converted from client/components/main/variables.styl
 * Base Color Palette and Design Tokens for Board Components
 */

:root {
  /* Layout */
  --pls-card-docked-width: 640px;

  /* Primary Colors */
  --primary-blue: #005794;
  --primary-dark-blue: #003366;
  --primary-light-blue: #00b2f5;
  --primary-light-blue-100: #DEF3FF;
  --primary-light-blue-200: #ADEBFF;

  /* Base Colors */
  --base-white: #FFFFFF;
  --base-black: #132836;
  --base-grey: #8EA2AF;
  --base-light-grey: #F8F8F8;
  --base-medium-grey: #DEE4E9;
  --base-dark-grey: #455A6B;
  --base-heavy-grey: #333333;
  --off-white: #F9FAFB;
  --dark-white: #F3F4F5;

  /* Text Colors */
  --text-color: var(--base-dark-grey);
  --text-color-light: var(--base-grey);
  --text-dark-primary-color: var(--base-black);
  --text-disabled: #afaeae;

  /* Links */
  --link-color: #00aeef;

  /* State Colors */
  --success: #73b743;
  --warning-color: #f8bb86;
  --error-color: #f04b22;
  --warning-text-color: #990f0f;
  --warning-bg: #f6b1b1;

  /* Semantic Colors */
  --base-green: #73b743;

  /* Background Colors */
  --yellow-background: #FFF8DB;
  --green-background: #E5F9E7;
  --blue-background: #DFF0FF;

  /* Shadows and Borders */
  --default-border-radius: 4px;

  /* Avatar Colors */
  --avatar-text-color: #172b4d;

  /* Component UI Colors */
  --text-primary: #172b4d;
  --text-secondary: #5e6c84;
  --text-tertiary: #8ea2af;

  /* Component Sizes */
  --header-height: 50px;

  /* UI Component Variables - Mapped from original Pulse Stylus */
  /* Original uses hardcoded colors, these provide compatibility for board-cards.css */
  --card-background: #FFF;  /* Original minicard-content: background: #FFF */
  --card-text-color: #4d4d4d;  /* Original minicard: color: #4d4d4d */
  /* Card geometry — single source for .minicard, .minicard-wrapper and the composer so their metrics cannot drift apart */
  --card-width: 208px;
  --card-width-relaxed: 288px;
  --card-gap: 8px;
  --card-gap-relaxed: 16px;
  --card-padding: 10px 12px;
  --card-padding-narrow: 8px 10px;  /* narrow viewports (tablet and below) */
  /* Minicard tints with no pl-variables.css equivalent yet — promote into the design system in the theming pass */
  --card-divider: #E5E8ED;  /* minicard hr separators */
  --card-key-bg: #FAFAFC;  /* .card-key chip */
  --overdue-bg: #FFEDE6;
  --overdue-color: #C22704;
  --due-soon-bg: #FFEEC7;
  --due-soon-color: #B55603;
  --border-color: var(--base-medium-grey);  /* #DEE4E9 */
  --border-radius: 4px;  /* Uniform 4px radius policy (design review 27.07.26) */
  --button-hover-background: #fafafa;  /* From .open-minicard-composer:hover */
  --input-background: var(--base-white);
  --badge-background: var(--base-light-grey);  /* #F8F8F8 */
  --badge-text-color: #8EA2AF;  /* From original .badge-text */
  --selection-background: #00B2F5;  /* From minicard.is-selected */
  --booking-background: var(--blue-background);
  --booking-border: var(--primary-light-blue-200);
  --linked-background: #FFEAD8;  /* From minicard-linked.card (System-Light-Orange) */
  --linked-border: var(--primary-light-blue-200);
  --linked-hover-background: var(--primary-light-blue-100);
  --linked-text: #8EA2AF;  /* From minicard-linked-text */
  /* --shadow-sm and --shadow-md: see app.css */
}