/* Petal Posse brand palette and type scale */

@font-face {
    font-family: "Glacial Indifference";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("https://cdn.jsdelivr.net/npm/typeface-glacial-indifference@1.1.14/files/glacial-indifference-400.woff2") format("woff2"),
        url("https://cdn.jsdelivr.net/npm/typeface-glacial-indifference@1.1.14/files/glacial-indifference-400.woff") format("woff");
}

@font-face {
    font-family: "Glacial Indifference";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("https://cdn.jsdelivr.net/npm/typeface-glacial-indifference@1.1.14/files/glacial-indifference-400italic.woff2") format("woff2"),
        url("https://cdn.jsdelivr.net/npm/typeface-glacial-indifference@1.1.14/files/glacial-indifference-400italic.woff") format("woff");
}

@font-face {
    font-family: "Glacial Indifference";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("https://cdn.jsdelivr.net/npm/typeface-glacial-indifference@1.1.14/files/glacial-indifference-700.woff2") format("woff2"),
        url("https://cdn.jsdelivr.net/npm/typeface-glacial-indifference@1.1.14/files/glacial-indifference-700.woff") format("woff");
}

:root {
    /* Fonts */
    --pp-font-body: "Glacial Indifference", "Segoe UI", sans-serif;
    --pp-font-heading: "Glacial Indifference", "Segoe UI", sans-serif;
    --pp-font-subheading: "Playfair Display", Georgia, serif;

    /* Semantic aliases */
    --pp-primary: var(--pp-primary-600);
    --pp-secondary: var(--pp-secondary-600);
    --pp-sage: var(--pp-secondary-400);

    /* Primary — purple (brand base: #7271a4) */
    --pp-primary-600: #7271a4;
    --pp-primary-900: color-mix(in srgb, var(--pp-primary-600) 55%, black);
    --pp-primary-700: #5b5a83; /* pinned to the v17 design reference's --primary-dark, not derived */
    --pp-primary-500: color-mix(in srgb, var(--pp-primary-600) 85%, white);
    --pp-primary-400: color-mix(in srgb, var(--pp-primary-600) 70%, white);
    --pp-primary-300: color-mix(in srgb, var(--pp-primary-600) 40%, white);
    --pp-primary-100: #ece9f8; /* pinned to the v17 design reference's --fill, not derived */

    /* Secondary — green. Suzie's sage, exactly as in her designs. White text on it is ~4.1:1 — passes
       WCAG AA for large text only; the slightly darker #627a68 (4.66:1) was tried and judged too dark.
       Previous brand base was the olive #606e4a. */
    --pp-secondary-600: #6b8471;
    --pp-secondary-900: color-mix(in srgb, var(--pp-secondary-600) 55%, black);
    --pp-secondary-700: color-mix(in srgb, var(--pp-secondary-600) 80%, black); /* hover shade — same ratio as primary-700 */
    --pp-secondary-500: color-mix(in srgb, var(--pp-secondary-600) 85%, white);
    --pp-secondary-400: color-mix(in srgb, var(--pp-secondary-600) 55%, white); /* sage — was pinned #a3b19b, now follows the base green */
    --pp-secondary-100: color-mix(in srgb, var(--pp-secondary-600) 20%, white);

    /* Supporting accent — blue */
    --pp-accent-blue-900: #182c59;
    --pp-accent-blue-500: #1a62ff;
    --pp-accent-blue-400: #3d8bff;
    --pp-accent-blue-100: #cce1ff;

    /* Supporting accent — orange */
    --pp-accent-orange-900: #3e2a14;
    --pp-accent-orange-500: #ad5a00;
    --pp-accent-orange-100: #ffd9ad;
    --pp-accent-orange-50: #fff6e0; /* pale cream — admin settings rows (Notifications and Settings pages) */

    /* Supporting accent — red */
    --pp-accent-red-900: #501b21;
    --pp-accent-red-700: #911826;
    --pp-accent-red-500: #db142c;
    --pp-accent-red-400: #b61629;
    --pp-accent-red-100: #ffd6d8;

    /* Supporting accent — fuchsia */
    --pp-accent-fuchsia-500: #c2185b;

    /* Gradient */
    --pp-gradient-primary: linear-gradient(135deg, var(--pp-primary) 0%, var(--pp-secondary) 100%);

    /* Backgrounds */
    --pp-bg-white: #ffffff;
    --pp-bg-offwhite: #f7f5ff;
    --pp-bg-dark: #545454;

    /* Neutrals */
    --pp-neutral-100: #f3f4f7;
    --pp-neutral-300: #e3ddf0; /* pinned to the v17 design reference's --border (purple-tinted, not gray) */

    /* Type scale (px) */
    --pp-text-xs: 11px;
    --pp-text-sm: 12px;
    --pp-text-md: 14px;
    --pp-text-base: 16px;
    --pp-text-lg: 18px;
    --pp-text-xl: 20px;
    --pp-text-2xl: 21px;
    --pp-text-3xl: 22px;
    --pp-text-4xl: 24px;
    --pp-text-5xl: 32px;
    --pp-text-6xl: 42px;
    --pp-text-7xl: 48px;
    --pp-text-8xl: 64px;
    --pp-text-9xl: 84px;
    --pp-text-10xl: 96px;
}