/**
 * Semantic Theme Variables
 * Maps foundation palette tokens to semantic roles.
 * Light mode defaults here; dark overrides in _dark-overrides.css.
 */

@import url('theme-palette.css');
@import url('_dark-overrides.css');

:root {
  /* --- Brand identity --- */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --color-accent:       #0D9488;
  --color-accent-hover: #0F766E;
  --color-accent-light: #99F6E4;
  --color-accent-bg:    rgba(13, 148, 136, 0.10);
  --color-accent-text:  #115E59;

  /* Subtle crosshatch background texture (lightweight SVG) */
  --bg-texture: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l20 20M20 0L0 20' stroke='%23000' stroke-opacity='0.03' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");

  /* --- Page backgrounds --- */
  --color-bg-page:    var(--color-gray-200);
  --color-bg-deep:    var(--color-gray-300);
  --color-bg-surface: #fff;
  --color-bg-raised:  var(--color-gray-100);
  --color-bg-sunken:  var(--color-gray-200);
  --color-bg-hover:   var(--color-gray-200);
  --color-bg-card:    #fff;
  --color-bg-input:   #fff;
  --color-bg-modal:   #fff;

  /* --- Text --- */
  --color-text-primary:   var(--color-gray-900);
  --color-text-secondary: var(--color-gray-650);
  --color-text-muted:     var(--color-gray-550);
  --color-text-faint:     var(--color-gray-500);
  --color-text-inverse:    #fff;
  --color-text-on-warning: #1a1a1a;

  /* --- Borders --- */
  --color-border-default: #ddd;
  --color-border-subtle:  var(--color-gray-300);
  --color-border-strong:  var(--color-gray-400);
  --color-border-accent:  rgba(0, 123, 255, 0.3);

  /* --- Interactive / Primary --- */
  --color-primary:       #007bff;
  --color-primary-hover: #0056b3;
  --color-primary-light: var(--color-blue-100);
  --color-primary-bg:    var(--color-blue-50);

  /* --- Status: Success --- */
  --color-success:       var(--color-green-500);
  --color-success-hover: var(--color-green-600);
  --color-success-light: var(--color-green-100);
  --color-success-bg:    var(--color-green-50);
  --color-success-text:  var(--color-green-800);

  /* --- Status: Warning --- */
  --color-warning:       #ffc107;
  --color-warning-hover: #e0a800;
  --color-warning-light: var(--color-yellow-200);
  --color-warning-bg:    var(--color-yellow-50);
  --color-warning-text:  var(--color-yellow-800);

  /* --- Status: Danger --- */
  --color-danger:       var(--color-red-500);
  --color-danger-hover: #c82333;
  --color-danger-light: var(--color-red-100);
  --color-danger-bg:    var(--color-red-50);
  --color-danger-text:  var(--color-red-700);

  /* --- Status: Info --- */
  --color-info:       #17a2b8;
  --color-info-light: #d1ecf1;
  --color-info-hover: #138496;
  --color-info-text:  var(--color-blue-700);

  /* --- Changeover phases (VVP): 1 määre / 2 vahetus / 3 hooldus --- */
  --color-phase-1: var(--color-cyan-500);
  --color-phase-2: var(--color-indigo-500);
  --color-phase-3: var(--color-amber-500);

  /* --- Product setup run ("Toote seadistamine"): light pink + stripes --- */
  --color-setup-run-bg:     var(--color-pink-50);
  --color-setup-run-stripe: rgba(236, 64, 122, 0.16);
  --color-setup-run-border: var(--color-pink-500);
  --color-setup-run-text:   var(--color-pink-800);

  /* --- Orange (separate from warning) --- */
  --color-orange:       var(--color-orange-400);
  --color-orange-light: var(--color-orange-100);
  --color-orange-bg:    var(--color-orange-50);
  --color-orange-text:  var(--color-orange-600);
  --color-orange-hover: var(--color-orange-500);

  /* --- Purple --- */
  --color-purple:       var(--color-purple-500);
  --color-purple-light: var(--color-purple-100);
  --color-purple-bg:    var(--color-purple-50);
  --color-purple-text:  var(--color-purple-800);

  /* --- Scrollbar --- */
  --color-scrollbar-track: var(--color-slate-100);
  --color-scrollbar-thumb: var(--color-slate-300);
  --color-scrollbar-hover: var(--color-slate-400);

  /* --- Focus ring --- */
  --color-focus-ring: rgba(59, 130, 246, 0.15);

  /* --- Zebra stripe tint (planning grid odd rows) --- */
  --color-zebra-tint: rgba(0, 0, 0, 0.06);

  /* --- Hatch pattern (elapsed/unavailable diagonal stripes) --- */
  --color-hatch-pattern: rgba(0, 0, 0, 0.05);

  /* --- Highlight / Selection --- */
  --color-highlight-bg:    #fef08a;
  --color-selected-bg:     #f0f7ff;
  --color-selected-border: #007bff;

  /* --- Overlay --- */
  --color-overlay: rgba(0, 0, 0, 0.5);

  /* =======================================================================
     Backward compatibility aliases
     Maps old layout.css variable names to new semantic names.
     Remove after full migration to --color-* variables.
     ======================================================================= */
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-light: var(--color-primary-light);
  --success: var(--color-success);
  --success-light: var(--color-success-light);
  --success-dark: var(--color-success-text);
  --warning: var(--color-warning);
  --warning-light: var(--color-warning-light);
  --warning-dark: var(--color-warning-text);
  --danger: var(--color-danger);
  --danger-light: var(--color-danger-light);
  --danger-dark: var(--color-danger-text);
  --info: var(--color-info);
  --info-light: var(--color-info-light);
  --dark: var(--color-text-primary);
  --light: var(--color-gray-150);
  --white: var(--color-bg-surface);
  --border: var(--color-border-default);
  --gray-100: var(--color-gray-100);
  --gray-200: var(--color-gray-200);
  --gray-300: var(--color-gray-300);
  --gray-400: var(--color-gray-400);
  --gray-500: var(--color-gray-500);
  --gray-600: var(--color-gray-600);
  --gray-700: var(--color-gray-700);
  --gray-800: var(--color-gray-800);
  --gray-900: var(--color-gray-900);
}