/* /css/base.css */

:root {
  /* Color Palette */
  --bg-color: #0a0a0a;
  --surface-color: #1a1a1a;
  --ui-accent: #ffffff;
  --danger-color: #ff3b30;
  --success-color: #4cd964;
  --timer-color: #ffcc00;
  --text-main: #eeeeee;

  /* 
     Safe Area Insets 
     Provides fallback to 0px for compatibility with legacy browsers/environments.
  */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);

  /* Legacy alias support */
  --sat: var(--safe-area-top);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body, html {
  width: 100%;
  height: 100%;
  background-color: var(--bg-color);
  overflow: hidden; /* Maintains strict viewport control */
}

/**
 * Implementation of Safe Area Padding.
 * Uses border-box to ensure the 100% height includes the padding,
 * preventing vertical scrollbar generation on fixed viewports.
 */
body {
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
}