:root {
      --primary: #6355C2;
      --background-light: #F8F8FA;
      --card-light: #FFFFFF;
      --text-light-primary: #2D3748;
      --text-light-secondary: #718096;
      --border-light: #E2E8F0;
    }

    /* remove all focus outlines (kept for consistency) */
    input:focus,
    input:focus-visible,
    textarea:focus,
    textarea:focus-visible,
    select:focus,
    select:focus-visible,
    button:focus {
      outline: none !important;
      border-color: var(--border-light) !important;
      box-shadow: none !important;
    }

    .bg-primary {
      background-color: var(--primary);
    }

    .text-primary {
      color: var(--primary);
    }

    .border-primary {
      border-color: var(--primary);
    }

    .hover\:bg-primary:hover {
      background-color: var(--primary);
    }

    .bg-background-light {
      background-color: var(--background-light);
    }

    .bg-card-light {
      background-color: var(--card-light);
    }

    .text-text-light-primary {
      color: var(--text-light-primary);
    }

    .text-text-light-secondary {
      color: var(--text-light-secondary);
    }

    .border-border-light {
      border-color: var(--border-light);
    }

    .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
      font-size: 24px;
    }

    body {
      font-family: "Clash Display", sans-serif !important;
      background-color: var(--background-light);
      margin: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    /* material icons exemption */
    .material-symbols-outlined {
      font-family: 'Material Symbols Outlined' !important;
    }

    /* large 404 digit style */
    .error-digit {
      font-size: 8rem;
      line-height: 1;
      font-weight: 700;
      color: var(--primary);
      opacity: 0.7;
      letter-spacing: -4px;
    }

    @media (max-width: 480px) {
      .error-digit {
        font-size: 6rem;
      }
    }