/* Estio base-tokens: seed-uavhengige M3-systemverdier.
   Kilde: Google Material 3 designtokens v0.192 (material-components/material-web)
   og M3-typeskalaen (m3.material.io/styles/typography).
   Importeres av alle Estio-apper sammen med ett fargeskjema (estio-<merke>.css). */

:root {
  /* ===== md.sys.typescale ===== */
  --estio-font-brand: 'Archivo', system-ui, sans-serif;
  --estio-font-plain: 'Archivo', system-ui, sans-serif;
  --estio-font-mono: 'Cascadia Code', Consolas, monospace;

  --estio-display-large: 400 57px/64px var(--estio-font-brand);
  --estio-display-large-tracking: -0.25px;
  --estio-display-medium: 400 45px/52px var(--estio-font-brand);
  --estio-display-medium-tracking: 0;
  --estio-display-small: 400 36px/44px var(--estio-font-brand);
  --estio-display-small-tracking: 0;
  --estio-headline-large: 400 32px/40px var(--estio-font-brand);
  --estio-headline-large-tracking: 0;
  --estio-headline-medium: 400 28px/36px var(--estio-font-brand);
  --estio-headline-medium-tracking: 0;
  --estio-headline-small: 400 24px/32px var(--estio-font-brand);
  --estio-headline-small-tracking: 0;
  --estio-title-large: 400 22px/28px var(--estio-font-brand);
  --estio-title-large-tracking: 0;
  --estio-title-medium: 500 16px/24px var(--estio-font-plain);
  --estio-title-medium-tracking: 0.15px;
  --estio-title-small: 500 14px/20px var(--estio-font-plain);
  --estio-title-small-tracking: 0.1px;
  --estio-body-large: 400 16px/24px var(--estio-font-plain);
  --estio-body-large-tracking: 0.5px;
  --estio-body-medium: 400 14px/20px var(--estio-font-plain);
  --estio-body-medium-tracking: 0.25px;
  --estio-body-small: 400 12px/16px var(--estio-font-plain);
  --estio-body-small-tracking: 0.4px;
  --estio-label-large: 500 14px/20px var(--estio-font-plain);
  --estio-label-large-tracking: 0.1px;
  --estio-label-medium: 500 12px/16px var(--estio-font-plain);
  --estio-label-medium-tracking: 0.5px;
  --estio-label-small: 500 11px/16px var(--estio-font-plain);
  --estio-label-small-tracking: 0.5px;

  /* ===== md.sys.shape (corner radius) ===== */
  --estio-shape-none: 0px;
  --estio-shape-extra-small: 4px;
  --estio-shape-small: 8px;
  --estio-shape-medium: 12px;
  --estio-shape-large: 16px;
  --estio-shape-extra-large: 28px;
  --estio-shape-full: 9999px;
  /* Retningsbestemte hjørner: kun angitte sider avrundes (bottom sheet, side sheet/drawer, scrollet top app bar) */
  --estio-shape-extra-small-top: 4px 4px 0px 0px;
  --estio-shape-large-top: 16px 16px 0px 0px;
  --estio-shape-large-start: 16px 0px 0px 16px;
  --estio-shape-large-end: 0px 16px 16px 0px;
  --estio-shape-extra-large-top: 28px 28px 0px 0px;

  /* ===== md.sys.state (state layer-opasitet, av on-fargen) ===== */
  --estio-state-hover: 0.08;
  --estio-state-focus: 0.12;
  --estio-state-pressed: 0.12;
  --estio-state-dragged: 0.16;

  /* ===== md.sys.elevation (dp-nivåer; bruk surface-container-roller i mørkt tema) ===== */
  --estio-elevation-0: 0;
  --estio-elevation-1: 1;
  --estio-elevation-2: 3;
  --estio-elevation-3: 6;
  --estio-elevation-4: 8;
  --estio-elevation-5: 12;
  --estio-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --estio-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --estio-shadow-3: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  --estio-shadow-4: 0 2px 3px rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
  --estio-shadow-5: 0 4px 4px rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);

  /* ===== md.sys.motion ===== */
  --estio-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --estio-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --estio-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --estio-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --estio-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --estio-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --estio-easing-linear: cubic-bezier(0, 0, 1, 1); /* indeterminate progress-indikatorer/spinnere */
  --estio-duration-short1: 50ms;
  --estio-duration-short2: 100ms;
  --estio-duration-short3: 150ms;
  --estio-duration-short4: 200ms;
  --estio-duration-medium1: 250ms;
  --estio-duration-medium2: 300ms;
  --estio-duration-medium3: 350ms;
  --estio-duration-medium4: 400ms;
  --estio-duration-long1: 450ms;
  --estio-duration-long2: 500ms;
  --estio-duration-long3: 550ms;
  --estio-duration-long4: 600ms;

  /* ===== Avstand (4dp-grid; M3 tokeniserer ikke spacing, dette er Estio-konvensjon) ===== */
  --estio-space-1: 4px;
  --estio-space-2: 8px;
  --estio-space-3: 12px;
  --estio-space-4: 16px;
  --estio-space-6: 24px;
  --estio-space-8: 32px;
  --estio-space-12: 48px;
  --estio-space-16: 64px;

  /* Layoutavstander per M3s layoutretningslinjer (compact-verdier som default) */
  --estio-layout-margin: 16px;   /* sidemarg; 24px fra medium og opp */
  --estio-layout-gutter: 16px;   /* avstand mellom kolonner; 24px fra medium og opp */
  --estio-layout-columns: 4;     /* M3 responsivt kolonneraster: 4 compact, 8 medium, 12 expanded og oppover */
  --estio-layout-pane-gap: 24px; /* avstand mellom paneler i flerpanels-layout */
  --estio-touch-target: 48px;    /* minste interaktive flate */
}

@media (min-width: 600px) {
  :root {
    --estio-layout-margin: 24px;
    --estio-layout-gutter: 24px;
    --estio-layout-columns: 8;
  }
}

@media (min-width: 840px) {
  :root {
    --estio-layout-columns: 12;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --estio-duration-short1: 0ms;
    --estio-duration-short2: 0ms;
    --estio-duration-short3: 0ms;
    --estio-duration-short4: 0ms;
    --estio-duration-medium1: 0ms;
    --estio-duration-medium2: 0ms;
    --estio-duration-medium3: 0ms;
    --estio-duration-medium4: 0ms;
    --estio-duration-long1: 0ms;
    --estio-duration-long2: 0ms;
    --estio-duration-long3: 0ms;
    --estio-duration-long4: 0ms;
  }
}