lapikud.github.io/src/app.css

/* Global stylesheet */

@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;500;600;700&display=swap");
@import "tailwindcss";

/* Overwriting tailwindcss specific variables */
@theme {
  --color-orange-500: #f0941d;
  --color-orange-300: #ffa940;
  --color-orange-600: #d67d0a;

  --color-gray-100: #fffdfa;
  --color-gray-900: #0d0d0d;

  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 16px;
  --spacing-4: 24px;
  --spacing-5: 32px;
  --spacing-6: 48px;

  --max-width-2xl: 700px;
  --max-width-3xl: 800px;
  --max-width-4xl: 900px;
}

/* Design tokens & theme variables (light defaults) */
:root {
  /* spacing scale */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 16px;
  --spacing-4: 24px;
  --spacing-5: 32px;
  --spacing-6: 48px;

  /* type scale (fluid base + modular sizes) */
  --fs-base: clamp(0.95rem, 0.9vw + 0.9rem, 1rem);
  --fs-xs: 0.85rem;
  --fs-sm: 0.92rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --line-height: 1.45;
}

/* Global box sizing & accessible defaults */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-family: "Unbounded", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--fs-base);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  line-height: var(--line-height);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, color 160ms ease;
  overflow-x: hidden;
  font-size: var(--fs-lg);
}

/* Basic link & button defaults that components inherit */
a {
  text-decoration: none;
  font-weight: 550;
}
a:hover {
  text-decoration: underline;
}

button,
input[type="button"],
input[type="submit"] {
  font: inherit;
  border: 1px solid var(--color-border); /* TODO: fix css magic (we need the border, but the variable doesnt exist, but you cant remove it either) */
  padding: 0.5em 0.9em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: box-shadow 120ms ease, transform 120ms ease,
    border-color 120ms ease;
}
button:active {
  transform: translateY(1px);
}
button:focus {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 14%, transparent); /* TODO: change same magic here */
  outline-offset: 2px;
}

/* Utility: visually hidden (accessible labels) */
.sr-only,
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* Show/hide helpers for breakpoints */
.mobile-only {
  display: block;
}
.desktop-only {
  display: none;
}
@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
  .desktop-only {
    display: block;
  }
}

/* Accessibility settings */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  /* Automatically apply final animation states */
  [data-animation] { /* Everything with animation needs to be marked like this: <div class="fade-in" data-animation>Hello World</div> */
    all: unset !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  * {
    background: solid !important;
    backdrop-filter: none !important;
  }
}

@media (forced-colors: active) {
  * {
    background: Window !important;
    color: WindowText !important;
    border-color: WindowText !important;
  }
  a {
    color: Highlight !important;
  }
}