/*
 * Theme Variables
 *
 * Change these values to reskin the application for different clients.
 * No color words are used in variable names - they describe purpose, not appearance.
 */

@font-face {
    font-family: 'CoFo Sans';
    src: url("../fonts/CoFoSans-Medium-n-FivTb.woff") format('woff');
    font-weight: 400;
    font-style: normal;
}

:root {
    /* Primary colors */
    --color-primary: #0B5A98;
    --color-primary-dark: #1A049E;
    --color-accent: #FFC4C2;
    --color-accent-hover: #ffb1ae;

    /* Background colors */
    --color-bg: #FFF;
    --color-bg-subtle: #F2EEE9;
    --color-bg-muted: #F2EEE9;
    --color-bg-overlay: rgba(0, 0, 0, 0.8);
    --color-bg-overlay-light: rgba(0, 0, 0, 0.5);

    /* Text colors */
    --color-text: #000;
    --color-text-inverse: #FFF;
    --color-text-muted: #555;
    --color-link: #DB212A;

    /* UI colors */
    --color-border: #1A049E;
    --color-progress-bg: #D4D9E8;
    --color-slideover-bg: #C2CEEB;
    --color-section-alt: #F5F6F7;
    --color-section-dark: #000;
    --color-section-dark-accent: #E9CB26;

    /* Button specific */
    --btn-border-radius: 50px;
    --btn-border-radius-lg: 56.5px;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;

    /* Typography */
    --font-family: 'CoFo Sans', sans-serif;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Postcard styling (client-specific) */
    --postcard-max-width: 180px;
    --postcard-height: 190px;
    --postcard-small-max-width: 94px;
    --postcard-small-height: 100px;
    --postcard-preview-width: 75%;
    --postcard-preview-max-width: 600px;
    --postcard-type-top: 24%;
    --postcard-type-left: 3%;
    --postcard-type-width: 35%;
    --postcard-type-height: 4%;
    --postcard-type-color: rgba(255, 255, 255, 0.8);
    --postcard-name-top: 29%;
    --postcard-name-left: 3%;
    --postcard-name-width: 40%;
    --postcard-name-height: 10%;
    --postcard-name-color: #FFF;
    --postcard-photo-right: 5.3%;
    --postcard-photo-top: 11.2%;
    --postcard-photo-width: 52.7%;
    --postcard-photo-height: 77%;
}