/* TVV Design Tokens - Component-Based Token System
 *
 * =============================================================================
 * DESIGN SYSTEM RULES
 * =============================================================================
 *
 * SPACING & BORDER RADIUS RULE (4px Grid):
 *   Pyöristyksissä ja tyhjän tilan käytössä täytämme aina 4 px:n välein
 *   olevia lukuja (4, 8, 12, 16, 20, 24, 28, 32, 40, 48...)
 *
 *   ✓ CORRECT:   padding: 8px;   margin: 16px;   border-radius: 12px;
 *   ✗ WRONG:     padding: 10px;  margin: 15px;   border-radius: 5px;
 *
 *   Use spacing tokens: --space-4, --space-8, --space-12, --space-16, etc.
 *   Use radius tokens:  --radius-sm (4px), --radius-md (8px), --radius-lg (12px)
 *
 * =============================================================================
 * USAGE GUIDE
 * =============================================================================
 *
 * 1. PRIMITIVE TOKENS (Colors, Sizes)
 *    - Raw values like --sapphire-60, --space-16
 *    - DO NOT use directly in components unless creating new semantic tokens
 *
 * 2. SEMANTIC TOKENS (Theme Colors)
 *    - Named for purpose: --theme-brand, --theme-interactive
 *    - Use these for one-off styling needs
 *
 * 3. COMPONENT TOKENS (Buttons, Inputs, etc.)
 *    - Specific to UI patterns: --button-primary-bg, --input-border-focus
 *    - USE THESE for consistent component styling
 *
 * BUTTON EXAMPLE:
 *
 *   Legacy code pattern:
 *   <input type="button" class="btn-primary" value="Save">
 *
 *   CSS using component tokens:
 *   .btn-primary {
 *     background-color: var(--button-primary-bg);
 *     color: var(--button-primary-text);
 *     padding: var(--button-padding-md);
 *     border-radius: var(--button-radius);
 *     border: 1px solid var(--button-primary-border);
 *   }
 *   .btn-primary:hover {
 *     background-color: var(--button-primary-hover-bg);
 *     box-shadow: var(--button-primary-shadow);
 *   }
 *
 * INPUT EXAMPLE:
 *
 *   input[type="text"], input[type="email"], select {
 *     background-color: var(--input-bg);
 *     color: var(--input-text);
 *     border: 1px solid var(--input-border);
 *     padding: var(--input-padding);
 *     border-radius: var(--input-radius);
 *   }
 *   input:focus {
 *     border-color: var(--input-border-focus);
 *     box-shadow: var(--shadow-focus);
 *   }
 *   input.error {
 *     border-color: var(--input-error-border);
 *     background-color: var(--input-error-bg);
 *   }
 */

:root {

 /** Do not use CSS variables directly in components. */

 /** Theme colors */

  --sapphire-25: hsl(243, 35%, 25%); /* #2F2D4A */
  --sapphire-40: hsl(243, 45%, 40%); /* #383A73 */
  --sapphire-50: hsl(243, 60%, 40%); /* #293299 */
  --sapphire-60: hsl(243, 70%, 60%); /* #5952E0 */
  --sapphire-70: hsl(243, 100%, 70%); /* #6E66FF */
  --sapphire-80: hsl(235, 100%, 80%); /* #9999FF */
  --sapphire-85: hsl(235, 100%, 85%); /* #B3B3FF */
  --sapphire-90: hsl(235, 100%, 90%); /* #CCCCFF */
  --sapphire-95: hsl(235, 100%, 95%); /* #E6E6FF */

  --orchid-30:  hsl(276, 40%, 30%); /* Orchid 30 - darkest hover state */
  --orchid-50:  hsl(276, 50%, 50%); /* Orchid 50 - Save button */
  --orchid-60:  #B366B3; /* Orchid 60 - Change selection */
  --orchid-70:  #CC7ACC; /* Orchid 70 - lightest shade */


  --cyan-80 : #9ee0fa;

  /* Legacy purple aliases for backward compatibility */
  --purple-60:  var(--orchid-50);
  --purple-70:  var(--orchid-30); /* Hover: darker */

  --grey-99: #FCFCFD; /** juurimenu*/
  --grey-98: #F9F9FB; /** Koko sivuston pohjaväri */
  --grey-96: #F3F3F7;
  --grey-90: #E3E3E8;
  --grey-80: #c9c8d0;
  /* --grey-70: #aeadb8; */
  --grey-40: #5d5c70;
  --grey-30: #444356;

  --red-40: #C20A38;
  --red-60: #CC3D3D; /* Error red */
  --green-60: #2E7D32; /* Success green */
  --yellow-60: #F9A825; /* Warning yellow */

  /* === Neutral Surfaces === */

  --theme-panel:   #F0EEFB; /* Panel or container background */
  --theme-border:  var(--sapphire-25);

  /* === Background Colors === */
  --bg-white:      #FFFFFF;
  --bg-light-gray: var(--grey-98); /* Light gray for table cells, summaries */

  /* === Text === */
  --text-default:  #1E1E1E;
  --text-light:    #FFFFFF;
  --text-dark:     #000000;
  --text-muted:    #7A7A7A;
  --text-disabled: #666666;
  --text-error:    #FF0000;

  /* === Component Tokens: Buttons === */

  /* Primary Button - main actions (Save, Submit, OK) */
  --button-primary-bg:         var(--orchid-50);
  --button-primary-hover-bg:   var(--orchid-30);
  --button-primary-active-bg:  var(--sapphire-40);
  --button-primary-text:       var(--text-light);
  --button-primary-border:     transparent;
  --button-primary-shadow:     none;
  --button-save-bg: var(--orchid-50);
  --button-save-color: var(--text-light);

  /* Secondary Button - less prominent actions (Cancel, Back) */
  --button-secondary-bg:       var(--sapphire-85);
  --button-secondary-hover-bg: var(--sapphire-80);
  --button-secondary-active-bg: var(--sapphire-70);
  --button-secondary-text:     var(--text-default);
  --button-secondary-border:   var(--sapphire-40);
  --button-secondary-shadow:   none;

  /* Tertiary Button - minimal styling (links, icon buttons) */
  --button-tertiary-bg:        transparent;
  --button-tertiary-hover-bg:  var(--sapphire-90);
  --button-tertiary-text:      var(--sapphire-40);
  --button-tertiary-border:    transparent;

  /* Disabled Button - all button types when disabled */
  --button-disabled-bg:        #D9D9E2;
  --button-disabled-text:      #9B9BA6;
  --button-disabled-border:    #C9C9D3;
  --button-disabled-shadow:    none;

  /* Danger Button - destructive actions (Delete, Remove) */
  --button-danger-bg:          #D32F2F;
  --button-danger-hover-bg:    #B71C1C;
  --button-danger-text:        var(--text-light);
  --button-danger-border:      transparent;

  /* Button Sizing & Spacing */
  --button-padding-sm:         var(--space-4) var(--space-8);    /* 4px 8px */
  --button-padding-md:         var(--space-8) var(--space-12);   /* 8px 12px */
  --button-padding-lg:         var(--space-12) var(--space-16);  /* 12px 16px */
  --button-radius:             var(--radius-sm);  /* 4px */
  --button-font-weight:        lighter;

  /* === Component Tokens: Inputs & Forms === */

  --input-bg:              var(--bg-white);
  --input-border:          var(--sapphire-25);
  --input-border-hover:    var(--sapphire-40);
  --input-border-focus:    var(--sapphire-70);
  --input-text:            var(--text-default);
  --input-placeholder:     var(--text-muted);
  --input-disabled-bg:     #F5F5F5;
  --input-disabled-text:   var(--text-disabled);
  --input-padding:         var(--space-8) var(--space-12);  /* 8px 12px */
  --input-radius:          var(--radius-sm);  /* 4px */

  /* Form validation states */
  --input-error-border:    var(--text-error);
  --input-error-bg:        #FFF5F5;
  --input-success-border:  #2E7D32;
  --input-success-bg:      #F1F8F4;

  /* === Menus === */

  --menu-bottom: var(--grey-90);
  --menu-top: var(--grey-80);

  --menu-hover: var(--grey-40);


  --menu-bg:        var(--sapphire-85);
  --menu-drawer-bg2:        var(--grey-96);
  --menu-drawer-bg:        var(--bg-white);

  --menu-text:      var(--text-dark);

  /* --sapphire-85: #B2B8FF; /* Adjusted value for menu active background */

  --menu-active-bg: var(--sapphire-85);
  --menu-hover-bg:  var(--sapphire-80);

  /* === OLD Menu values (commented out, backup) === */
  /* --menu-hover-bg2:  var(--bg-light-gray); */
  /* --menu-top: var(--sapphire-85); */
  /* --menu-bottom: var(--sapphire-90); */
  /* --menu-drawer-bg2:        var(--sapphire-25); */
  /* --menu-drawer-bg:        var(--sapphire-40); */
  /* --menu-bg:        var(--sapphire-85); */
  /* --menu-text:      var(--text-light); */
  /* --menu-active-bg: var(--sapphire-60); */
  /* --menu-hover-bg:  var(--sapphire-40); */
  /* --menu-hover-bg2:  var(--sapphire-50); */

  /* === Dialogs / Modals === */

  --dialog-top:    var(--sapphire-25);
  --dialog-bottom: var(--sapphire-95);

  /* === Shadows & Elevations === */
  /* DESIGN RULE: Shadow blur and spread values follow 4px increment rule */
  --shadow-light:  0 1px 3px rgba(0, 0, 0, 0.1);   /* Legacy - minimal shadow */
  --shadow-medium: 0 2px 6px rgba(0, 0, 0, 0.15);  /* Legacy - medium shadow */
  --shadow-heavy:  0 4px 12px rgba(0, 0, 0, 0.2);  /* Standard heavy shadow */
  --shadow-focus:  0 0 0 4px var(--sapphire-90);   /* Focus ring - 4px */

  /* === Spacing Scale === */
  /* DESIGN RULE: Pyöristyksissä ja tyhjän tilan käytössä täytämme aina 4 px:n välein olevia lukuja (4,8,12,16,..) */
  --space-4:   0.25rem;  /* 4px */
  --space-8:   0.5rem;   /* 8px */
  --space-12:  0.75rem;  /* 12px */
  --space-16:  1rem;     /* 16px */
  --space-20:  1.25rem;  /* 20px */
  --space-24:  1.5rem;   /* 24px */
  --space-28:  1.75rem;  /* 28px */
  --space-32:  2rem;     /* 32px */
  --space-40:  2.5rem;   /* 40px */
  --space-48:  3rem;     /* 48px */

  /* Semantic spacing aliases (use these in components) */
  --space-xs:  var(--space-4);   /* 4px */
  --space-sm:  var(--space-8);   /* 8px */
  --space-md:  var(--space-16);  /* 16px */
  --space-lg:  var(--space-24);  /* 24px */
  --space-xl:  var(--space-32);  /* 32px */
  --space-xxl: var(--space-48);  /* 48px */

  /* === Border Radius === */
  /* DESIGN RULE: Border radius follows 4px increment rule */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-round: 50%;

  /* === Typography Scale === */
  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */

  --line-height-tight:  1.25;
  --line-height-normal: 1.5;
  --line-height-loose:  1.75;

	/* 6 main theme colors */
	--theme-brand: var(--sapphire-25); /* Deep indigo – headers/nav */
	--theme-interactive: var(--sapphire-80); /* Primary action violet */
  --theme-surface: #F5F5FA; /* App background */
	--theme-attention: #928FBD; /* Mid lavender for states */
	--theme-emphasis: #D3D4E8; /* Pale lilac highlights */
	--theme-neutral: #F3F2F7; /* Near-white neutral bg */

	/* Font stack */
	--font-base: Tahoma, Verdana, Arial, sans-serif;
	--font-heading: var(--font-base);

  /* Break/Rest Periods */
  --theme-break-bg: var(--sapphire-60);  /* Meal/rest breaks in hourly view */

  /* Tables */
  --table-header-bg: var(--sapphire-25); /* Dark header rows - Sapphire 25 */
  --table-header-bg2: var(--sapphire-80); /* Light alternating rows */
  --table-header-bg3: var(--sapphire-85);  /* Even lighter rows */
  --table-header-bg4: var(--sapphire-90);  /* Fourth-level headers */
  --table-header-dark: var(--saphhire-25); /* Darkest sapphire for prominent headers */
  --table-row-hover-bg: var(--sapphire-70);
  --table-border: var(--grey-80);
  --table-cell-bg: #EEEEEE;  /* Light gray for table cells */
  --table-cell-alt: #E7E7E7; /* Slightly darker gray for alternating cells */
  --table-weekday-bg: var(--grey-98); /* Weekday cell background */
  --table-weekend-bg: var(--grey-90); /* Weekend cell background */
  --table-weekend-alt: #CCCCCC; /* Darker weekend cell background */
  --table-openws: var(--sapphire-95);

  /* Alternative header colors using sapphire variants */
  --header-dark: var(--sapphire-40);    /* Dark sapphire for primary headers */
  --header-medium: var(--sapphire-60);  /* Medium sapphire for hover/secondary */
  --header-light: var(--sapphire-80);   /* Light sapphire for borders/accents */

  /* Hover states for tables - lighter sapphire shades */
  --table-hover-light: #CFD7FF;  /* Light hover state */
  --table-hover-medium: #BFCFFF; /* Medium hover state */
  --table-hover-dark: #AFC7FF;   /* Dark hover state */

  /* Generic borders */
  --border-light: #CCCCCC;

  /* Tabs */
  --tab-passive-bg: var(--sapphire-85);
  --tab-passive-hover-bg: var(--sapphire-90);
}

/* ============================================================================
 * REUSABLE COMPONENT CLASSES
 *
 * These classes can be used directly in legacy PHP/HTML code.
 * They use the component tokens defined above for consistent styling.
 * ============================================================================ */

/* Button Components */
.btn-vaihda-valintaa {
  font-family: var(--font-base);
  font-weight: var(--button-font-weight);
  padding: var(--button-padding-sm);
  border-radius: var(--button-radius);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s ease-in-out;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
}

.btn-primary {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
  border-color: var(--button-primary-border);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--button-primary-hover-bg);
  box-shadow: var(--button-primary-shadow);
}

.btn-primary:active:not(:disabled) {
  background-color: var(--button-primary-active-bg);
}

.btn-secondary {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  border-color: var(--button-secondary-border);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--button-secondary-hover-bg);
}

.btn-tertiary {
  background-color: var(--button-tertiary-bg);
  color: var(--button-tertiary-text);
  border-color: var(--button-tertiary-border);
}

.btn-tertiary:hover:not(:disabled) {
  background-color: var(--button-tertiary-hover-bg);
}

.btn-danger {
  background-color: var(--button-danger-bg);
  color: var(--button-danger-text);
  border-color: var(--button-danger-border);
}

.btn-danger:hover:not(:disabled) {
  background-color: var(--button-danger-hover-bg);
}

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-tertiary:disabled,
.btn-danger:disabled {
  background-color: var(--button-disabled-bg);
  color: var(--button-disabled-text);
  border-color: var(--button-disabled-border);
  cursor: not-allowed;
  box-shadow: none;
}

.btn-sm {
  padding: var(--button-padding-sm);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--button-padding-lg);
  font-size: var(--font-size-lg);
}

/* Input Components */
/* .input,
.form-control {
  font-family: var(--font-base);
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--input-border);
  padding: var(--input-padding);
  border-radius: var(--input-radius);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.input:hover:not(:disabled),
.form-control:hover:not(:disabled) {
  border-color: var(--input-border-hover);
}

.input:focus,
.form-control:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--shadow-focus);
}

.input:disabled,
.form-control:disabled {
  background-color: var(--input-disabled-bg);
  color: var(--input-disabled-text);
  cursor: not-allowed;
}

.input.error,
.form-control.error {
  border-color: var(--input-error-border);
  background-color: var(--input-error-bg);
}

.input.success,
.form-control.success {
  border-color: var(--input-success-border);
  background-color: var(--input-success-bg);
} */

/* Usage Examples in PHP:
 *
 * Button:
 * <input type="button" class="btn btn-primary" value="<?=_("Tallenna");?>">
 * <input type="submit" class="btn btn-secondary btn-sm" value="<?=_("Peruuta");?>">
 * <button class="btn btn-danger" onclick="delete();"><?=_("Poista");?></button>
 *
 * Input:
 * <input type="text" class="form-control" name="etunimi" value="<?=h($etunimi);?>">
 * <input type="email" class="form-control error" name="email">
 * <select class="form-control">...</select>
 */