/* Shamar Iberia: the single source for public-site colours and typography. */
@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Lora;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lora-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: Lora;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lora-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --brand-blue: #0f3b57;
    --brand-teal: #5d8f93;
    --brand-sand: #d6c1a4;
    --brand-ivory: #f7f4ef;
    --brand-graphite: #343a3e;
    --brand-white: #ffffff;
    --brand-black: #000000;

    /* Change the chosen families here; components depend only on their roles. */
    --font-primary: 'Montserrat', Arial, sans-serif;
    --font-secondary: 'Lora', Georgia, serif;
    --font-body: var(--font-primary);
    --font-ui: var(--font-primary);
    --font-heading: var(--font-secondary);
    --font-detail: var(--font-secondary);
    --weight-light: 300;
    --weight-regular: 400;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-heading: var(--weight-regular);
    --weight-detail: var(--weight-regular);

    --color-primary: var(--brand-blue);
    --color-primary-dark: color-mix(in srgb, var(--brand-blue) 85%, var(--brand-black));
    --color-accent: var(--brand-teal);
    --color-accent-text: color-mix(in srgb, var(--brand-teal) 65%, var(--brand-blue));
    --color-accent-mid: color-mix(in srgb, var(--brand-teal) 80%, var(--brand-blue));
    --color-accent-deep: color-mix(in srgb, var(--brand-teal) 55%, var(--brand-blue));
    --color-sand: var(--brand-sand);
    --color-sand-text: color-mix(in srgb, var(--brand-sand) 45%, var(--brand-graphite));
    --color-background: var(--brand-ivory);
    --color-surface: var(--brand-white);
    --color-text: var(--brand-graphite);
    --color-muted: color-mix(in srgb, var(--brand-graphite) 75%, var(--brand-ivory));
    --color-border: color-mix(in srgb, var(--brand-sand) 55%, var(--brand-ivory));
    --color-tint: color-mix(in srgb, var(--brand-teal) 10%, var(--brand-ivory));
    --color-hover: color-mix(in srgb, var(--brand-teal) 16%, var(--brand-ivory));
    --color-sand-tint: color-mix(in srgb, var(--brand-sand) 30%, var(--brand-ivory));
    --color-on-primary: var(--brand-ivory);
    --color-on-primary-muted: color-mix(in srgb, var(--brand-ivory) 75%, var(--brand-blue));
    --color-error: #8d3c2e;

    /* Existing Presite names remain aliases, without a second palette. */
    --deep-blue: var(--color-primary);
    --soft-teal: var(--color-accent);
    --sand: var(--color-sand);
    --ivory: var(--color-background);
    --graphite: var(--color-text);

    /* Public Tailwind utilities use the same tokens; admin keeps its own theme. */
    --font-sans: var(--font-body);
    --font-serif: var(--font-heading);
    --font-weight-light: var(--weight-light);
    --font-weight-normal: var(--weight-regular);
    --font-weight-medium: var(--weight-semibold);
    --font-weight-semibold: var(--weight-semibold);
    --font-weight-bold: var(--weight-bold);
    --font-weight-extrabold: var(--weight-bold);
    --font-weight-black: var(--weight-bold);
    --color-slate-50: var(--color-background);
    --color-slate-100: var(--color-tint);
    --color-slate-200: var(--color-border);
    --color-slate-300: var(--color-border);
    --color-slate-400: var(--color-muted);
    --color-slate-500: var(--color-muted);
    --color-slate-600: var(--color-text);
    --color-slate-700: var(--color-text);
    --color-slate-800: var(--color-primary);
    --color-slate-900: var(--color-primary);
    --color-slate-950: var(--color-primary);
    --color-indigo-50: var(--color-tint);
    --color-indigo-100: var(--color-hover);
    --color-indigo-200: var(--color-border);
    --color-indigo-500: var(--color-accent-text);
    --color-indigo-600: var(--color-primary);
    --color-indigo-700: var(--color-primary-dark);

    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-synthesis: none;
}

body { font-family: var(--font-body); }
h1, h2 { font-family: var(--font-heading); font-weight: var(--weight-heading); }
h3, h4, h5, h6 { font-family: var(--font-ui); font-weight: var(--weight-semibold); }

/* Companion colours for each editable section background. Keep these local to
   the section: cards with their own surface retain their own colour pairing. */
[data-pc-background="ivory"],
[data-pc-background="sand"] {
    --section-heading: var(--brand-blue);
    --section-text: var(--brand-graphite);
    --section-muted: var(--brand-graphite);
    --section-accent: var(--color-accent-text);
    --section-line: color-mix(in srgb, var(--brand-blue) 25%, transparent);
    --section-button: var(--brand-blue);
    --section-button-text: var(--brand-ivory);
    --section-button-hover: var(--color-primary-dark);
    --section-focus: var(--brand-blue);
}
[data-pc-background="sand"] {
    --section-accent: var(--brand-blue);
}
[data-pc-background="blue"],
[data-pc-background="graphite"] {
    --section-heading: var(--brand-ivory);
    --section-text: var(--brand-ivory);
    --section-muted: var(--brand-sand);
    --section-accent: var(--brand-sand);
    --section-line: color-mix(in srgb, var(--brand-ivory) 30%, transparent);
    --section-button: var(--brand-sand);
    --section-button-text: var(--brand-blue);
    --section-button-hover: var(--brand-ivory);
    --section-focus: var(--brand-ivory);
}
[data-pc-background="teal"] {
    --section-heading: var(--brand-black);
    --section-text: var(--brand-black);
    --section-muted: var(--brand-black);
    --section-accent: var(--brand-black);
    --section-line: color-mix(in srgb, var(--brand-black) 35%, transparent);
    --section-button: var(--brand-blue);
    --section-button-text: var(--brand-ivory);
    --section-button-hover: var(--color-primary-dark);
    --section-focus: var(--brand-black);
}