/*
Flow Remote - teema ja perustyylit.

Värimuuttujat komponenttien CSS:ään, sekä typografia ja perusreset.
Tokenit vastaavat design_handoff_flowremote_ui -paketin Design Tokens -osiota.

Käyttö komponenttien CSS:ssä:
  color: var(--flow-color-text);
  border-color: var(--flow-color-border);
  background: var(--flow-color-surface);
  border-radius: var(--flow-radius-control);
*/

:root {
    /* Brand / primary — aksentti #0f9d76 */
    --flow-color-primary: #0f9d76;
    --flow-color-primary-hover: #0b7d5e;
    --flow-color-primary-muted: #0b7d5e;
    --flow-color-primary-soft: #e6f7f0;
    --flow-color-primary-tint: #bfe3d6;

    /* Neutrals – text */
    --flow-color-text: #33556e;
    --flow-color-text-strong: #12384f;
    --flow-color-text-muted: #5b7183;
    --flow-color-text-subtle: #9dabb8;
    --flow-color-text-inverse: #ffffff;
    --flow-color-text-body: #33556e;

    /* Neutrals – surfaces */
    --flow-color-page: #f6f8fa;
    --flow-color-surface: #ffffff;
    --flow-color-surface-raised: #fbfcfd;
    --flow-color-surface-muted: #f1f5f8;
    --flow-color-surface-subtle: #f0f4f7;
    --flow-color-surface-hover: #f1f5f8;
    --flow-color-surface-zebra: #fafcfd;
    --flow-color-surface-header: #fafcfd;

    /* Neutrals – borders */
    --flow-color-border: #e3e9ee;
    --flow-color-border-strong: #eaeef2;
    --flow-color-border-muted: #eef2f5;
    --flow-color-border-subtle: #f0f4f7;
    --flow-color-border-divider: #f5f8fa;

    /* Semantic – danger / error */
    --flow-color-danger: #d1382c;
    --flow-color-danger-hover: #b52f25;
    --flow-color-danger-border: #d1382c;
    --flow-color-danger-text: #d1382c;
    --flow-color-danger-text-alt: #d1382c;
    --flow-color-danger-bg: #fdecea;
    --flow-color-danger-border-soft: #f5c4bf;

    /* Semantic – success */
    --flow-color-success: #12a37e;
    --flow-color-success-text: #0b7d5e;
    --flow-color-success-bg: #e6f7f0;
    --flow-color-success-border: #bfe3d6;

    /* Semantic – warning */
    --flow-color-warning-text: #c2751a;
    --flow-color-warning-bg: #fff3e2;
    --flow-color-warning-border: #f5c518;

    /* Semantic – info / focus */
    --flow-color-info: #3b6bb5;
    --flow-color-info-hover: #2f5691;
    --flow-color-focus: #10a37f;
    --flow-color-focus-ring: #10a37f;
    --flow-color-link-hover: #0b7d5e;

    /* Layout / chrome — sivupalkki (handoff) */
    --flow-color-nav-bg: #ffffff;
    --flow-color-nav-border: #eaeef2;
    --flow-color-nav-brand: #12384f;
    --flow-color-nav-link: #4a6478;
    --flow-color-nav-link-active: #0b7d5e;
    --flow-color-nav-link-active-bg: #e9f7f1;
    --flow-color-nav-link-hover-bg: #f1f5f8;
    --flow-color-nav-muted: #9dabb8;
    /* Error-sivun gradientti ym. */
    --flow-color-nav-start: #12384f;
    --flow-color-nav-mid: #0b7d5e;
    --flow-color-nav-end: #0f9d76;
    --flow-color-topbar: #ffffff;

    /* Data / chart accents (handoff) */
    --flow-color-chart-blue: #54aee8;
    --flow-color-chart-blue-strong: #3b82f6;
    --flow-color-chart-green: #12a37e;
    --flow-color-chart-green-alt: #16a37e;
    --flow-color-chart-orange: #f4623a;
    --flow-color-chart-amber: #f59e0b;
    --flow-color-chart-purple: #8b5cf6;
    --flow-color-chart-yellow: #f5c518;
    --flow-color-chart-neutral: #8b9bab;

    /* Shadows */
    --flow-shadow-sm: 0 1px 2px rgba(20, 50, 70, 0.04);
    --flow-shadow-md: 0 2px 8px rgba(20, 50, 70, 0.10);
    --flow-shadow-lg: 0 12px 28px rgba(20, 50, 70, 0.14);
    --flow-color-primary-alpha-12: rgba(15, 157, 118, 0.12);
    --flow-color-primary-alpha-20: rgba(15, 157, 118, 0.2);

    /* Radius (handoff: 4 / 6 / 8 / 9 / 10 / 11 / 12 / 14 / 50%) */
    --flow-radius-xs: 2px;          /* kaavion pylväs, pieni UI */
    --flow-radius-swatch: 3px;      /* legenda-värilaatta */
    --flow-radius-sm: 4px;          /* checkbox, pieni kontrolli */
    --flow-radius-badge: 6px;       /* tila-tunniste */
    --flow-radius-md: 8px;          /* ikonipainike, chip, valikkorivi */
    --flow-radius-control: 9px;     /* kenttä, painike */
    --flow-radius-lg: 10px;         /* navi, hakukenttä */
    --flow-radius-kpi: 11px;        /* KPI-ikonilaatikko */
    --flow-radius-panel: 12px;      /* suodatinkortti, pudotuspaneeli */
    --flow-radius-card: 14px;       /* sisältökortti */
    --flow-radius-pill: 999px;
    --flow-radius-full: 50%;

    /* Typography */
    --flow-font-family: 'Poppins', system-ui, sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
    width: 100%;
    position: relative;
    font-family: var(--flow-font-family);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 26px;
    color: var(--flow-color-text-body);
    background: var(--flow-color-page);
}

h1, h2, h3, h4 {
    margin-bottom: 25px;
    color: var(--flow-color-text-strong);
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

h1 {
    font-size: 34px;
    line-height: 1.2em;
    font-weight: 600;
}

h2 {
    font-size: 22.4px;
    line-height: 1.4em;
    font-weight: 600;
}

h3 {
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
}

h4 {
    font-size: 21px;
    font-weight: 600;
}

p {
    margin-bottom: 25px;
}

a:not([class]) {
    text-decoration: underline;
    color: var(--flow-color-primary);
}

    a:not([class]):hover {
        text-decoration: underline;
        color: var(--flow-color-link-hover);
    }

a:focus {
    outline: 2px solid var(--flow-color-focus);
    outline-offset: 2px;
}

strong {
    font-weight: 600;
}

@media (min-width: 768px) {
    h1 {
        font-size: 38px;
    }

    h2 {
        font-size: 25.6px;
    }

    h3 {
        font-size: 26px;
    }
}

@media (min-width: 992px) {
    h1 {
        font-size: 42px;
    }
}

@media (min-width: 1200px) {
    h1 {
        font-size: 48px;
    }
}