/**
 * HesaBooks Brand Colors - CSS Variables
 * Version 1.0
 * 
 * This file contains all color definitions for the HesaBooks brand.
 * Update these variables to change colors across the entire site.
 */

:root {
  /* ============================
     TYPOGRAPHY
     ============================ */
  --font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;

  /* ============================
     CORE BRAND
     ============================ */
  --color-primary: #002122;             /* Deep Blue-Teal (rgb(0,33,34)) */
  --color-primary-contrast: #FFFFFF;

  /* Tints/Shades for UI */
  --color-primary-10:  #0A2B2C;
  --color-primary-20:  #143536;
  --color-primary-30:  #1E4041;
  --color-primary-40:  #284B4C;
  --color-primary-50:  #325657;
  --color-primary-60:  #3C6162;
  --color-primary-70:  #476D6E;
  --color-primary-80:  #517979;
  --color-primary-90:  #5B8585;

  /* Teal for interactive bits */
  --color-teal:        #5EA89F;
  --color-teal-dark:   #3C7F79;
  --color-teal-light:  #9FCBC6;

  /* Copper accents */
  --color-copper:        #B56E46;
  --color-copper-light:  #D89C74;
  --color-copper-dark:   #8A4E2E;
  --color-copper-contrast: #0F1213;

  /* Neutrals */
  --color-charcoal:    #2A2F32;
  --color-cool-900:    #2A2F32;
  --color-cool-800:    #3D4245;
  --color-cool-700:    #575D60;
  --color-cool-600:    #6F767A;
  --color-cool-500:    #8B9296;
  --color-cool-400:    #A7B0B5;
  --color-cool-300:    #BFC7CB;
  --color-cool-200:    #D5DBDE;
  --color-cool-100:    #E6EAEC;
  --color-cool-50:     #F2F4F5;

  /* Backgrounds */
  --bg-default: #F7F5F2;   /* Ivory */
  --bg-ivory:  #F7F5F2;    /* alias */
  --bg-paper:  #FFFFFF;
  --bg-elevated:#FAF9F7;

  /* Text */
  --text-primary:     var(--color-charcoal);
  --text-secondary:   var(--color-cool-600);
  --text-disabled:    var(--color-cool-400);
  --text-on-dark:     rgba(255,255,255,0.96);

  /* ============================
     CONNECT TEMPLATE ONLY (UNCHANGED)
     ============================ */
  --color-connect: #F3A37D;       /* Peach - Only for /connect template */
  --color-connect-light: #F5B395; /* Lighter peach */
  --color-connect-dark: #E08A5F;  /* Darker peach */

  /* Actions & components */
  --action-hover:     rgba(94,168,159,0.14);
  --action-selected:  rgba(94,168,159,0.22);
  --action-disabled:  #E0E0E0;
  --action-focus:     #5EA89F;

  --divider:          var(--color-cool-200);
  --avatar-default-bg: var(--color-cool-500);
  --chip-default-border: var(--color-cool-300);
  --snackbar-bg:      var(--color-charcoal);
  --snackbar-color:   #FFFFFF;
  --tooltip-bg:       var(--color-charcoal);
  --tooltip-text:     #FFFFFF;
  --table-cell-border: var(--color-cool-200);
  --table-header-bg:  var(--color-primary);
  --track-bg:         var(--color-teal);

  /* Whites & blacks */
  --white:       rgba(255,255,255,0.95);
  --white-pure:  #FFFFFF;
  --black:       var(--color-charcoal);
  --black-pure:  #000000;

  /* Brand-toned semantics */
  --color-info:          #3F7E87;
  --color-info-light:    #6EA6AD;
  --color-info-dark:     #2B5A61;
  --color-info-contrast: #FFFFFF;

  --color-success:       #2E6E54;
  --color-success-light: #589C7F;
  --color-success-dark:  #1F4E3B;
  --color-success-contrast: #FFFFFF;

  --color-warning:       #B56E46;  /* copper-based */
  --color-warning-light: #D89C74;
  --color-warning-dark:  #8A4E2E;
  --color-warning-contrast: #0F1213;

  --color-error:         #9F3A3A;  /* muted crimson */
  --color-error-light:   #C76666;
  --color-error-dark:    #6F2828;
  --color-error-contrast:#FFFFFF;

  /* Custom */
  --body-bg:       var(--bg-default);
  --chat-bg:       #EAF4F4;
  --grey-light-bg: #F2F4F5;
  --input-border:  var(--color-cool-300);

  /* Legacy aliases for backward compatibility */
  --color-primary-light: var(--color-primary-50);
  --color-primary-dark: var(--color-primary-10);
  --color-accent: var(--color-copper);
  --color-accent-light: var(--color-copper-light);
  --color-accent-dark: var(--color-copper-dark);
  --color-accent-contrast: var(--color-copper-contrast)
  
  /* ============================
     SHADOWS & EFFECTS
     ============================ */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.06);
  --shadow-xl: 0 12px 32px rgba(0,0,0,0.08);
  
  /* ============================
     BORDER RADIUS
     ============================ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  
  /* ============================
     TRANSITIONS
     ============================ */
  --transition-fast: 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ============================
   DARK MODE VARIABLES
   ============================ */
[data-theme="dark"] {
  /* Text colors for dark mode */
  --text-primary: #E6EAEC;
  --text-secondary: #A7B0B5;
  --text-disabled: #6F767A;

  /* Background colors for dark mode */
  --bg-default: #0F1213;
  --bg-paper: #1A1E1F;
  --bg-elevated: #252A2B;

  /* Component adjustments */
  --divider: var(--color-cool-800);
  --body-bg: #0F1213;
  --grey-light-bg: #1A2626;
  --input-border: var(--color-cool-700);

  /* Adjust primary for dark mode visibility */
  --color-primary: var(--color-primary-50);
  --color-primary-light: var(--color-primary-70);
  --color-primary-dark: var(--color-primary-30);

  /* Action states for dark mode */
  --action-hover: rgba(94,168,159,0.20);
  --action-selected: rgba(94,168,159,0.30);
}

/* ============================
   UTILITY CLASSES
   ============================ */

/* Primary Button */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-30) 100%);
  color: white;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  border: none;
}

.btn-primary:hover {
  background-color: var(--white);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn-primary:focus {
  outline: 2px solid var(--action-focus);
  outline-offset: 2px;
}

/* Copper Button */
.btn-copper,
.btn-accent {
  background: linear-gradient(135deg, #6F3A20 0%, var(--color-copper-dark) 100%);
  color: white;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  border: none;
}

.btn-copper:hover,
.btn-accent:hover {
  background-color: var(--white);
  color: var(--color-copper-dark);
  border: 1px solid var(--color-copper-dark);
}

.btn-copper:focus,
.btn-accent:focus {
  outline: 2px solid var(--action-focus);
  outline-offset: 2px;
}

/* Teal Button */
.btn-teal {
  background: linear-gradient(135deg, var(--color-teal-dark) 0%, var(--color-teal) 100%);
  color: white;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  border: none;
}

.btn-teal:hover {
  background-color: var(--white);
  color: var(--color-teal-dark);
  border: 1px solid var(--color-teal-dark);
}

.btn-teal:focus {
  outline: 2px solid var(--action-focus);
  outline-offset: 2px;
}

/* Ghost Button */
.btn-ghost {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.btn-ghost:hover {
  background-color: var(--action-hover);
}

/* Form Inputs */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--action-focus);
  outline-offset: 2px;
  border-color: var(--action-focus);
}

/* Cards */
.card {
  background-color: var(--bg-paper);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* Tables */
.table thead,
table thead {
  background-color: var(--table-header-bg);
  color: white;
}

.table tbody tr:nth-child(even),
table tbody tr:nth-child(even) {
  background-color: var(--grey-light-bg);
}

.table td,
.table th,
table td,
table th {
  border-color: var(--table-cell-border);
}