/* ============================================================================
   KỆ TIMESHEET — BASE STYLES (CSS variables, theme, reset, typography)
   ============================================================================
   Version: 2.0
   Date: May 20, 2026
   Source of truth: BRGL_F1__KE.pdf (Brand Guidelines v1.0)

   Changes from v1.0:
   - Updated --deep-violet from #4B00B2 to #2d2c71 (per PDF page 22)
   - Added --light-purple #9e89c0 (logo gradient top)
   - Added supplementary palette (orange, yellow, deep blue) — max <30% usage
   - Added accent palette (6 colors) — max <10% usage each
   - All other variables unchanged (typography, spacing, radius, shadows, themes)

   Load order: base.css → components.css → page-specific.css
   ============================================================================ */


/* ============================================================================
   CSS RESET (modern, minimal)
   ============================================================================ */

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

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-page);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

p {
  line-height: var(--leading-normal);
}


/* ============================================================================
   CSS VARIABLES — DESIGN TOKENS
   ============================================================================ */

:root {

  /* ==========================================================================
     BRAND COLORS (per BRGL_F1__KE.pdf Brand Guidelines v1.0)
     ========================================================================== */

  /* Primary palette — Logo & main brand */
  --deep-violet:       #2d2c71;   /* Logo gradient bottom, brand primary (PDF page 22) */
  --vibrant-purple:    #9A29E2;   /* Accent, interactive elements, buttons */
  --soft-lavender:     #DDACDD;   /* Subtle tones, decorative */
  --light-periwinkle:  #E6EEFA;   /* Light backgrounds, cards */
  --light-purple:      #9e89c0;   /* Logo gradient top (PDF page 22) */
  --pure-white:        #FFFFFF;

  /* Supplementary palette — Marketing & decorative (max <30% of design) */
  --brand-orange:      #f47920;   /* Nhiệt huyết, truyền cảm hứng */
  --brand-yellow:      #fcea10;   /* Ánh sáng, nổi bật trên nền tối */
  --brand-deep-blue:   #1818b2;   /* Trí tuệ, tin cậy */

  /* Accent palette — Charts, tags, illustrations (max <10% each) */
  --accent-purple-2:   #70449e;
  --accent-cyan:       #1C9AD6;
  --accent-teal:       #14B795;
  --accent-lime:       #8DC63F;
  --accent-magenta:    #CF2C91;
  --accent-red:        #ED1C29;

  /* Status colors (universal — independent of brand) */
  --green-ok:          #3DD68C;
  --amber-warning:     #F0A429;
  --red-critical:      #F06060;
  --info-blue:         #4A90E2;


  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */

  /* Font families */
  --font-brand: 'SFU Helvetica', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font sizes */
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   22px;
  --text-3xl:   28px;
  --text-4xl:   36px;
  --text-5xl:   48px;   /* kiosk clock/timer (employee clock in/out) */

  /* Font weights (only 400 + 500 per design system) */
  --weight-regular: 400;
  --weight-medium:  500;

  /* Line heights */
  --leading-tight:  1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;


  /* ==========================================================================
     SPACING SCALE (rem-based for accessibility)
     ========================================================================== */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;


  /* ==========================================================================
     BORDER RADIUS
     ========================================================================== */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;


  /* ==========================================================================
     SHADOWS
     ========================================================================== */

  --shadow-sm:  0 1px 2px rgba(45, 44, 113, 0.06);
  --shadow-md:  0 4px 8px rgba(45, 44, 113, 0.08), 0 2px 4px rgba(45, 44, 113, 0.04);
  --shadow-lg:  0 10px 20px rgba(45, 44, 113, 0.10), 0 4px 8px rgba(45, 44, 113, 0.05);
  --shadow-xl:  0 20px 40px rgba(45, 44, 113, 0.12), 0 8px 16px rgba(45, 44, 113, 0.06);


  /* ==========================================================================
     TRANSITIONS
     ========================================================================== */

  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

}


/* ============================================================================
   LIGHT THEME (default — Owner-facing dashboards)
   ============================================================================ */

:root,
[data-theme="light"] {
  --bg-page:           #F7F5FA;
  --bg-card:           #FFFFFF;
  --bg-input:          #FFFFFF;
  --bg-hover:          #F0EDF7;

  --text-primary:      #2C2C2A;
  --text-secondary:    #5F5E5A;
  --text-muted:        #888780;
  --text-on-brand:     #FFFFFF;

  --border-default:    rgba(45, 44, 113, 0.10);
  --border-strong:     rgba(45, 44, 113, 0.20);
  --border-input:      rgba(45, 44, 113, 0.15);

  --accent:            var(--vibrant-purple);
  --accent-soft:       rgba(154, 41, 226, 0.10);
  --accent-strong:     var(--deep-violet);
}


/* ============================================================================
   DARK THEME (Employee-facing clock-in kiosks)
   ============================================================================ */

[data-theme="dark"] {
  --bg-page:           #0E0B1A;
  --bg-card:           #160F2A;
  --bg-input:          #1E1535;
  --bg-hover:          #2A1F45;

  --text-primary:      #F0EEFF;
  --text-secondary:    #C5BBE0;
  --text-muted:        #9B8EC4;
  --text-on-brand:     #FFFFFF;

  --border-default:    rgba(154, 41, 226, 0.15);
  --border-strong:     rgba(154, 41, 226, 0.30);
  --border-input:      rgba(154, 41, 226, 0.20);

  --accent:            var(--vibrant-purple);
  --accent-soft:       rgba(154, 41, 226, 0.20);
  --accent-strong:     var(--soft-lavender);
}


/* ============================================================================
   UTILITY CLASSES (used across pages)
   ============================================================================ */

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-accent    { color: var(--accent); }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }

.w-full { width: 100%; }
.h-full { height: 100%; }

.hidden { display: none; }


/* ============================================================================
   FOCUS STATES (accessibility)
   ============================================================================ */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Remove default focus on mouse click, keep for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}


/* ============================================================================
   PRINT STYLES (basic)
   ============================================================================ */

@media print {
  body {
    background: white;
    color: black;
  }
  .no-print {
    display: none !important;
  }
}