/* ==========================================================================
   Purpose: Define all global styles
   Authors: Ben Jackson
   ========================================================================== */

/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {
  /* The height of the header. */
  --header-height: 62px;

  /* Theme */

  /* Base */
  --background: #ffffff;
  --foreground: #000000;

  /* Surface / Layout */
  --surface: #f9fafb;
  --muted: #f3f4f6;
  --border: #e5e7eb;
  --ring: #ffa827;
  /* Brand color as focus ring */

  /* Brand / Primary Colors */
  --primary: #ffa827;
  --primary-foreground: #ffffff;
  --secondary: #f28b0d;
  --secondary-foreground: #ffffff;
  --accent: #ff7827;
  --accent-foreground: #111111;

  /* Semantic / Status */
  --success: #16a34a;
  --error: #dc2626;
  --warning: #facc15;
  --info: #2563eb;

  /* Typography */
  --heading: #111111;
  --text: #ffffff;
  --subtle-text: #6b7280;

  /* Interactive states */
  --link: #bc8c01;
  --link-hover: #8a6800;
  --disabled: #9ca3af;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   RESET / NORMALIZE
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  flex-direction: column;
  display: flex;
  min-height: 100vh;

  background-color: var(--background);

  overflow: hidden auto;
}

/* Background graident */
body::before {
  content: "";

  position: fixed;
  left: 0;
  top: 0;
  margin: auto;

  width: 100vw;
  height: 100vh;

  background: linear-gradient(45deg, #fff, #ccc);

  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  z-index: -1;
}

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

body,
input {
  color: var(--text);
  line-height: 1.5;
  font-family: system-ui, sans-serif;
}

a {
  color: var(--link);
}

a:hover {
  color: var(--link-hover);
}

svg {
  color: var(--text);
  stroke: var(--text);
}

button {
  color: var(--foreground);
}

button:disabled {
  background-color: var(--disabled);

  cursor: not-allowed;
}

.success {
  color: var(--success);
}

.error {
  color: var(--error);
}

.warning {
  color: var(--warning);
}

.info {
  color: var(--info);
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

/* Large Screens */
@media (min-width: 1000px) {
  .mobile {
    display: none !important;
  }
}

/* Small Screens */
@media (max-width: 999px) {
  .desktop {
    display: none !important;
  }
}

/* Show "..." when text is cut off */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}