/*
 * 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: #FFCE08;
    --color-primary-dark: #000101;
/*    --color-accent: #FFC4C2;
    --color-accent-hover: #ffb1ae; */

    /* Background colors */
    --color-bg: #6E3DB8;
    --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: #FFF;
    --color-text-inverse: #000;
    --color-text-muted: #555;

    /* UI colors */
    --color-border: #FFCE08;
    --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-name-top: 24.5%;
    --postcard-name-left: 3%;
    --postcard-name-width: 40%;
    --postcard-name-height: 7%;
    --postcard-name-color: #231F20;
    --postcard-photo-right: 6%;
    --postcard-photo-top: 12%;
    --postcard-photo-width: calc(51% + 5px);
    --postcard-photo-height: calc(76% + 2px);
}