/*
 * 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-50: #EFFAFF;
  --primary-light-blue: #00b2f5;
  --primary-light-blue-100: #DEF3FF;
  --primary-light-blue-200: #ADEBFF;
  --primary-light-blue-300: #85E2FF;
  --primary-light-blue-600: #0AC7FF;
  --primary-light-blue-700: #0072AB;
  --primary-teal-blue: #12849f;

  /* Base Colors */
  --base-white: #FFFFFF;
  --base-black: #132836;
  --base-grey: #8EA2AF;
  --base-light-grey: #F8F8F8;
  --base-medium-grey: #DEE4E9;
  --mid-grey: #A6A6A6;
  --base-dark-grey: #455A6B;
  --base-heavy-grey: #333333;
  --base-light-blue-grey: #8EA2AE;
  --full-black: #000000;
  --off-white: #F9FAFB;
  --dark-white: #F3F4F5;
  --mid-white: #DCDDDE;
  --white: #FFFFFF;
  --grey: #767676;

  /* Text Colors */
  --text-color: var(--base-dark-grey);
  --text-color-light: var(--base-grey);
  --text-light-icons-color: #FEFEFE;
  --text-dark-icons-color: rgba(4, 4, 4, 1);
  --text-light-primary-color: #FEFEFE;
  --text-light-secondary-color: #757575;
  --text-dark-primary-color: var(--base-black);
  --base-text-color: var(--base-black);
  --text-disabled: #afaeae;
  --disabled-background: #929292;

  /* Links */
  --link-color: #00aeef;
  --link-color-hover: #0072ab;

  /* State Colors */
  --disabled-opacity: 0.45;
  --active: #2980b9;
  --success: #73b743;
  --failed: #d21a44;
  --warning-color: #f8bb86;
  --error-color: #f04b22;
  --highlight-current-line: #2980b9;
  --highlight-selection: #00aeef;
  --danger-hover-color: #990f0f;
  --warning-text-color: #990f0f;
  --warning-bg: #f6b1b1;
  --danger-active-color: #7d0c0c;
  --delete-hover-red: #f04b22;

  /* Semantic Colors */
  --base-green: #73b743;
  --base-light-green: lightgreen;
  --base-red: #f44336;
  --base-pink: #d21a44;
  --base-light-red: #FF6A6A;
  --base-orange: orange;
  --orange-dimmed: #F2994A;
  --orange-tenn: #D65900;
  --base-yellow: #F2C94C;
  --announcement-bg: #efea3b;
  --base-fuchsia: #E6007D;
  --base-fuchsia-50: #fce5f2;
  --base-fuchsia-100: #ffe2f2;
  --base-fuchsia-150: #ffd4ed;
  --base-fuchsia-200: #ffc9e6;
  --base-fuchsia-500: #ff41a8;
  --base-fuchsia-600: #ee0e88;

  /* Date Colors */
  --due-date-soon: #edc909;
  --due-date-later: #dbdbdb;
  --start-date-future: #dbdbdb;
  --start-date-past: #dbdbdb;
  --start-date-now: #5ba639;
  --default-start-bg: #EBEBEB;
  --default-start-color: var(--base-heavy-grey);
  --already-started-bg: #D3FDE2;
  --already-started-color: #215B37;
  --distant-due-bg: #EBEBEB;
  --distant-due-color: var(--base-heavy-grey);
  --upcoming-due-bg: #FFF0BD;
  --upcoming-due-color: #6B4200;
  --due-now-bg: #FFC6B2;
  --due-now-color: #761C00;
  --overdue-color: var(--base-white);
  --overdue-bg: #BB1834;

  /* Background Colors */
  --base-bg-color: aliceblue;
  --red-background: #FFE8E6;
  --orange-background: #FFEDDE;
  --yellow-background: #FFF8DB;
  --green-background: #E5F9E7;
  --teal-background: #E1F7F7;
  --blue-background: #DFF0FF;

  /* Modal Backgrounds */
  --modal-background-alice-classic: #F0F8FF;
  --modal-background-alice-mist: #F2F9FF;
  --modal-background-morning-alice: #ECF5FF;
  --modal-background-baby-alice: #F5FBFF;
  --modal-background-crystal-alice: #EDF7FF;
  --modal-background-frosted-alice: #F1F7FE;
  --modal-background-airy-alice: #F8FCFF;
  --modal-background-alice-glass: rgba(240, 248, 255, 0.96);
  --modal-background-deep-alice: #EAF4FF;
  --modal-background-alice-snow: #FDFEFF;

  /* Shadows and Borders */
  --shadow-color: rgba(16, 24, 40, 0.05);
  --default-border-radius: 4px;
  --divider-color: #d1e9fc;
  --font-weight-semi-bold: 600;

  /* Z-index Levels */
  --zindex-menu-bar: 27;

  /* AI Assistant Colors */
  --ai-base-color: var(--base-fuchsia);
  --ai-accent-soft: var(--base-fuchsia-200);
  --ai-accent-soft-background: var(--base-fuchsia-50);
  --ai-accent-hover: var(--base-fuchsia-150);
  --ai-accent-hover-alt: var(--base-fuchsia-100);
  --ai-accent-strong: var(--base-fuchsia-500);
  --ai-accent-active: var(--base-fuchsia-600);

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

  /* Component UI Colors */
  --text-primary: #172b4d;
  --text-secondary: #5e6c84;
  --text-tertiary: #8ea2af;
  --border-color: #f0f0f0;
  --button-hover-bg: #f5f5f5;

  /* Media Query Breakpoints */
  --screen-phone: 480px;
  --screen-tablet: 768px;
  --screen-desktop: 992px;
  --screen-lg-desktop: 1200px;

  /* Component Sizes */
  --tab-view-width: 300px;
  --header-height: 50px;
  --mobile-break: 950px;

  /* UI Component Variables - Mapped from original Pulse Stylus */
  /* Original uses hardcoded colors, these provide compatibility for board-cards.css */
  --list-background: transparent;  /* Original: background: none */
  --list-header-background: transparent;
  --card-background: #FFF;  /* Original minicard-content: background: #FFF */
  --card-text-color: #4d4d4d;  /* Original minicard: color: #4d4d4d */
  /* 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-color-light: #D1E9FC;  /* From minicard hr */
  --border-radius: 8px;  /* Original uses 8px for cards */
  --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 */
  --badge-hover-background: var(--base-medium-grey);
  --selection-background: #00B2F5;  /* From minicard.is-selected */
  --field-background: var(--base-light-grey);
  --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 */
  --button-disabled-background: var(--base-medium-grey);
  --button-disabled-text: var(--text-disabled);
  --primary-blue-dark: var(--primary-dark-blue);
  --warning-background: var(--yellow-background);
}