/*
  Carina VZ - Base Theme Styles
  Common classes and CSS variables
  Loaded first before blocks.css
*/

/* ================================
    BASE FONTS
    ================================ */

@font-face {
    font-family: 'DIN Alternate';
    src: url('../fonts/DINAlternate-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Nohemi';
    src: url('../fonts/Nohemi-VF.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

/* ================================
    CSS VARIABLES
    ================================ */
:root {
    /* Responsive breakpoints: tablet 1024px, mobile 768px, small mobile 480px. */
    --carina-color-red: #d23f33;
    --carina-color-red-light: #f7e5e1;
    --carina-color-red-dark: #b8302a;
    --carina-color-gold: #edb45e;
    --carina-color-gold-2: #E9A742;
    --carina-sunny-light: #F8E5C6;
    --carina-color-cream: #fff8dc;
    --carina-color-navy: #1f2545;
    --carina-color-light: #fffaf0;
    --carina-color-candy: #f8e6e2;
    --carina-color-white: #fff;
    --carina-color-black: #1a1a1a;
    --carina-color-muted: #666;
    --carina-color-border-subtle: #eee;
    --carina-color-star-empty: #ddd;
    --carina-color-text: var(--carina-color-navy);
    --carina-color-text-body: var(--carina-color-black);
    --carina-color-surface: var(--carina-color-white);
    --carina-color-page: var(--carina-color-white);

    --carina-primary: var(--carina-color-red);
    --carina-secondary: var(--carina-color-gold);
    --carina-cream: var(--carina-color-cream);
    --carina-dark: var(--carina-color-navy);
    --carina-light: var(--carina-color-light);
    --carina-gold: var(--carina-color-gold);
    --carina-candy: var(--carina-color-candy);

    --carina-font-display: 'Nohemi', sans-serif;
    --carina-font-body: 'DIN Alternate', sans-serif;
    --carina-font-eyebrow: var(--carina-font-display);

    --carina-tilt: -2deg;
    --carina-radius-xs: 4px;
    --carina-radius-sm: 6px;
    --carina-radius-md: 8px;
    --carina-radius-lg: 12px;
    --carina-radius-card: 20px;
    --carina-radius-pill: 999px;
    --carina-radius-round: 50%;
    --carina-radius: var(--carina-radius-xs);

    --carina-site-max-width: 1560px;
    --carina-section-max-width: 1400px;
    --carina-banner-min-height: 280px;
    --carina-section-inline-padding: 64px;
    --carina-max-width: var(--carina-site-max-width);
    --carina-wide-width: var(--carina-site-max-width);
    --carina-container-pad: 20px;

    --carina-button-font-size: 18px;
    --carina-button-font-weight: 700;
    --carina-button-line-height: 23px;
    --carina-button-padding-y: 12.5px;
    --carina-button-padding-x: 16px;
    --carina-button-radius: 6px;

    --carina-space-1: 0.25rem;
    --carina-space-2: 0.5rem;
    --carina-space-3: 0.75rem;
    --carina-space-4: 1rem;
    --carina-space-5: 1.25rem;
    --carina-space-6: 1.5rem;
    --carina-space-8: 2rem;
    --carina-space-10: 2.5rem;
    --carina-space-12: 3rem;
    --carina-space-16: 4rem;
    --carina-space-20: 5rem;
    --carina-space-24: 6rem;
    --carina-space-30: 7.5rem;
    --carina-spacing-s: var(--carina-space-4);
    --carina-spacing-m: var(--carina-space-8);
    --carina-spacing-l: var(--carina-space-16);
    --carina-section-y: var(--carina-space-16);

    --carina-font-s: 0.875rem;
    --carina-font-m: 1rem;
    --carina-font-md: 18px;
    --carina-font-lg: 1.25rem;
    --carina-font-xl: 24px;
    --carina-font-2xl: 2rem;
    --carina-font-2-5xl: 40px;
    --carina-font-3xl: 3rem;

    /* Shared component values. Keep component styles free of raw typography values. */
    --carina-font-size-body: 20px;
    --carina-font-size-root: 16px;
    --carina-font-size-label: 16px;
    --carina-font-size-caption: 15px;
    --carina-font-size-xs: 12px;
    --carina-font-size-micro: 6px;
    --carina-font-size-tiny: 13px;
    --carina-font-size-sm: 14px;
    --carina-font-size-display: 44px;
    --carina-font-size-display-large: 60px;
    --carina-font-size-hero: 72px;
    --carina-border-thin: 1px;
    --carina-border-medium: 2px;
    --carina-border-strong: 3px;
    --carina-form-field-height: 45px;
    --carina-form-field-padding: 12px;
    --carina-form-label-gap: 6px;
    --carina-form-field-gap: 24px;
    --carina-form-column-gap: 16px;
    --carina-form-max-width: 800px;
    --carina-form-eyebrow-size: 20px;
    --carina-form-title-size: 32px;
    --carina-form-content-size: 18px;
    --carina-breakpoint-tablet: 1024px;
    --carina-breakpoint-mobile: 768px;
    --carina-breakpoint-small: 480px;

    --carina-line-tight: 1.1;
    --carina-line-title: 1.2;
    --carina-line-body: 1.25;
    --carina-tracking-eyebrow: 0.094rem;
    --carina-tracking-button: 0.063rem;

    --carina-shadow-soft: 0 4px 20px rgba(31, 37, 69, 0.12);
    --carina-shadow-pop: 0 4px 15px rgba(0, 0, 0, 0.1);
    --carina-shadow-pop-hover: 0 6px 20px rgba(0, 0, 0, 0.15);
    --carina-shadow-title: 2px 4px 30px rgba(0, 0, 0, 0.5);
    --carina-transition-fast: 0.2s ease;
    --carina-transition-base: 0.3s ease;
    --carina-focus-ring: 3px solid var(--carina-secondary);
}

/* Gutenberg palette utilities for core blocks such as Columns and Group. */
.has-carina-white-background-color { background-color: var(--carina-color-white); }
.has-carina-red-background-color { background-color: var(--carina-primary); }
.has-carina-gold-background-color { background-color: var(--carina-secondary); }
.has-carina-navy-background-color { background-color: var(--carina-dark); }
.has-carina-sunny-light-background-color { background-color: var(--carina-sunny-light); }

.has-carina-white-color { color: var(--carina-color-white); }
.has-carina-red-color { color: var(--carina-primary); }
.has-carina-gold-color { color: var(--carina-secondary); }
.has-carina-navy-color { color: var(--carina-dark); }
.has-carina-sunny-light-color { color: var(--carina-sunny-light); }

/* ================================
    RESET
    ================================ */

p {
    margin: 0;
}

/* ================================
    COMMON TYPOGRAPHY CLASSES
    ================================ */

/* H1 Titles */
.carina-title-1 {
    font-family: var(--carina-font-display);
    font-size: var(--carina-font-3xl);
    font-weight: 700;
    line-height: var(--carina-line-tight);
    color: var(--carina-color-text);
    margin: 0 0 var(--carina-space-4);
}

/* H2 Titles */
.carina-title-2 {
    font-family: var(--carina-font-display);
    font-size: var(--carina-font-2xl);
    font-weight: 700;
    line-height: var(--carina-line-title);
    color: var(--carina-color-text);
    margin: 0 0 var(--carina-space-4);
}

.carina-title-2 b,
.carina-title-2 strong {
    display: inline-block;
    padding: 8px 18px 10px;
    background: var(--carina-color-red-light);
    color: var(--carina-primary);
    font-weight: 700;
    transform: rotate(var(--carina-tilt));
}

/* H3 Titles */
.carina-title-3 {
    font-family: var(--carina-font-display);
    font-size: var(--carina-font-lg);
    font-weight: 600;
    line-height: 1.3;
    color: var(--carina-color-text);
    margin: 0 0 var(--carina-space-3);
}

/* Body text */
.carina-body {
    font-family: var(--carina-font-display);
    font-size: var(--carina-font-size-caption);
    line-height: var(--carina-line-body);
    color: var(--carina-color-text-body);
}

.carina-body p {
    margin: 0 0 1rem;
}

.carina-body p:last-child {
    margin-bottom: 0;
}

/* ================================
    COMMON UTILITY CLASSES
    ================================ */

/* Tilted title - add dark-blue bg, white text, and rotation
   Use with .bg-* helpers for different background colors */
.tilted-title {
    display: inline-block;
    background: var(--carina-dark);
    color: var(--carina-color-white);
    padding: 8px 18px 10px;
    transform: rotate(var(--carina-tilt));
    margin-bottom: var(--carina-spacing-m);
}

/* Background colors */
.bg-primary {
    background-color: var(--carina-primary) !important;
}

.bg-secondary, .bg-yellow {
    background-color: var(--carina-secondary) !important;
}

.bg-dark, .bg-navy {
    background-color: var(--carina-dark) !important;
}

.bg-cream {
    background-color: var(--carina-cream) !important;
}

.bg-light {
    background-color: var(--carina-light) !important;
}

/* Text colors */
.text-primary {
    color: var(--carina-primary) !important;
}

.text-secondary, .text-yellow {
    color: var(--carina-secondary) !important;
}

.text-dark, .text-navy {
    color: var(--carina-dark) !important;
}

.text-light {
    color: var(--carina-light) !important;
}

.text-white {
    color: var(--carina-color-white) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: var(--carina-focus-ring);
    outline-offset: 3px;
}

/* Eyebrow / subtitle text */
.carina-eyebrow {
    font-family: var(--carina-font-eyebrow);
    font-size: var(--carina-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--carina-tracking-eyebrow);
    color: var(--carina-secondary);
    margin-bottom: var(--carina-space-2);
}

/* ================================
    COMMON BUTTONS
    ================================ */

.btn-primary,
.btn-navy,
.btn-white,
.btn-candela {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--carina-font-display);
    font-size: var(--carina-button-font-size);
    font-weight: var(--carina-button-font-weight);
    line-height: var(--carina-button-line-height);
    letter-spacing: var(--carina-tracking-button);
    text-decoration: none;
    padding: var(--carina-button-padding-y) var(--carina-button-padding-x);
    border-radius: var(--carina-button-radius);
    cursor: pointer;
    transition: background var(--carina-transition-fast), border-color var(--carina-transition-fast), color var(--carina-transition-fast), transform var(--carina-transition-fast);
    border: 2px solid transparent;
}

.carina-title {
    font-family: var(--carina-font-display);
    font-size: var(--carina-form-title-size);
    font-weight: 700;
}

.btn-primary {
    background: var(--carina-primary);
    border-color: var(--carina-primary);
    color: var(--carina-color-white);
}

.btn-primary:hover {
    background: var(--carina-color-red-dark);
    border-color: var(--carina-color-red-dark);
    color: var(--carina-color-white);
    transform: translateY(-1px);
}

.btn-navy {
    background: var(--carina-dark);
    border-color: var(--carina-dark);
    color: var(--carina-color-white);
}

.btn-navy:hover {
    background: var(--carina-color-navy);
    border-color: var(--carina-color-navy);
    color: var(--carina-color-white);
    transform: translateY(-1px);
}

.btn-white {
    background: var(--carina-color-white);
    border-color: var(--carina-primary);
    color: var(--carina-primary);
}

.btn-white:hover {
    background: var(--carina-primary);
    border-color: var(--carina-primary);
    color: var(--carina-color-white);
    transform: translateY(-1px);
}

.btn-candela {
    background: var(--carina-primary);
    border: 3px solid var(--carina-color-white);
    color: var(--carina-color-white);
}

.btn-candela:hover {
    background: var(--carina-color-red-dark);
    color: var(--carina-color-white);
    transform: translateY(-1px);
}

/* ================================
    LAYOUT UTILITIES
    ================================ */

.carina-container {
    max-width: var(--carina-max-width);
    margin: 0 auto;
    padding: 0 var(--carina-container-pad);
}

.carina-text-center {
    text-align: center;
}

.carina-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}