/* ============================================
   Design Tokens - Source of Truth from Figma
   ============================================
   
   This file contains design tokens extracted from Figma design system.
   Tokens are organized by category for maintainability.
   
   Last updated: Based on tmp/design_system/ SVG exports
*/

@layer product {
/* ============================================
   Accessibility Colors (AA-Level)
   ============================================
   These colors meet WCAG AA accessibility standards for text labels.
   Use these for text that appears next to icons or indicators.
*/

/* AA-Level Label Colors (for text labels - accessible) */
.color-label-green {
  color: #0DAB30;
}

.color-label-red {
  color: #B80006;
}

.color-label-orange {
  color: #EA740A;
}

/* ============================================
   Legacy Graph Indicator Colors
   ============================================
   These colors are specifically for graph/chart indicators only.
   Do NOT use for text labels - use AA-level label colors instead.
*/

.color-red {
  color: #EF686F;
}

.color-green {
  color: #44C35F;
}

.color-orange {
  color: #F5841F;
}

/* ============================================
   Brand Colors
   ============================================
   Core brand colors from design system
*/

.color-purple {
  color: var(--color-heading);
}

.color-purple-light {
  color: #67318E;
}

.color-blue {
  color: #4BC1E5;
}

.color-blue-dark {
  color: #016D81;
}

.color-blue-button {
  color: #5696DC;
}

.color-gray {
  color: #626E8E;
}

.color-gray-light {
  color: #818AA6;
}

.color-gray-lighter {
  color: #A1A7BC;
}

.color-gray-lightest {
  color: #C0C5D3;
}

.color-yellow {
  color: #FAE285;
}

/* ============================================
   Background Colors
   ============================================
   Background color utilities
*/

.bg-purple {
  background-color: #39235D;
}

.bg-purple-light {
  background-color: #67318E;
}

.bg-blue {
  background-color: #4BC1E5;
}

.bg-blue-light {
  background-color: #C5D9EE;
}

.bg-blue-lighter {
  background-color: #E2ECF7;
}

.bg-blue-lightest {
  background-color: #EBF1F9;
}

.bg-gray {
  background-color: #626E8E;
}

.bg-gray-light {
  background-color: #818AA6;
}

.bg-gray-lighter {
  background-color: #A1A7BC;
}

.bg-gray-lightest {
  background-color: #C0C5D3;
}

.bg-gray-lightest-2 {
  background-color: #E0E2E9;
}

.bg-gray-lightest-3 {
  background-color: #F3F4F7;
}

.bg-white {
  background-color: #FFFFFF;
}

.bg-blue-button {
  background-color: #5696DC;
}

.bg-purple-dark {
  background-color: #1D0841;
}

/* ============================================
   Border Colors
   ============================================
   Border color utilities
*/

.border-purple {
  border-color: #39235D;
}

.border-blue {
  border-color: #4BC1E5;
}

.border-blue-light {
  border-color: #C5D9EE;
}

.border-gray {
  border-color: #626E8E;
}

.border-gray-light {
  border-color: #818AA6;
}

.border-gray-lighter {
  border-color: #A1A7BC;
}

.border-gray-lightest {
  border-color: #C0C5D3;
}

.border-gray-lightest-2 {
  border-color: #E0E2E9;
}

.border-gray-lightest-4 {
  border-color: #E5E7EB;
}
}

/* ============================================
   Design Token Variables (CSS Custom Properties)
   ============================================
   These can be used in other CSS files via var()
*/

:root {
  /* Accessibility Colors (AA-Level) */
  --color-label-green: #0A8525;
  --color-label-red: #B80006;
  --color-label-orange: #EA740A;
  --color-label-orange-dark: #D2670A;
  --color-label-yellow: #8A6A05;
  --color-red-500: #8F0005;
  --color-link: #118AAE;

  /* Legacy Graph Indicator Colors */
  --color-legacy-green: #44C35F;
  --color-legacy-red: #EF686F;
  --color-legacy-orange: #F5841F;

  /* Brand Colors */
  --color-purple: #39235D;
  --color-purple-light: #67318E;
  --color-purple-dark: #1D0841;
  --color-blue: #4BC1E5;
  --color-blue-dark: #016D81;
  --color-blue-button: #5696DC;
  --bodymaja: #5696DC;

  /* Gray Scale */
  --color-gray-dark: #4B546D;
  --color-gray: #626E8E;
  --color-gray-light: #818AA6;
  --color-gray-lighter: #A1A7BC;
  --color-gray-lightest: #C0C5D3;
  --color-gray-lightest-2: #E0E2E9;
  --color-gray-lightest-3: #F3F4F7;

  /* Neutral Grays */
  --color-black: #000000;
  --color-neutral-gray: #646464;

  /* Background Colors */
  --bg-blue-light: #C5D9EE;
  --bg-blue-medium: #CCE0F4;
  --bg-blue-lighter: #E2ECF7;
  --bg-blue-lightest: #EBF1F9;
  --bg-green: #44C35F;
  --bg-green-light: #B2E8BE;
  --bg-green-lightest: #E0F2E4;
  --bg-green-dark: #0B4F12;
  --bg-peach-lightest: rgb(242 153 125 / 15%);
  --bg-yellow: #F9E183;
  --bg-yellow-light: #FBF0BE;
  --bg-neutral-gray-light: #EDEDED;

  /* Border Colors */
  --border-blue-light: #C5D9EE;
  --border-gray-lightest-2: #E0E2E9;
  --border-gray-lightest-4: #E5E7EB;
  --border-peach: #DFCEC8;

  /* Navigation Gradient Colors */
  --nav-gradient-start: #95C4F9;
  --nav-gradient-end: #DBECFE;

  /* Legacy Colors (for backward compatibility) */
  --blue-base-legacy: #6e9fd5;
  --blue-light-legacy: #8ab4db;
  --blue-dark-legacy: #3e7cb2;

  /* Typography */
  --font-sans: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
               sans-serif;
  --fs-2xs: 10px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fs-3xl: 40px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 900;
  --fstretch-condensed: 80%;
  --fstretch-narrow: 90%;
  --fstretch-medium: 95%;
  --fstretch-normal: 100%;

  /* Spacing (8px grid) */
  --space-0_5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* Motion */
  --easing-smooth: cubic-bezier(0.236, 0, 0.236, 1);
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;

  /* Semantic surfaces (light). Dark overrides live on html.theme-dark. */
  --color-page: #f3f7fb;
  --color-surface: #ffffff;
  --color-surface-subtle: #f9fafb;
  --color-danger-surface: #fef2f2;
  --color-on-surface: #1c1f28;
  --color-heading: #39235d;
  --color-muted: #626e8e;
  --color-border-subtle: #e0e2e9;
  --color-overlay-soft: rgb(0 0 0 / 5%);
  --color-status-positive: #0a8525;
  --color-status-negative: #b80006;
  --color-alert-border: #fca5a5;
  --color-alert-emphasis: #991b1b;
  --color-notice-surface: #f0fdf4;
  --color-notice-border: #86efac;
  --color-notice-emphasis: #166534;
  --bg-white: var(--color-surface);
  --nav-item-selected-start: #95c4f9;
  --nav-item-selected-end: #dbecfe;
  --header-banner: #e2ecf6;
  --color-focus-ring: #67318e;
  --own-result-card-gradient: linear-gradient(
    136.45deg,
    #e1e4f2 0%,
    #ffffff 39.39%,
    #ffffff 92.86%
  );
  --own-result-card-shadow-rest:
    0 0.125rem 0.35rem rgb(57 35 93 / 8%),
    0 0.0625rem 0.125rem rgb(57 35 93 / 4%);
  --own-result-card-shadow-lift:
    0 0.45rem 1rem rgb(57 35 93 / 16%),
    0 0.125rem 0.35rem rgb(57 35 93 / 8%);
  --own-result-card-shadow-lift-strong:
    0 0.55rem 1.15rem rgb(57 35 93 / 18%),
    0 0.15rem 0.4rem rgb(57 35 93 / 10%);
  --own-result-card-action-color: #6b7280;
  --own-result-card-action-hover-bg: #f3f4f6;
  --own-result-card-menu-shadow:
    0 1px 2px rgb(57 35 93 / 6%),
    0 4px 10px rgb(57 35 93 / 8%);
  --own-results-add-card-bg: var(--bg-blue-lighter);
  --own-results-add-card-hover-bg: var(--bg-blue-light);
  --own-results-add-card-color: #036e81;
  --own-results-add-card-bg-hover: var(--own-results-add-card-hover-bg);
  --own-results-add-card-fg: var(--own-results-add-card-color);
  --own-results-modal-fade: rgb(255 255 255 / 55%);
  --own-results-column-toggle-color: #60a5fa;
  --own-results-column-toggle-hover-color: #3b82f6;
  --own-results-column-toggle-hover-bg: rgb(96 165 250 / 12%);
  --own-results-column-toggle-active-color: #2563eb;
  --own-results-column-toggle-active-bg: rgb(96 165 250 / 20%);
  --own-results-column-toggle-focus-ring: #93c5fd;
  --header-band-bg: var(--bg-blue-lighter);
  --date-range-preset-bg: #ffffff;
  --date-range-preset-fg: #374151;
  --date-range-preset-bg-hover: #3e7cb2;
  --date-range-preset-fg-hover: #ffffff;
  --date-range-preset-active-bg: #ffffff;
  --date-range-preset-active-fg: #39235d;
  --date-range-preset-active-ring: #39235d;
  --date-range-preset-focus-ring: #67318e;
  --popover-shadow:
    0 0.25rem 0.75rem var(--bg-blue-light),
    0 1px 1px 1px var(--bg-blue-light);
  --login-split-left-bg: var(--color-purple);
  --login-card-shadow: var(--popover-shadow);
  --login-card-border: var(--bg-blue-light);
  --login-card-rim-width: 1px;
  --login-notice-shadow: var(--popover-shadow);
  --login-notice-icon-bg: var(--color-blue, #4bc1e5);

  /* Login footer language: link in light; grey small pill tokens flip in dark */
  --login-footer-language-bg: transparent;
  --login-footer-language-fg: var(--color-link, var(--color-purple, #39235d));
  --login-footer-language-bg-hover: transparent;
  --login-footer-language-fg-hover: var(--color-link, var(--color-purple, #39235d));
  --login-footer-language-height: auto;
  --login-footer-language-padding-x: 0;
  --login-footer-language-gap: 0.25rem;
  --login-footer-language-radius: 0;
  --login-footer-language-weight: 400;
  --login-footer-language-size: 0.67rem;
  --login-footer-language-line: 1rem;
  --login-footer-language-select-decoration: underline;
  --login-footer-language-focus-ring: var(--color-blue, #4bc1e5);

  /* Shared button variants (ButtonComponent + nav controls) */
  --button-grey-bg: #888888;
  --button-grey-fg: #ffffff;
  --button-grey-bg-hover: #9e9e9e;
  --login-button-bg: var(--color-blue-button, #5696dc);
  --login-button-bg-hover: color-mix(in srgb, var(--color-blue-button, #5696dc) 82%, #ffffff);
  --theme-chooser-banner-bg: var(--own-result-card-gradient);
  --theme-chooser-banner-fg: var(--color-heading, #39235d);
  --theme-chooser-banner-muted: var(--color-muted, #626e8e);
  --theme-chooser-banner-track-bg: var(--color-surface-subtle, #f3f4f6);
  --theme-chooser-banner-option-hover-bg: rgb(57 35 93 / 6%);
  --theme-chooser-banner-accent-bg: var(--color-purple, #39235d);
  --theme-chooser-banner-accent-fg: #ffffff;
  --result-change-chip-bg: var(--color-gray-lightest-3, #f3f4f7);
  --result-change-chip-border: var(--color-gray-lightest-2, #e0e2e9);
  --result-change-chip-fg: var(--color-purple, #39235d);
  --result-previous-chip-bg: var(--result-change-chip-bg);
  /* In-card loading bones (measurement session switch, Lookbook skeletons). */
  --skeleton-bone-bg: var(--color-gray-lightest-3, #f3f4f7);
  --skeleton-bone-shine: rgb(255 255 255 / 35%);
  --bp-chart-zone-border: #d1d5db;
  --result-show-more-bg: var(--bg-blue-lightest, #ebf1f9);
  --result-show-more-fg: var(--color-blue-dark, #016d81);
  --result-current-marker-bg: #000000;
  --result-previous-marker-bg: #646464;
  --result-previous-marker-opacity: 0.85;
  --result-previous-marker-radius: 2px;
  /* Reference limit labels on the range chart (light keeps legacy red/green) */
  --result-ref-label-red: var(--color-label-red, #b80006);
  --result-ref-label-green: var(--color-label-green, #0a8525);
  --result-range-bar-red: #f87171;
  --result-range-bar-green: #0dab30;
  --result-range-bar-green-dark: #0b9329;
  --result-range-bar-yellow: #eab308;

  /* Chart paints (ECharts / VX). Dark overrides on html.theme-dark. */
  --chart-bar: #526c89;
  --chart-bar-selected: #67318e;
  --chart-target-band: rgb(48 172 115 / 20%);
  --chart-positive: #16a34a;
  --chart-negative: #dc2626;
  --chart-tooltip-bg: #526c89;
  --chart-tooltip-text: #ffffff;
  --chart-axis-label: #626d7b;
  --chart-secondary-label: var(--color-muted, #626e8e);
  --chart-grid: rgb(82 108 137 / 12%);
  --chart-surface: #ffffff;
  --chart-emphasis: #39235d;
  --chart-emphasis-light: #67318e;
  --chart-pointer: #646464;
  --chart-label: #646464;
  --chart-shadow: rgb(82 108 137 / 4%);
  --chart-donut-within: #30ac73;
  --chart-donut-outside: #e53e3e;
  --chart-reference-fill: rgb(67 196 95 / 15%);
  --chart-vfa-band: #c5d9ee;
  --chart-warning: #ffd44f;
  --chart-warning-fill: rgb(255 212 79 / 25%);
}

/* Customer dark theme — Figma Puhti-UX Yhteenveto dark (node 9826:2551) */
html.theme-dark {
  color-scheme: dark;

  --color-page: #040a1d;
  --color-surface: #141924;
  --color-surface-subtle: #1a2030;
  --color-danger-surface: rgb(163 52 31 / 20%);
  --color-on-surface: #ffffff;
  --color-heading: #ffffff;
  --color-muted: #c0c5d3;
  --color-border-subtle: rgb(255 255 255 / 15%);
  --color-overlay-soft: rgb(255 255 255 / 5%);
  --color-link: #c5d9ee;
  --color-status-positive: #46c462;
  --color-status-negative: #ea5858;
  --color-alert-border: #a3341f;
  --color-alert-emphasis: #f5b2b2;
  --color-notice-surface: rgb(70 196 98 / 15%);
  --color-notice-border: #2f6f45;
  --color-notice-emphasis: #86efac;
  --color-label-green: #46c462;
  --color-label-red: #ea5858;
  --bg-white: var(--color-surface);
  --color-black: var(--color-on-surface);
  --bg-blue-lighter: var(--color-page);
  --bg-blue-lightest: var(--color-surface-subtle);
  --nav-item-selected-start: #2a3a5c;
  --nav-item-selected-end: #1a2030;
  --header-banner: #1a2030;
  --color-focus-ring: #c5d9ee;
  --own-result-card-gradient: linear-gradient(
    136.45deg,
    #141924 0%,
    #141924 39.39%,
    #141924 92.86%
  );
  --own-result-card-shadow-rest:
    0 0.125rem 0.35rem rgb(0 0 0 / 35%),
    0 0.0625rem 0.125rem rgb(0 0 0 / 25%);
  --own-result-card-shadow-lift:
    0 0.45rem 1rem rgb(0 0 0 / 45%),
    0 0.125rem 0.35rem rgb(0 0 0 / 30%);
  --own-result-card-shadow-lift-strong:
    0 0.55rem 1.15rem rgb(0 0 0 / 50%),
    0 0.15rem 0.4rem rgb(0 0 0 / 35%);
  --own-result-card-action-color: var(--color-muted);
  --own-result-card-action-hover-bg: var(--color-overlay-soft);
  --own-result-card-menu-shadow:
    0 1px 2px rgb(0 0 0 / 35%),
    0 4px 10px rgb(0 0 0 / 40%);
  --own-results-add-card-bg: var(--color-surface);
  --own-results-add-card-hover-bg: var(--color-surface-subtle);
  --own-results-add-card-color: var(--color-link);
  --own-results-add-card-bg-hover: var(--own-results-add-card-hover-bg);
  --own-results-add-card-fg: var(--own-results-add-card-color);
  --own-results-modal-fade: rgb(4 10 29 / 55%);
  --own-results-column-toggle-color: var(--color-link);
  --own-results-column-toggle-hover-color: #e3e8f4;
  --own-results-column-toggle-hover-bg: var(--color-overlay-soft);
  --own-results-column-toggle-active-color: #ffffff;
  --own-results-column-toggle-active-bg: rgb(255 255 255 / 12%);
  --own-results-column-toggle-focus-ring: var(--color-focus-ring);
  --header-band-bg: var(--color-page);
  --date-range-preset-bg: var(--color-surface);
  --date-range-preset-fg: var(--color-on-surface);
  --date-range-preset-bg-hover: var(--own-results-add-card-hover-bg);
  --date-range-preset-fg-hover: var(--color-on-surface);
  --date-range-preset-active-bg: var(--color-surface);
  --date-range-preset-active-fg: var(--color-heading);
  --date-range-preset-active-ring: var(--color-heading);
  --date-range-preset-focus-ring: var(--color-link);
  --nav-active-bg: linear-gradient(121.92deg, #2a3a5c -1.88%, #1a2030 89.66%);
  --nav-brand-bg: var(--color-page);
  --popover-shadow:
    0 0.5rem 1.5rem rgb(2 6 18 / 72%),
    0 0.125rem 0.5rem rgb(4 10 29 / 55%),
    0 0 0 1px rgb(86 150 220 / 14%);
  --login-split-left-bg: var(--color-purple);
  --login-card-shadow: none;
  /* Opaque padding rim on the shell — keep >=2px so subpixel layout cannot hide it. */
  --login-card-border: #8eb4d8;
  --login-card-rim-width: 2px;
  --login-notice-shadow: none;
  --login-notice-icon-bg: var(--color-surface-subtle);

  /* Shared button variants */
  --button-grey-bg: #3f4d69;
  --button-grey-fg: #ffffff;
  --button-grey-bg-hover: #52607a;
  --login-button-bg: linear-gradient(90deg, #6e9fd5 0%, #3394ff 100%);
  --login-button-bg-hover: linear-gradient(90deg, #7aabe0 0%, #4aa3ff 100%);
  --theme-chooser-banner-bg: #19243e;
  --theme-chooser-banner-fg: #ffffff;
  --theme-chooser-banner-muted: #b7c3cd;
  --theme-chooser-banner-track-bg: rgb(255 255 255 / 7.5%);
  --theme-chooser-banner-option-hover-bg: rgb(255 255 255 / 10%);
  --theme-chooser-banner-accent-bg: linear-gradient(90deg, #6e9fd5 0%, #3394ff 100%);
  --theme-chooser-banner-accent-fg: #ffffff;
  /* Figma result card: Muutos / Edellinen chips */
  --result-change-chip-bg: rgb(255 255 255 / 6%);
  --result-change-chip-border: transparent;
  --result-change-chip-fg: #c0c5d3;
  --result-previous-chip-bg: rgb(255 255 255 / 8%);
  --skeleton-bone-bg: var(--color-surface-subtle);
  --skeleton-bone-shine: rgb(255 255 255 / 12%);
  --gray-lightest: var(--skeleton-bone-bg);
  --bp-chart-zone-border: #6b7385;
  --result-show-more-bg: var(--result-previous-chip-bg);
  --result-show-more-fg: #a8c5e6;
  --result-current-marker-bg: #ffffff;
  --result-previous-marker-bg: #c0c5d3;
  --result-previous-marker-opacity: 0.85;
  --result-previous-marker-radius: 1px;
  /* Solid status greens/reds for dark range-chart labels and bars */
  --result-ref-label-red: #ea5858;
  --result-ref-label-green: #46c462;
  --result-range-bar-red: #ea5858;
  --result-range-bar-green: #46c462;
  --result-range-bar-green-dark: #157f2c;
  --result-range-bar-yellow: #e2b53f;

  /* Login footer language: dark-only small control on dropdown surfaces */
  --login-footer-language-bg: var(--color-surface);
  --login-footer-language-fg: var(--color-on-surface);
  --login-footer-language-bg-hover: var(--own-results-add-card-hover-bg);
  --login-footer-language-fg-hover: var(--color-on-surface);
  --login-footer-language-height: 1.5rem;
  --login-footer-language-padding-x: 8px;
  --login-footer-language-gap: 8px;
  --login-footer-language-radius: var(--radius-md, 8px);
  --login-footer-language-weight: 600;
  --login-footer-language-size: 0.75rem;
  --login-footer-language-line: 1.5rem;
  --login-footer-language-select-decoration: none;
  --login-footer-language-focus-ring: color-mix(in srgb, var(--own-results-add-card-hover-bg) 55%, transparent);

  /* Legacy layout aliases (layouts/application.css) */
  --blue-lightest: var(--color-page);
  --gray-dark: var(--color-on-surface);
  --white: var(--color-surface);

  --chart-bar: #3f4d69;
  --chart-bar-selected: #a8c5e6;
  --chart-target-band: rgb(70 196 98 / 18%);
  --chart-positive: #46c462;
  --chart-negative: #ea5858;
  --chart-tooltip-bg: #1a2030;
  --chart-tooltip-text: #ffffff;
  --chart-axis-label: #c0c5d3;
  --chart-secondary-label: #8b92a5;
  --chart-grid: rgb(255 255 255 / 8%);
  --chart-surface: #141924;
  --chart-emphasis: #e3e8f4;
  --chart-emphasis-light: #a8c5e6;
  --chart-pointer: #c0c5d3;
  --chart-label: #c0c5d3;
  --chart-shadow: rgb(255 255 255 / 4%);
  --chart-donut-within: #46c462;
  --chart-donut-outside: #ea5858;
  --chart-reference-fill: rgb(70 196 98 / 18%);
  --chart-vfa-band: rgb(197 217 238 / 24%);
  --chart-warning: #fae285;
  --chart-warning-fill: rgb(250 226 133 / 20%);
}

/* Measurement PDF is always the light report. This file loads after inbody print
   CSS in some layouts; keep the print reset here so dark tokens cannot win. */
@media print {
  html,
  html.theme-dark {
    color-scheme: light;
    --color-page: #f3f7fb;
    --color-surface: #ffffff;
    --color-on-surface: #1c1f28;
    --color-heading: #39235d;
    --color-muted: #626e8e;
    --result-change-chip-bg: #f3f4f7;
    --result-previous-chip-bg: #f3f4f7;
    --result-change-chip-fg: #39235d;
    --bp-chart-zone-border: #d1d5db;
    --result-current-marker-bg: #000000;
    --result-previous-marker-bg: #646464;
    --result-ref-label-red: #b80006;
    --result-ref-label-green: #0a8525;
    --result-range-bar-red: #f87171;
    --result-range-bar-green: #0dab30;
    --result-range-bar-green-dark: #0b9329;
    --result-range-bar-yellow: #eab308;
    --chart-axis-label: #626d7b;
    --chart-secondary-label: #626e8e;
    --chart-surface: #ffffff;
    --chart-emphasis: #39235d;
    --chart-emphasis-light: #67318e;
    --chart-bar: #526c89;
    --chart-grid: rgb(82 108 137 / 12%);
    --chart-reference-fill: rgb(67 196 95 / 15%);
    --chart-vfa-band: #c5d9ee;
  }
}