alva/felsokning/app/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Lennart Svenssons Konditorivaror - Traditionell Svensk Konditoristil */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&display=swap');

@layer base {
  :root {
    --background: 38 25% 96%;
    --foreground: 25 30% 12%;

    --card: 40 30% 94%;
    --card-foreground: 25 30% 12%;

    --popover: 40 30% 94%;
    --popover-foreground: 25 30% 12%;

    --primary: 4 70% 45%;
    --primary-foreground: 40 30% 96%;

    --secondary: 35 20% 88%;
    --secondary-foreground: 25 30% 18%;

    --muted: 35 15% 85%;
    --muted-foreground: 0 0% 0%;

    --accent: 4 70% 45%;
    --accent-foreground: 40 30% 96%;

    --destructive: 4 70% 40%;
    --destructive-foreground: 40 30% 96%;

    --border: 30 20% 80%;
    --input: 30 20% 80%;
    --ring: 4 70% 45%;

    --radius: 0.25rem;

    /* Custom tokens */
    --gradient-warm: linear-gradient(180deg, hsl(40 30% 94%) 0%, hsl(35 25% 90%) 100%);
    --shadow-classic: 0 4px 20px -4px hsl(25 30% 12% / 0.15);
    --shadow-card: 0 2px 8px hsl(25 30% 12% / 0.08);

    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Crimson Text', serif;
  }

  .dark {
    --background: 25 20% 8%;
    --foreground: 38 25% 92%;
    --card: 25 18% 12%;
    --card-foreground: 38 25% 92%;
    --primary: 30 50% 55%;
    --primary-foreground: 25 20% 8%;
    --secondary: 25 15% 18%;
    --secondary-foreground: 38 25% 92%;
    --muted: 25 12% 22%;
    --muted-foreground: 30 15% 60%;
    --border: 25 15% 25%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: var(--font-body);
  }

  /* Ensure full-width layout (avoid template max-width/padding on #root) */
  #root {
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: inherit;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
  }
}

@layer components {
  .hero-gradient {
    background: var(--gradient-warm);
  }

  .text-accent-warm {
    color: hsl(var(--accent));
  }

  .card-classic {
    box-shadow: var(--shadow-card);
    border: 1px solid hsl(var(--border));
    transition: all 0.3s ease;
  }

  .card-classic:hover {
    box-shadow: var(--shadow-classic);
    transform: translateY(-4px);
  }

  .btn-classic {
    @apply bg-primary text-primary-foreground font-semibold transition-all duration-300;
    border: 2px solid hsl(var(--primary));
  }

  .btn-classic:hover {
    @apply bg-transparent;
    color: hsl(var(--primary));
  }

  .btn-outline-classic {
    @apply bg-transparent font-semibold transition-all duration-300;
    color: hsl(var(--primary));
    border: 2px solid hsl(var(--primary));
  }

  .btn-outline-classic:hover {
    @apply bg-primary text-primary-foreground;
  }

  .divider-ornament {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .divider-ornament::before,
  .divider-ornament::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, hsl(var(--border)), transparent);
  }

  .ornament {
    color: hsl(var(--primary));
    font-family: var(--font-display);
    font-size: 1.5rem;
  }
}

/* ---- ALVA-ytan (ALVA-SPEC-001 · paragraf 6) --------------------------
 *
 * Värdapplikationen sätter en antikva på body. ALVA ärvde den, vilket är
 * fel tradition för ett system som beskriver sig som ett tyskt
 * industriverktyg. Reglerna nedan gäller bara ALVA-ytan; butiken lämnas
 * som den är.
 *
 * Snittet deklareras i src/alva/system.ts och speglas här därför att
 * kaskaden måste nå även de element komponenterna inte själva sätter
 * stil på — rubriker fångas annars av värdapplikationens h1–h6-regel.
 */
.alva-yta,
.alva-yta h1,
.alva-yta h2,
.alva-yta h3,
.alva-yta h4,
.alva-yta h5,
.alva-yta h6,
.alva-yta button,
.alva-yta input,
.alva-yta select,
.alva-yta textarea {
  font-family:
    "DIN 2014",
    "FF DIN",
    "IBM Plex Sans",
    "Inter",
    "Helvetica Neue",
    Helvetica,
    Arial,
    system-ui,
    sans-serif;
}

/* Siffror står i kolumn. En beteckning jämförs oftare än den läses. */
.alva-yta {
  font-variant-numeric: tabular-nums;
}

.alva-yta .font-mono {
  font-family:
    ui-monospace,
    "IBM Plex Mono",
    "SF Mono",
    "Cascadia Mono",
    Menlo,
    Consolas,
    "Liberation Mono",
    monospace;
}

@layer utilities {
  .animate-fade-up {
    animation: fadeUp 0.8s ease-out forwards;
  }

  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .text-balance {
    text-wrap: balance;
  }

  /* Calculator slider — minimal, exclusive */
  .calculator-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: hsl(var(--border));
    border-radius: 999px;
    outline: none;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .calculator-slider:hover {
    background: hsl(var(--muted));
  }
  .calculator-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: hsl(var(--primary));
    border: 3px solid hsl(var(--card));
    box-shadow: 0 2px 10px hsl(var(--primary) / 0.35);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .calculator-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px hsl(var(--primary) / 0.5);
  }
  .calculator-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
  }
  .calculator-slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: hsl(var(--primary));
    border: 3px solid hsl(var(--card));
    box-shadow: 0 2px 10px hsl(var(--primary) / 0.35);
    cursor: grab;
  }
}

/* Guidad Felsökning: utskriftsvänlig kundrapport — mörkt arbetsläge på
   skärm, svart på vitt på papper. Interaktiva element döljs vid utskrift. */
@media print {
  .felsokning-print,
  .felsokning-print * {
    background: #fff !important;
    color: #111 !important;
    border-color: #d4d4d8 !important;
    animation: none !important;
  }
  .felsokning-print nav,
  .felsokning-print button,
  .felsokning-print input,
  .felsokning-print textarea {
    display: none !important;
  }
}