/*
 * Designens tokens – samma värden som iOS-appen (ios/Peepz/DesignSystem/Theme.swift och resurskatalogen).
 * Färgerna är iOS semantiska systemfärger, så att ljust och mörkt läge och appens teman ser ut som i appen.
 *
 * <html> bär tre attribut, satta av js/boot.js innan sidan ritas:
 *   data-system  "light" | "dark"    – enhetens eget läge
 *   data-scheme  "light" | "dark"    – läget sidan ritas i (ett tema tvingar mörkt)
 *   data-theme   "standard" | "morning" | "day" | "evening" | "night"  – temats dygnsdel
 * Ark (.standard) har alltid standardutseendet i enhetens läge, som i appen (B62).
 */

:root,
html[data-system="light"] .standard {
    color-scheme: light;

    --accent: #fc2913;
    --accent-fill: #fc2913;
    --accent-tint: rgba(252, 41, 19, 0.1);
    --on-accent: #fff;

    --bg: #f2f2f7;
    --card: #fff;
    --card-border: transparent;
    --card-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.05);
    --card-blur: none;
    --quiet: #e5e5ea;
    --elevated: #fff;

    --label: #000;
    --secondary: rgba(60, 60, 67, 0.6);
    --tertiary: rgba(60, 60, 67, 0.3);
    --separator: rgba(60, 60, 67, 0.2);
    --fill: rgba(120, 120, 128, 0.12);
    --fill-strong: rgba(120, 120, 128, 0.2);
    --gray5: #e5e5ea;
    --gray6: #f2f2f7;
    --tag-bg: #f2f2f7;
    --segment-selected: #fff;
    --segment-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);

    /* Text direkt på bakgrunden – rubriker och underrader utanför korten. */
    --backdrop-secondary: var(--secondary);
    --backdrop-accent: var(--accent);

    --sos: #ff3b30;
    --sos-text: #c8001a;
    --warning-text: #a84b00;
    --positive-text: #146c2e;
    --journey-text: #8944ab;
    --call-fill: #1e7d35;

    --blue: #007aff;
    --pink: #ff2d55;
    --green: #34c759;
    --orange: #ff9500;
    --purple: #af52de;
    --teal: #30b0c7;
    --yellow: #ffcc00;
    --gray: #8e8e93;
    --red: var(--accent);

    --scrim: rgba(0, 0, 0, 0.35);
    --sheet-shadow: 0 24px 80px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12);
    --popover-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.1);
}

html[data-scheme="dark"],
html[data-system="dark"] .standard {
    color-scheme: dark;

    --accent-tint: rgba(252, 41, 19, 0.18);

    --bg: #000;
    --card: #1c1c1e;
    --card-shadow: none;
    --quiet: #2c2c2e;
    --elevated: #2c2c2e;

    --label: #fff;
    --secondary: rgba(235, 235, 245, 0.6);
    --tertiary: rgba(235, 235, 245, 0.3);
    --separator: rgba(84, 84, 88, 0.6);
    --fill: rgba(118, 118, 128, 0.24);
    --fill-strong: rgba(118, 118, 128, 0.36);
    --gray5: #2c2c2e;
    --gray6: #1c1c1e;
    --tag-bg: rgba(118, 118, 128, 0.24);
    --segment-selected: #636366;
    --segment-shadow: none;

    --sos: #ff453a;
    --sos-text: #ff6961;
    --warning-text: #ff9f0a;
    --positive-text: #4cd964;
    --journey-text: #da8fff;

    --blue: #0a84ff;
    --pink: #ff375f;
    --green: #30d158;
    --orange: #ff9f0a;
    --purple: #bf5af2;
    --teal: #40c8e0;
    --yellow: #ffd60a;
    --gray: #8e8e93;

    --scrim: rgba(0, 0, 0, 0.55);
    --sheet-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --popover-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Arken går tillbaka till enhetens läge även när sidan har ett tema. */
html[data-system="light"] .standard {
    --card-border: transparent;
    --card-blur: none;
    --backdrop-secondary: var(--secondary);
    --backdrop-accent: var(--accent);
}

html[data-system="dark"] .standard {
    --card-border: transparent;
    --card-blur: none;
    --backdrop-secondary: var(--secondary);
    --backdrop-accent: var(--accent);
}

/*
 * Ett tema (Fas 28): helskärmslägets mörka, levande bakgrund med glaskort. Korten är mörkt glas med en ljus
 * kant, och text direkt på bakgrunden är nästan vit. Bakgrunden ritas av js/core/theme.js.
 */
html[data-theme]:not([data-theme="standard"]) {
    --bg: transparent;
    --card: rgba(28, 28, 30, 0.78);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-shadow: none;
    --card-blur: blur(34px) saturate(1.7);
    --quiet: var(--card);
    --backdrop-secondary: rgba(255, 255, 255, 0.85);
    --backdrop-accent: rgb(255, 153, 140);
}

@media (prefers-contrast: more) {
    :root,
    html[data-system="light"] .standard {
        --accent: #c41a0b;
        --accent-fill: #c41a0b;
        --card-border: var(--separator);
        --separator: rgba(60, 60, 67, 0.45);
        --sos: #c8001a;
        --sos-text: #a80016;
        --warning-text: #8a3d00;
        --positive-text: #0f5c25;
        --journey-text: #6e2f8e;
        --call-fill: #16692b;
    }

    html[data-scheme="dark"],
    html[data-system="dark"] .standard {
        --accent: #ff5a45;
        --accent-fill: #d01c0c;
        --separator: rgba(160, 160, 168, 0.7);
        --sos: #d70015;
        --sos-text: #ff8a84;
        --warning-text: #ffb340;
        --positive-text: #7be893;
        --journey-text: #e5b0ff;
    }

    /* "Öka kontrast": täta kort och helt vit text på en mer dämpad bakgrund. */
    html[data-theme]:not([data-theme="standard"]) {
        --card: #1c1c1e;
        --card-border: rgba(255, 255, 255, 0.4);
        --card-blur: none;
        --backdrop-secondary: #fff;
    }
}

:root {
    --card-radius: 18px;
    --control-radius: 14px;
    --screen-padding: 16px;
    --row-min: 54px;

    /* Bredderna från appens Layout.swift (Fas 26): en kolumn högst 640, två kolumner högst 1120 från 800. */
    --column-max: 640px;
    --wide-max: 1120px;

    --sidebar-width: 212px;

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* iOS textstilar. */
    --large-title: 800 34px/1.12 var(--font);
    --title: 700 28px/1.2 var(--font);
    --title2: 700 22px/1.25 var(--font);
    --title3: 600 20px/1.25 var(--font);
    --headline: 600 17px/1.3 var(--font);
    --body: 400 17px/1.35 var(--font);
    --callout: 400 16px/1.35 var(--font);
    --subheadline: 400 15px/1.35 var(--font);
    --footnote: 400 13px/1.38 var(--font);
    --caption: 400 12px/1.33 var(--font);
    --caption2: 400 11px/1.3 var(--font);

    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}