@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..600;1,14..32,400..600&display=swap"); /* Inter · OFL-1.1 */
@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@500;600;700&display=swap"); /* Public Sans · OFL-1.1 */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap"); /* IBM Plex Mono · OFL-1.1 */

/* Generated from the Volym brand package v0.2.0 (draft).
   Source: design.volymdigital.se brand facets — D7 makes them the source and this
   file the artifact. Do not edit by hand; re-run `brand:export-tokens`, or pull it
   from the design app (MCP brand_tokens_export · GET /api/brands/{brand}/tokens.css ·
   runtime: GET /brands/{brand}/tokens.css, loaded by every app after its own CSS). */
html:root {
    --v-color-action-primary: #00695A;
    --v-color-action-primary-strong: #00564A;
    --v-color-action-primary-soft: #E6F1EF;
    --v-color-action-primary-ink: #00544A;
    --v-color-canvas: #FDFDFD;
    --v-color-raised: #FFFFFF;
    --v-color-sunken: #F2F2F2;
    --v-color-sand: #E5DCCC;
    --v-color-sand-soft: #F7F5F3;
    --v-color-text: #211F1A;
    --v-color-text-secondary: hsl(0, 0%, 45%);
    --v-color-text-tertiary: hsl(0, 0%, 55%);
    --v-color-border: hsl(0, 0%, 92.8%);
    --v-color-border-subtle: hsla(0, 0%, 0%, 0.1);
    --v-color-positive: hsl(140, 70%, 40%);
    --v-color-positive-soft: hsl(140, 45%, 94%);
    --v-color-positive-ink: hsl(140, 70%, 24%);
    --v-color-warning: hsl(40, 90%, 50%);
    --v-color-warning-soft: hsl(40, 80%, 94%);
    --v-color-warning-ink: hsl(34, 90%, 30%);
    --v-color-negative: hsl(0, 80%, 50%);
    --v-color-negative-soft: hsl(0, 70%, 96%);
    --v-color-negative-ink: hsl(0, 72%, 38%);
    --v-color-info: hsl(210, 100%, 50%);
    --v-color-info-soft: hsl(210, 80%, 96%);
    --v-color-info-ink: hsl(210, 80%, 34%);
    --v-color-text-heading: #141311;
    --v-color-surface-secondary: #F5F5F5;
    --v-color-surface-muted: #F5F5F5;
    --v-color-surface-hover: #F5F5F5;
    --v-color-border-strong: hsl(0, 0%, 88%);
    --v-color-overlay-scrim: rgba(0, 0, 0, 0.25);
    --v-color-status-neutral: hsl(0, 0%, 60%);
    --v-color-status-blocked: hsl(0, 0%, 30%);
    --v-color-sidebar-background: #FAFAFA;
    --v-color-sidebar-foreground: #4A4844;
    --v-color-sidebar-primary: #00695A;
    --v-color-sidebar-primary-foreground: #FFFFFF;
    --v-color-sidebar-accent: #F2F2F2;
    --v-color-sidebar-accent-foreground: #211F1A;
    --v-color-sidebar-border: hsl(0, 0%, 91%);
    --v-color-sidebar-ring: #00695A;
    --v-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --v-font-display: 'Public Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --v-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --v-text-body: 15px/23px;
    --v-text-small: 14px/20px;
    --v-text-data: 14px/19px;
    --v-text-title: 18px/24px;
    --v-text-headline: 24px/32px;
    --v-text-display: 36px/40px;
    --v-text-kpi: 30px/36px;
    --v-text-micro: 11px/16px;
    --v-radius-control: 8px;
    --v-radius-card: 10px;
    --v-radius-panel: 12px;
    --v-radius-modal: 16px;
    --v-radius-pill: 9999px;
    --v-card-padding: 24px;
    --v-card-grid-gap: 32px;
    --v-card-section-gap: 32px;
    --v-card-print-section-gap: 48px;
    --v-card-border: 0px;
    --v-space-1: 4px;
    --v-space-2: 8px;
    --v-space-3: 12px;
    --v-space-4: 16px;
    --v-space-5: 20px;
    --v-space-6: 24px;
    --v-space-7: 32px;
    --v-space-8: 40px;
    --v-space-9: 48px;
    --v-space-10: 64px;
    --v-shadow-card: 0px 4px 12px -4px rgba(0, 0, 0, 0.08);
    --v-shadow-icon: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
    --v-shadow-floating: 0px 4px 12px -2px rgba(0, 0, 0, 0.10), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);
    --v-shadow-command: 0px 8px 24px -4px rgba(0, 0, 0, 0.15);
    --v-focus-ring: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #00695A;
    --v-motion-hover: 120ms;
    --v-motion-state: 180ms;
    --v-motion-enter: 240ms;
    --v-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --v-motion-enter-lift: 4px;
    --v-color-domain-seo-soft: #E6F1EF;
    --v-color-domain-seo-ink: #00544A;
    --v-color-domain-ads-soft: hsl(40, 80%, 94%);
    --v-color-domain-ads-ink: hsl(34, 90%, 30%);
    --v-color-domain-content-soft: #E5DCCC;
    --v-color-domain-content-ink: #4A4032;
    --v-color-domain-ai-soft: hsl(210, 80%, 96%);
    --v-color-domain-ai-ink: hsl(210, 80%, 34%);
    --v-color-domain-rapport-soft: hsl(140, 45%, 94%);
    --v-color-domain-rapport-ink: hsl(140, 70%, 24%);
    --v-viz-positive-from: #1E5C41;
    --v-viz-positive-to: #0E9C86;
    --v-viz-negative-from: #E3013A;
    --v-viz-negative-to: #FF391A;
    --v-viz-warning-from: #EF8D02;
    --v-viz-warning-to: #FFC600;
    --v-viz-neutral-from: #AEB4B1;
    --v-viz-neutral-to: #DFE3E1;
    --v-viz-positive-solid: #0E9C86;
    --v-viz-negative-solid: #E3013A;
    --v-viz-warning-solid: #EF8D02;
    --v-viz-neutral-solid: #AEB4B1;
    --v-viz-segment-1: #00695A;
    --v-viz-segment-2: #E5DCCC;
    --v-viz-segment-3: #F7F5F3;
    --v-viz-segment-4: rgba(0, 105, 90, 0.45);
    --v-viz-segment-5: rgba(0, 105, 90, 0.26);
    --v-viz-segment-other: hsl(0, 0%, 60%);
    --v-viz-compare: #AEB4B1;
    --v-viz-grid: #ECEAE5;
    --v-viz-baseline: #D6D3CC;
}

/* Controlled override (consumption policy: internal surfaces are founded on the
   ecosystem set with a controlled brand override). Only the names listed here are
   taken over, and the foundation supplies everything else. Since tokenkatalog
   v0.3 (2026-09-17) that is every shadcn name the kit declares:
     --accent / --accent-foreground  are shadcn's pale HOVER surface behind ghost
       and outline buttons, so they take the NEUTRAL surface-hover token — never
       the brand accent, which would fill every ghost hover (24 sites in the hub).
     --chart-1..5  retired by rule f4; they now draw the brand's discrete segment
       palette instead of shadcn's hues (owner decision 2026-09-17). */
html:root {
    --primary: #00695A;
    --primary-foreground: #FFFFFF;
    --ring: #00695A;
    --background: #FDFDFD;
    --card: #FFFFFF;
    --popover: #FFFFFF;
    --surface-canvas: #FDFDFD;
    --surface-raised: #FFFFFF;
    --surface-sunken: #F2F2F2;
    --foreground: #211F1A;
    --card-foreground: #211F1A;
    --muted-foreground: hsl(0, 0%, 45%);
    --border: hsl(0, 0%, 92.8%);
    --input: hsl(0, 0%, 92.8%);
    --destructive: hsl(0, 80%, 50%);
    --destructive-foreground: #FFFFFF;
    --popover-foreground: #211F1A;
    --secondary: #F5F5F5;
    --secondary-foreground: #211F1A;
    --muted: #F5F5F5;
    --accent: #F5F5F5;
    --accent-foreground: #211F1A;
    --surface-border-soft: hsl(0, 0%, 88%);
    --surface-border-ghost: hsla(0, 0%, 0%, 0.1);
    --sidebar-background: #FAFAFA;
    --sidebar-foreground: #4A4844;
    --sidebar-primary: #00695A;
    --sidebar-primary-foreground: #FFFFFF;
    --sidebar-accent: #F2F2F2;
    --sidebar-accent-foreground: #211F1A;
    --sidebar-border: hsl(0, 0%, 91%);
    --sidebar-ring: #00695A;
    --elevation-card: 0px 4px 12px -4px rgba(0, 0, 0, 0.08);
    --elevation-icon: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
    --elevation-floating: 0px 4px 12px -2px rgba(0, 0, 0, 0.10), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);
    --chart-1: #00695A;
    --chart-2: #E5DCCC;
    --chart-3: #F7F5F3;
    --chart-4: rgba(0, 105, 90, 0.45);
    --chart-5: rgba(0, 105, 90, 0.26);
    --typeface-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --typeface-display: 'Public Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Public Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --default-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --default-mono-font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --corner-control: 8px;
    --corner-card: 10px;
    --corner-panel: 12px;
    --corner-modal: 16px;
    --corner-pill: 9999px;
    --corner-chip: 9999px;
    --radius: 8px;
}

html.dark {
    --v-color-action-primary: #0E9C86;
    --v-color-action-primary-strong: #00564A;
    --v-color-action-primary-soft: #183B35;
    --v-color-action-primary-ink: #82D9C8;
    --v-color-canvas: #121514;
    --v-color-raised: #181C1B;
    --v-color-sunken: #0E1110;
    --v-color-sand: #3A352C;
    --v-color-sand-soft: #221F1A;
    --v-color-text: #E8EBEA;
    --v-color-text-secondary: hsl(0, 0%, 68%);
    --v-color-text-tertiary: hsl(0, 0%, 55%);
    --v-color-border: hsl(160, 6%, 22%);
    --v-color-border-subtle: hsla(0, 0%, 100%, 0.1);
    --v-color-positive: hsl(140, 60%, 50%);
    --v-color-positive-soft: hsl(140, 32%, 16%);
    --v-color-positive-ink: hsl(140, 55%, 70%);
    --v-color-warning: hsl(40, 80%, 60%);
    --v-color-warning-soft: hsl(38, 40%, 17%);
    --v-color-warning-ink: hsl(40, 85%, 72%);
    --v-color-negative: hsl(0, 70%, 60%);
    --v-color-negative-soft: hsl(0, 45%, 16%);
    --v-color-negative-ink: hsl(0, 80%, 72%);
    --v-color-info: hsl(210, 80%, 60%);
    --v-color-info-soft: hsl(212, 45%, 18%);
    --v-color-info-ink: hsl(210, 85%, 74%);
    --v-color-text-heading: #F5F6F5;
    --v-color-surface-secondary: #262626;
    --v-color-surface-muted: #121212;
    --v-color-surface-hover: #262626;
    --v-color-border-strong: hsl(0, 0%, 14.9%);
    --v-color-overlay-scrim: rgba(0, 0, 0, 0.55);
    --v-color-status-neutral: hsl(0, 0%, 40%);
    --v-color-status-blocked: hsl(0, 0%, 60%);
    --v-color-sidebar-background: #0E1110;
    --v-color-sidebar-foreground: hsl(0, 0%, 80%);
    --v-color-sidebar-primary: #0E9C86;
    --v-color-sidebar-primary-foreground: #121514;
    --v-color-sidebar-accent: #181C1B;
    --v-color-sidebar-accent-foreground: #E8EBEA;
    --v-color-sidebar-border: hsl(160, 6%, 22%);
    --v-color-sidebar-ring: #0E9C86;
    --v-shadow-card: 0px 4px 12px -4px rgba(0, 0, 0, 0.5);
    --v-shadow-icon: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
    --v-shadow-floating: 0px 4px 12px -2px rgba(0, 0, 0, 0.5), 0px 2px 4px -2px rgba(0, 0, 0, 0.3);
    --v-shadow-command: 0px 8px 24px -4px rgba(0, 0, 0, 0.8);
    --v-focus-ring: 0px 0px 0px 2px #181C1B, 0px 0px 0px 4px #0E9C86;
    --v-color-domain-seo-soft: #183B35;
    --v-color-domain-seo-ink: #82D9C8;
    --v-color-domain-ads-soft: hsl(38, 40%, 17%);
    --v-color-domain-ads-ink: hsl(40, 85%, 72%);
    --v-color-domain-content-soft: #3A352C;
    --v-color-domain-content-ink: #D9CDB6;
    --v-color-domain-ai-soft: hsl(212, 45%, 18%);
    --v-color-domain-ai-ink: hsl(210, 85%, 74%);
    --v-color-domain-rapport-soft: hsl(140, 32%, 16%);
    --v-color-domain-rapport-ink: hsl(140, 55%, 70%);
    --v-viz-positive-solid: #0E9C86;
    --v-viz-negative-solid: #FF391A;
    --v-viz-warning-solid: #FFC600;
    --v-viz-neutral-solid: #5C625F;
    --v-viz-segment-1: #0E9C86;
    --v-viz-segment-2: #3A352C;
    --v-viz-segment-3: #221F1A;
    --v-viz-segment-4: rgba(14, 156, 134, 0.45);
    --v-viz-segment-5: rgba(14, 156, 134, 0.26);
    --v-viz-segment-other: hsl(0, 0%, 40%);
    --v-viz-compare: #5C625F;
    --v-viz-grid: #1F2422;
    --v-viz-baseline: #2A2F2D;
}

/* The same controlled override in dark. A :root-only override reverts to the
   foundation the moment a viewer switches theme. */
html.dark {
    --primary: #0E9C86;
    --primary-foreground: #181C1B;
    --ring: #0E9C86;
    --background: #121514;
    --card: #181C1B;
    --popover: #181C1B;
    --surface-canvas: #121514;
    --surface-raised: #181C1B;
    --surface-sunken: #0E1110;
    --foreground: #E8EBEA;
    --card-foreground: #E8EBEA;
    --muted-foreground: hsl(0, 0%, 68%);
    --border: hsl(160, 6%, 22%);
    --input: hsl(160, 6%, 22%);
    --destructive: hsl(0, 70%, 60%);
    --destructive-foreground: #181C1B;
    --popover-foreground: #E8EBEA;
    --secondary: #262626;
    --secondary-foreground: #E8EBEA;
    --muted: #121212;
    --accent: #262626;
    --accent-foreground: #E8EBEA;
    --surface-border-soft: hsl(0, 0%, 14.9%);
    --surface-border-ghost: hsla(0, 0%, 100%, 0.1);
    --sidebar-background: #0E1110;
    --sidebar-foreground: hsl(0, 0%, 80%);
    --sidebar-primary: #0E9C86;
    --sidebar-primary-foreground: #121514;
    --sidebar-accent: #181C1B;
    --sidebar-accent-foreground: #E8EBEA;
    --sidebar-border: hsl(160, 6%, 22%);
    --sidebar-ring: #0E9C86;
    --elevation-card: 0px 4px 12px -4px rgba(0, 0, 0, 0.5);
    --elevation-icon: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
    --elevation-floating: 0px 4px 12px -2px rgba(0, 0, 0, 0.5), 0px 2px 4px -2px rgba(0, 0, 0, 0.3);
    --chart-1: #0E9C86;
    --chart-2: #3A352C;
    --chart-3: #221F1A;
    --chart-4: rgba(14, 156, 134, 0.45);
    --chart-5: rgba(14, 156, 134, 0.26);
}

/* headings → the display family (typography facet, semantic.elements) */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--v-font-display);
}

/* code → the mono family (typography facet, semantic.elements) */
code, kbd, samp, pre {
    font-family: var(--v-font-mono);
}