/* TMK Refrigeration — Design Token System */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Montserrat:wght@300;400;500;600;700&family=Source+Sans+Pro:wght@300;400;600;700&display=swap');

:root {
  /* Brand Colors */
  --primary:       #1cc1ed;
  --primary-dark:  #0881a1;
  --primary-light: #7ed9fe;
  --deep-teal:     #022e3b;
  --dark-teal:     #033543;
  --mid-teal:      #054d61;
  --teal:          #0881a1;
  --surface:       #f6f6f6;
  --surface-2:     #eeeeee;
  --surface-dark:  #151515;
  --text:          #161616;
  --text-2:        #595959;
  --text-3:        #898989;
  --border:        #e2e2e2;
  --border-dark:   #c8c8c8;
  --white:         #ffffff;
  --success:       #20b038;
  --success-light: #e8f8eb;
  --warning:       #ed9238;
  --warning-light: #fef3e6;
  --danger:        #e67345;
  --danger-light:  #fdf0ec;
  --info:          #1cc1ed;
  --info-light:    #e5f8fd;

  /* Sidebar */
  --sidebar-w:     260px;
  --sidebar-bg:    #022e3b;
  --sidebar-hover: rgba(28,193,237,0.10);
  --sidebar-active-bg: rgba(28,193,237,0.15);
  --sidebar-active-border: #1cc1ed;
  --sidebar-text:  rgba(255,255,255,0.75);
  --sidebar-text-active: #1cc1ed;
  --sidebar-text-header: rgba(255,255,255,0.40);

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-ui:      'Montserrat', system-ui, sans-serif;
  --font-body:    'Source Sans Pro', system-ui, sans-serif;

  /* Spacing */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.16);

  /* Transitions */
  --t: 200ms ease;
  --t-slow: 350ms ease;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --surface:   #1a1a1a;
    --surface-2: #222222;
    --text:      #f0f0f0;
    --text-2:    #aaaaaa;
    --border:    #2e2e2e;
    --white:     #1e1e1e;
  }
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; }
h4, h5, h6, label, button, .badge, .nav-label, th { font-family: var(--font-ui); }

a { color: var(--primary); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--primary-dark); }

img { max-width: 100%; display: block; }

input, textarea, select {
  font-family: var(--font-body);
  font-size: 15px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  width: 100%;
  background: var(--white);
  color: var(--text);
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(28,193,237,0.15);
}

::placeholder { color: var(--text-3); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }