@import "tailwindcss";

:root {
  --background: #f7f7f8;
  --foreground: #111111;
  --muted: #5b5b5b;
  --subtle: #8a8a8a;
  --border: rgba(17, 17, 17, 0.14);
  --card: #ffffff;
  --swiss-red: #d62839;
  --swiss-red-deep: #a81f2d;
  --swiss-red-soft: #fdeaea;
  --green: #1a7a4a;
  --green-soft: #d6efe4;
  --yellow: #9a6400;
  --yellow-soft: #fef3c7;

  --radius: 8px;

  --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.04), 0 10px 28px -18px rgba(17, 17, 17, 0.22);
  --shadow-float: 0 2px 6px rgba(17, 17, 17, 0.05), 0 18px 42px -22px rgba(17, 17, 17, 0.28);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-inter);
  --font-mono: "SFMono-Regular", Consolas, monospace;
  --radius-swiss: var(--radius);
  --shadow-card: var(--shadow-card);
  --shadow-float: var(--shadow-float);
  --animate-fade-up: fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  --animate-fade-in: fade-in 0.35s ease-out both;
  --animate-shimmer: shimmer 1.6s ease-in-out infinite;

  @keyframes fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes shimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(214, 40, 57, 0.07), transparent 60%),
    radial-gradient(900px 460px at 6% 4%, rgba(17, 17, 17, 0.035), transparent 55%),
    var(--background);
  background-attachment: fixed;
  color: var(--foreground);
  font-family: var(--font-inter), Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button, textarea, input {
  font: inherit;
}

/* Consistent, on-brand focus treatment across the app. */
:focus-visible {
  outline: 2px solid var(--swiss-red);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection {
  background: rgba(214, 40, 57, 0.18);
}

/* Thin, unobtrusive scrollbar that matches the editorial tone. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(17, 17, 17, 0.22) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(17, 17, 17, 0.18);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(17, 17, 17, 0.32);
  background-clip: content-box;
}

/* Shared micro-label used for section eyebrows throughout the interface. */
.micro-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--subtle);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}