/**
 * @file
 * EP Base Styles - Variables and base styles
 * 
 * Purpose: Foundational styles including fonts, colors, spacing variables
 * Location: /themes/custom/occasia_elegant/css/ep/base/ep-base.css
 * Category: base/ (foundational styles)
 * 
 * This file contains:
 * - CSS custom properties (variables) for colors, fonts, spacing
 * - Base typography styles
 * - Base spacing utilities
 * - Reference to theme colors from style.css
 * 
 * Decision Rule: If it's foundational (variables, typography, resets) → base/
 * 
 * See: /bitnami/drupal/modules/.cursor/THEME_STRUCTURE.md for structure documentation
 */

/**
 * EP Design System Variables
 * 
 * These variables reference theme colors from style.css and can be easily adjusted.
 * To change colors site-wide, modify the values below.
 */

:root {
  /* ========================================
     COLORS - Reference theme colors
     ======================================== */
  
  /* Primary Colors - Reference theme */
  --ep-color-primary: var(--ep-color-primary, #a67a7a);
  --ep-color-white: var(--ep-color-white, #fff);
  
  /* Text Colors — Ivory + Ink (Occasia Elegant: primary & secondary both ink) */
  --ep-color-text-primary: #1A1614;
  --ep-color-text-secondary: var(--ep-color-text-primary);
  --ep-color-text-tertiary: #989695;
  
  /* Icon Colors - Easy to change site-wide */
  --ep-color-icon: var(--ep-color-text-primary); /* Default icon color - matches text (lighter grey) */
  --ep-color-icon-hover: var(--ep-color-text-secondary); /* Icon hover color */
  --ep-color-icon-active: var(--ep-color-text-tertiary); /* Icon active/pressed color */
  
  /* Title Colors - Easy to change site-wide */
  --ep-color-title: var(--ep-color-text-primary); /* Page title color - easy to change */
  --ep-color-title-secondary: var(--ep-color-text-secondary); /* Section title color */
  --ep-color-back-link: var(--ep-color-text-primary); /* Ink back links below secondary header */
  --ep-color-back-link-hover: var(--ep-color-text-primary);
  
  /* Border Colors — ME+EM-inspired warm stone (meandem.com) */
  --ep-color-border-primary: #C9C9C7;
  --ep-color-border-dark: #1A1614;
  --ep-color-border-medium: #3D3835;
  --ep-color-border-light: #C9C9C7;

  /* Accent — muted purple; canonical values in style.css — keep in sync */
  --ep-color-accent: #9488A3;
  --ep-color-accent-light: rgba(148, 136, 163, 0.08);
  --ep-color-accent-medium: rgba(148, 136, 163, 0.12);
  --ep-color-accent-border: rgba(148, 136, 163, 0.25);
  --ep-color-accent-pale: #B8A9C9;
  
  /* Background Colors — ME+EM-inspired warm stone accents */
  --ep-color-bg-secondary: #F8F7F3; /* off-white — ME+EM page / bg-lead (meandem.com) */
  --ep-color-bg-page: var(--ep-color-bg-secondary);
  --ep-color-bg-primary: #ffffff;
  --ep-color-bg-tertiary: #F1EFE9; /* linen stone — ME+EM nav panels / list row hover */
  --ep-color-bg-hover: #F1EFE9;
  --ep-color-bg-card-hover: var(--ep-color-bg-hover); /* list rows: events, layouts, menus, tables */
  --ep-color-list-divider: #E0DAD0; /* 2 steps darker than hover — list row rules (#F1EFE9 → #E0DAD0) */
  --ep-list-divider-width: var(--ep-border-width-medium); /* 3px — card row rules + page title underlines */
  --ep-color-heading-underline: var(--ep-color-list-divider); /* page headers + secondary header — match list rows */
  --ep-heading-underline-width: var(--ep-list-divider-width);
  
  /* Link Colors - darker warm stone (matches page beige palette) */
  --ep-color-link: #6B5E52;
  --ep-color-link-hover: #3D3835;
  --ep-link-underline-color: currentColor; /* Ink underlines — never Bootstrap blue */

  /* Bootstrap link tokens — align with EP ink palette (loads before ep-base on EP pages) */
  --bs-link-color: var(--ep-color-link);
  --bs-link-hover-color: var(--ep-color-link-hover);
  --bs-link-color-rgb: 107, 94, 82;
  --bs-link-hover-color-rgb: 61, 56, 53;

  /* Interactive accent - borders, focus rings, selected states */
  --ep-color-accent-warm: #8B7D6B;
  --ep-color-accent-warm-dark: #6B5E52;
  --ep-color-accent-warm-darker: #5C5348;
  --ep-color-accent-warm-rgb: 107, 94, 82;
  
  /* Primary Color Variations - Reference theme */
  --ep-color-primary-light: var(--ep-color-primary-light, rgba(166, 122, 122, 0.08));
  --ep-color-primary-medium: var(--ep-color-primary-medium, rgba(166, 122, 122, 0.12));
  --ep-color-primary-border: var(--ep-color-primary-border, rgba(166, 122, 122, 0.25));
  
  /* Shadows - Reference theme */
  --ep-color-shadow-light: var(--ep-color-shadow-light, rgba(0, 0, 0, 0.04));
  --ep-color-shadow-medium: var(--ep-color-shadow-medium, rgba(15, 23, 42, 0.12));
  
  /* Form Colors */
  --ep-color-checkbox-tick: #1A1614;
  --ep-color-checkbox-bg: #ffffff;
  --ep-color-checkbox-border: #1A1614;
  --ep-color-input-border: #e2dbd1; /* Input border color */
  --ep-color-input-focus: #a67a7a; /* Focus border color */
  --ep-color-error: #dc3545; /* Error/validation color */
  --ep-color-success: #28a745; /* Success color */

  /* Login / register / password reset card + Site branding sign-in preview (see ep-auth-page.css). */
  --ep-auth-page-card-max-width: 44rem;
  
  /* Layout Canvas Colors - Single source of truth for Fabric.js canvas */
  --ep-layout-table-fill: #F1EFE9;
  --ep-layout-table-stroke: #8B7D6B;
  --ep-layout-seat-fill: #6c757d;
  --ep-layout-seat-stroke: #495057;
  --ep-layout-seat-selected-fill: var(--ep-color-accent-warm-dark);
  --ep-layout-seat-selected-stroke: var(--ep-color-accent-warm-darker);
  --ep-layout-accent: var(--ep-color-accent-warm-dark);
  --ep-layout-accent-dark: var(--ep-color-accent-warm-darker);
  --ep-layout-canvas-bg: #FFFFFF;
  --ep-layout-canvas-grid: #FCFCFA;
  
  /* Budget Dashboard Colors - Varying shades of green */
  --ep-budget-green-dark: #2d8659; /* Dark green for paid amount */
  --ep-budget-green-medium: #4CAF50; /* Medium green for total budget */
  --ep-budget-green-light: #81C784; /* Light green for due amount */
  
  /* Calendar Event Colors - Easy to change site-wide */
  --ep-calendar-color-event-date: #4CAF50; /* Green for event dates */
  --ep-calendar-color-budget-item: #A8C8E6; /* Light blue for budget items */
  --ep-calendar-color-calendar-event: var(--ep-color-accent-pale); /* Light purple for calendar events */
  --ep-calendar-color-checklist-item: #A8C5A8; /* Light sage green for checklist items */
  
  /* ========================================
     TYPOGRAPHY
     ======================================== */
  
  /* Font Families — ME+EM-inspired pairing (free substitutes)
   * DM Sans ≈ Suisse Int'l (UI, body, nav, section headings)
   * Cormorant Garamond ≈ Times Now (page titles, large display) */
  --ep-font-family-base: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --ep-font-family-heading: 'DM Sans', sans-serif;
  --ep-font-family-title: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ep-font-family-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  
  /* Font Sizes */
  --ep-font-size-xs: 0.75rem;   /* 12px */
  --ep-font-size-sm: 0.875rem;  /* 14px */
  --ep-font-size-base: 1rem;     /* 16px */
  --ep-font-size-lg: 1.125rem;   /* 18px */
  --ep-font-size-xl: 1.25rem;    /* 20px */
  --ep-font-size-2xl: 1.5rem;    /* 24px */
  --ep-font-size-3xl: 1.875rem;  /* 30px */
  
  /* Font Weights */
  --ep-font-weight-normal: 400;
  --ep-font-weight-medium: 500;
  --ep-font-weight-semibold: 600;
  --ep-font-weight-bold: 700;
  
  /* Line Heights */
  --ep-line-height-tight: 1.25;
  --ep-line-height-normal: 1.5;
  --ep-line-height-relaxed: 1.75;
  
  /* ========================================
     GRID-BASED SPACING SYSTEM
     ======================================== */
  
  /* Base Grid Unit - Change this to adjust entire spacing system */
  --ep-grid-base: 4px;  /* Base unit - all spacing is multiples of this */
  
  /* Spacing Scale - Based on 4px grid */
  --ep-spacing-xs: calc(var(--ep-grid-base) * 1);   /* 4px */
  --ep-spacing-sm: calc(var(--ep-grid-base) * 2);   /* 8px */
  --ep-spacing-md: calc(var(--ep-grid-base) * 4);   /* 16px */
  --ep-spacing-lg: calc(var(--ep-grid-base) * 6);   /* 24px */
  --ep-spacing-xl: calc(var(--ep-grid-base) * 8);   /* 32px */
  --ep-spacing-2xl: calc(var(--ep-grid-base) * 12); /* 48px */
  --ep-spacing-3xl: calc(var(--ep-grid-base) * 16); /* 64px */
  
  /* Form Grid Spacing */
  --ep-form-grid-gap: var(--ep-spacing-md);        /* 16px - gap between form fields */
  --ep-form-field-padding-x: var(--ep-spacing-md); /* 16px - horizontal padding */
  --ep-form-field-padding-y: var(--ep-spacing-sm); /* 8px - vertical padding */
  --ep-form-group-margin: var(--ep-spacing-lg);    /* 24px - margin between form groups */
  --ep-form-label-margin: var(--ep-spacing-xs);   /* 4px - margin below label */
  
  /* Table Grid Spacing */
  --ep-table-cell-padding-x: calc(var(--ep-grid-base) * 5);  /* 20px - horizontal cell padding */
  --ep-table-cell-padding-y: calc(var(--ep-grid-base) * 3.5); /* 14px - vertical cell padding */
  --ep-table-header-padding-x: var(--ep-table-cell-padding-x);
  --ep-table-header-padding-y: var(--ep-table-cell-padding-y);
  --ep-table-border-width: var(--ep-list-divider-width);      /* 3px — table row dividers match ep-list */
  --ep-table-gap: var(--ep-spacing-md);                      /* 16px - gap between table sections */
  
  /* List Grid Spacing */
  --ep-list-item-padding-x: var(--ep-spacing-md);  /* 16px - horizontal list item padding */
  --ep-list-item-padding-y: var(--ep-spacing-sm);   /* 8px - vertical list item padding */
  --ep-list-item-gap: var(--ep-spacing-xs);         /* 4px - gap between list items */
  --ep-list-margin: var(--ep-spacing-lg);           /* 24px - list margin */
  
  /* Card Grid Spacing */
  --ep-card-padding: var(--ep-spacing-lg);          /* 24px - card padding */
  --ep-card-gap: var(--ep-spacing-md);              /* 16px - gap between card sections */
  --ep-card-margin: var(--ep-spacing-lg);           /* 24px - margin between cards */
  
  /* Component Grid Spacing */
  --ep-component-gap: var(--ep-spacing-md);         /* 16px - gap between components */
  --ep-component-padding: var(--ep-spacing-lg);     /* 24px - component padding */
  --ep-component-margin: var(--ep-spacing-lg);      /* 24px - component margin */
  
  /* ========================================
     COMPONENT SIZES
     ======================================== */
  
  /* Icon Sizes */
  --ep-icon-size-small: var(--ep-spacing-md);    /* 16px - small icons */
  --ep-icon-size-medium: var(--ep-spacing-2xl);   /* 48px - medium icons */
  --ep-icon-size-large: calc(var(--ep-grid-base) * 15); /* 60px - large icons/avatars */
  
  /* Avatar/Circle Sizes */
  --ep-avatar-size: calc(var(--ep-grid-base) * 15); /* 60px - event name circle */
  
  /* Chart Sizes */
  --ep-chart-size-small: calc(var(--ep-grid-base) * 30);   /* 120px - small charts */
  --ep-chart-size-medium: calc(var(--ep-grid-base) * 30);   /* 120px - medium charts */
  --ep-dot-size: calc(var(--ep-grid-base) * 3);             /* 12px - dots/badges */
  
  /* Layout Sizes */
  --ep-hero-height: calc(var(--ep-grid-base) * 75);        /* 300px - hero section height */
  --ep-content-max-width: calc(var(--ep-grid-base) * 200);  /* 800px - max content width */
  
  /* Grid Min/Max Widths */
  --ep-grid-min-width-small: calc(var(--ep-grid-base) * 35);   /* 140px */
  --ep-grid-min-width-medium: calc(var(--ep-grid-base) * 75);  /* 300px */
  --ep-grid-min-width-large: calc(var(--ep-grid-base) * 50);   /* 200px */
  
  /* ========================================
     BORDERS - Square edges everywhere
     ======================================== */
  
  --ep-border-radius: 0; /* Square edges - no rounded corners */
  --ep-border-width: 1px; /* Standard border width */
  --ep-border-width-thick: 2px; /* Thick border */
  --ep-border-width-medium: 3px; /* Medium border (for tab underlines, etc.) */

  /* Buttons — unified primary/secondary (Occasia Elegant) */
  --ep-button-bg: #ffffff;
  --ep-button-border-color: var(--ep-color-text-primary);
  --ep-button-border-width: 4px;
  --ep-button-hover-bg: var(--ep-color-bg-hover);
  --ep-button-active-bg: var(--ep-color-bg-tertiary);
  --ep-button-font-size: var(--ep-font-size-sm); /* Match budget / module action buttons */
  
  /* Checkbox/Radio Sizes */
  --ep-checkbox-size: var(--ep-font-size-lg); /* 18px - checkbox size */
  
  /* ========================================
     TRANSITIONS
     ======================================== */
  
  --ep-transition-fast: 0.15s ease;
  --ep-transition-base: 0.2s ease;
  --ep-transition-slow: 0.3s ease;
}

/**
 * Base Typography
 */

body {
  font-family: var(--ep-font-family-base);
  font-size: var(--ep-font-size-base);
  line-height: var(--ep-line-height-normal);
  color: var(--ep-color-text-primary);
}

/* Ensure all headings inherit EP font-family */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ep-font-family-base);
}

/* Exclude secondary header from EP design system base styles */
.ep-event-secondary-header,
.ep-event-secondary-header * {
  /* Secondary header has its own styling - do not override */
  /* All secondary header styles are in /themes/custom/occasia_elegant/css/secondary-header.css */
}

/**
 * Base Reset - Ensure square edges
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/**
 * Utility Classes for Easy Adjustment
 */

/* Color Overrides - Easy to change site-wide */
.ep-color-primary {
  color: var(--ep-color-primary);
}

.ep-bg-primary {
  background-color: var(--ep-color-primary);
}

.ep-border-primary {
  border-color: var(--ep-color-border-primary);
}

.ep-color-accent {
  color: var(--ep-color-accent);
}

.ep-bg-accent {
  background-color: var(--ep-color-accent);
}

.ep-bg-accent-light {
  background-color: var(--ep-color-accent-light);
}

.ep-border-accent {
  border-color: var(--ep-color-accent);
}

/**
 * Global Focus and Selection Prevention
 * 
 * Prevent flashing black lines from text selection or focus outlines
 */

/* Prevent flashing black lines from text selection or focus outlines globally */
* {
  -webkit-tap-highlight-color: transparent !important; /* Remove tap highlight on mobile */
}

/* Prevent selection highlight that might cause flashing */
*::selection,
*::-moz-selection {
  background: transparent !important;
}

/* Remove mouse-focus outlines globally; keep side borders (buttons lose left/right if stripped here). */
*:focus:not(:focus-visible) {
  outline: none !important;
}

/* Allow focus-visible for keyboard navigation accessibility */
*:focus-visible {
  outline: 2px solid var(--ep-color-primary, #a67a7a);
  outline-offset: 2px;
}

/* Footer links: text-only, no focus ring or icon chrome */
.site-footer a:focus-visible,
.site-footer .nav-link:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* Exception: body when focused (e.g. after blur from table cell) - no focus ring */
body:focus,
body:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

/* Exception: Table structure elements (table, thead, tbody, tr, th, td) - display-only, no focus ring */
.ep-table:focus,
.ep-table:focus-visible,
.ep-table table:focus,
.ep-table table:focus-visible,
.ep-table thead:focus,
.ep-table thead:focus-visible,
.ep-table tbody:focus,
.ep-table tbody:focus-visible,
.ep-table tr:focus,
.ep-table tr:focus-visible,
.ep-table th:focus,
.ep-table th:focus-visible,
.ep-table td:focus,
.ep-table td:focus-visible,
.ep-table col:focus,
.ep-table col:focus-visible,
.ep-table colgroup:focus,
.ep-table colgroup:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

/* ========================================
   GLOBAL LINK STYLES
   ======================================== */

/* Global link color - darker warm stone tones */
a,
.link {
  color: var(--ep-color-link);
  text-decoration: none;
  text-decoration-color: var(--ep-link-underline-color);
  transition: color var(--ep-transition-base);
}

a:hover,
a:focus,
a:focus-visible,
.link:hover,
.link:focus,
.link:focus-visible {
  color: var(--ep-color-link-hover);
  text-decoration: underline;
  text-decoration-color: var(--ep-link-underline-color);
  -webkit-text-decoration-color: var(--ep-link-underline-color);
}

/* EP link class for explicit link styling */
.ep-link {
  color: var(--ep-color-link);
  text-decoration: none;
  text-decoration-color: var(--ep-link-underline-color);
}

.ep-link:hover,
.ep-link:focus,
.ep-link:focus-visible {
  color: var(--ep-color-link-hover);
  text-decoration: underline;
  text-decoration-color: var(--ep-link-underline-color);
  -webkit-text-decoration-color: var(--ep-link-underline-color);
}

/* Buttons styled as links must not pick up text underlines */
a.btn:hover,
a.button:hover,
a.ep-button:hover,
.btn:hover,
.button:hover,
.ep-button:hover {
  text-decoration: none;
}