/* ==========================================================================
   DC Trafikkopplæring — designtokens
   --------------------------------------------------------------------------
   Palett: "Norsk vinterkveld". Hentet fra mørkekjøringen — lav vintersol,
   lange skumringstimer, gule midtlinjer i lyskjeglen. Den gule fargen fra
   den gamle flyeren er beholdt som pigment, men degradert fra flate til
   hårstrek: den er nå en midtlinje, ikke en vegg.

   Ved port til Next.js: dette filinnholdet flyttes rett inn i
   app/globals.css. Ingen verdier er hardkodet andre steder.
   ========================================================================== */

:root {
  /* --- Farge: mørk ende ------------------------------------------------ */
  --natt: #0a1019; /* dyp marineblå-svart. Bakgrunn hero + footer          */
  --natt-dyp: #060b12; /* under natt — brukes til lagdeling               */
  --dis: #141d2b; /* hevet flate på mørk bakgrunn                         */
  --dis-hev: #1c2839; /* hover-flate på mørk bakgrunn                     */
  --kant-mork: #223044; /* hårstrek på mørk bakgrunn                      */

  /* --- Farge: lys ende -------------------------------------------------- */
  --sno: #f6f8fa; /* sidebakgrunn                                          */
  --papir: #ffffff; /* kortflate                                           */
  --kant: #e3e8ee; /* hårstrek på lys bakgrunn                            */
  --kant-sterk: #cdd6e0; /* hårstrek som må sees                          */

  /* --- Farge: tekst ----------------------------------------------------- */
  --blekk: #0a1019; /* brødtekst på lys bakgrunn                          */
  --blekk-dempet: #56637a; /* sekundærtekst på lys bakgrunn               */
  --stein: #8b9ab0; /* sekundærtekst på mørk bakgrunn                     */
  --stein-svak: #5d6b80; /* tertiærtekst på mørk bakgrunn                 */

  /* --- Farge: aksent ---------------------------------------------------- */
  --midtlinje: #f5b335; /* DEN aksenten. Hårstrek, merker, primær CTA     */
  --midtlinje-dyp: #d9971d; /* hover på gul flate                         */
  --midtlinje-svak: rgba(245, 179, 53, 0.14); /* gult vask               */

  /* --- Farge: status ---------------------------------------------------- */
  --gress: #2f9e6b; /* bekreftet. Kun i booking/min side                   */
  --gress-svak: rgba(47, 158, 107, 0.12);
  --varsel: #c8502f; /* feil. Sparsomt                                     */
  --varsel-svak: rgba(200, 80, 47, 0.1);

  /* --- Typografi -------------------------------------------------------- */
  --skrift-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --skrift-brod: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --skrift-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --skrift-urdu: "Noto Nastaliq Urdu", serif;
  --skrift-punjabi: "Noto Sans Gurmukhi", sans-serif;

  /* Typeskala — 1.25 (major third), forankret i 16px.
     Display-trinnene klemmes mot viewport slik at lange norske
     sammensetninger ("trafikkopplæring", "mørkekjøring") ikke brekker. */
  --t-mikro: 0.6875rem; /* 11px — mono-etiketter, versalgemene            */
  --t-liten: 0.8125rem; /* 13px — hjelpetekst                             */
  --t-brod-s: 0.9375rem; /* 15px                                          */
  --t-brod: 1.0625rem; /* 17px — standard brødtekst                       */
  --t-brod-l: 1.1875rem; /* 19px — ingress                                */
  --t-h4: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
  --t-h3: clamp(1.375rem, 0.9vw + 1.1rem, 1.875rem);
  --t-h2: clamp(1.875rem, 2.2vw + 1.2rem, 3rem);
  --t-h1: clamp(2.5rem, 5.4vw + 0.6rem, 5.25rem);

  --spor-tett: -0.035em; /* display i store grader                        */
  --spor-normal: -0.011em;
  --spor-vid: 0.14em; /* mono-etiketter i versaler                        */

  /* --- Rom -------------------------------------------------------------- */
  --rom-1: 0.25rem;
  --rom-2: 0.5rem;
  --rom-3: 0.75rem;
  --rom-4: 1rem;
  --rom-5: 1.5rem;
  --rom-6: 2rem;
  --rom-7: 3rem;
  --rom-8: 4rem;
  --rom-9: 6rem;
  --rom-10: 8rem;

  --seksjon-y: clamp(3.5rem, 7vw, 7rem); /* vertikal seksjonsrytme        */
  --bredde: 1180px; /* maks innholdsbredde                                 */
  --bredde-smal: 720px; /* lesebredde                                      */

  /* --- Form ------------------------------------------------------------- */
  --radius-s: 4px;
  --radius: 8px;
  --radius-l: 14px;
  --radius-rund: 999px;

  /* Skygger er kalde og lave — dette er ikke et leketøysgrensesnitt. */
  --skygge-1: 0 1px 2px rgba(10, 16, 25, 0.06);
  --skygge-2: 0 2px 4px rgba(10, 16, 25, 0.05), 0 8px 20px rgba(10, 16, 25, 0.05);
  --skygge-3: 0 4px 8px rgba(10, 16, 25, 0.06), 0 20px 44px rgba(10, 16, 25, 0.1);
  --skygge-lykt: 0 0 0 1px rgba(245, 179, 53, 0.35), 0 10px 30px rgba(245, 179, 53, 0.16);

  /* --- Bevegelse --------------------------------------------------------
     Én kurve gjennom hele siden. Rask start, lang hale — føles presis
     framfor sprettende. Alt kobles ut under prefers-reduced-motion. */
  --lett: cubic-bezier(0.16, 1, 0.3, 1);
  --lett-inn: cubic-bezier(0.4, 0, 0.2, 1);
  --tid-1: 120ms; /* hover                                                 */
  --tid-2: 240ms; /* tilstandsbytte                                        */
  --tid-3: 620ms; /* innlasting / scroll-avsløring                         */

  --z-nav: 100;
  --z-modal: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tid-1: 1ms;
    --tid-2: 1ms;
    --tid-3: 1ms;
  }
}