/* CSS Custom Properties
 * Verbatim mirror of ../../../css/variables.css (the theme's real design
 * tokens). This root-domain page is standalone static HTML — it can't
 * @import the theme's stylesheet directly — so instead of hand-copying a
 * handful of values (the mistake made in zLocalDevFiles/thenicepart/),
 * this file mirrors the source file in full. If css/variables.css changes,
 * re-sync this file to match rather than letting it drift.
 * Load this file FIRST before all other stylesheets.
 */

:root {

    /* ==========================================
       TYPOGRAPHY
       ========================================== */
    --font-serif-display: spectral, serif;   /* Hero-scale, italic voice */
    --font-serif-heading: lora, serif;       /* Sectional headings, upright voice */
    --font-sans: futura-pt, sans-serif;

    --font-size-2xs: 0.65rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.9rem;
    --font-size-common-sm: 1.0rem;
    --font-size-common: 1.1rem;
    --font-size-md: 1.2rem;
    --font-size-lg: 1.5rem;
    --font-size-xl: 2rem;
    --font-size-2xl: 2.5rem;

    --font-weight-light:    300;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:    1.2;
    --line-height-heading:  1.4;
    --line-height-normal:   1.5;
    --line-height-relaxed:  1.6;
    --line-height-body:     1.8;

    --letter-spacing-body: 0rem;
    --letter-spacing-eyebrow: 0.18em;

    /* ==========================================
       COLORS: Brand Palette
       ========================================== */

    --bg-light: #f5f3f0;
    --bg-white: #FFF;
    --bg-dark: #2c2c2c;
    --bg-nav: #252931;
    --bg-foot: #252931;

    --text-dark: #2c2c2c;
    --text-dark-alt: #333;
    --text-gray: #666;
    --text-light-gray: #999;
    --text-medium-gray: #AAA;
    --text-lightest-gray: #CCC;
    --text-white: #FFF;

    --border-color: #e0e0e0;
    --border-light-gray: #999;
    --border-lightest-gray: #CCC;
    --border-dark: #333;
    --border-white: #FFF;
    --border-subtle: rgba(0, 0, 0, 0.1);
    --border-testimonial: rgba(255, 255, 255, 0.8);

    --color-hover-on-dark: #E57200;
    --color-highlight: #E57200;
    --color-highlight-hover: #F37021;

    --button-bg-hover: #333;
    --button-bg-hover-light: #DDD;
    --button-text-hover: #FFF;

    --social-bg: #555;
    --social-hover: #777;

    /* ==========================================
       SPACING SCALE (rem-based)
       ========================================== */
    --space-xxs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;

    --container-collection: 1100px;

    /* ==========================================
       TRANSITIONS
       ========================================== */
    --transition-base: all 0.3s ease;
    --transition-transform: transform 0.3s ease;
    --transition-color: background-color 0.2s ease;
    --transition-border: border-bottom-color 0.3s ease;

    /* ==========================================
       LINKS
       ========================================== */
    --link-color: #2c2c2c;
    --link-underline: #ccc;
    --link-underline-hover: #2c2c2c;

    --link-underline-on-dark: rgba(255, 255, 255, 0.5);
    --link-underline-hover-on-dark: #fff;

    /* ==========================================
       LAYOUT
       ========================================== */
    --nav-height: 70px;
    --nav-opacity: 1;

    --nav-link-default: rgba(255, 255, 255, 0.8);
    --nav-link-hover: rgba(255, 255, 255, 1);
    --nav-dropdown-hover-bg: rgba(255, 255, 255, 0.03);

    --ratio-content-mobile: 4.5/6;
    --ratio-landscape: 3/2;
    --ratio-square: 1/1;
    --ratio-portrait: 2/3;
    --ratio-gallery-portrait: 3/4;

    --container-narrow: 800px;
    --container-default: 1000px;
    --container-wide: 1200px;
    --container-full: 1280px;
    --container-prose: 600px;

    --scrollbar-width: calc(100vw - 100%);

    --hero-internal-gradient-top-opacity: 0.5;
    --hero-internal-gradient-bottom-opacity: 0.6;

    /* ==========================================
       FORM & VALIDATION COLORS
       ========================================== */
    --color-error: #e63946;
    --color-error-bg: #fff5f5;
    --color-error-text: #e63946;

    --color-success: #52b788;
    --color-success-bg: #f0fdf4;
    --color-success-text: #166534;

    --color-warning: #f59e0b;
    --color-warning-bg: #fffbeb;
    --color-warning-text: #92400e;

    /* ==========================================
       BOX SHADOWS
       ========================================== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 8px 25px rgba(0, 0, 0, 0.2);
    --shadow-focus: 0 0 0 2px rgba(0, 0, 0, 0.1);

    /* ==========================================
       TEXT SHADOWS
       ========================================== */
    --text-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --text-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --text-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
    --text-shadow-lg: 1px 1px 3px rgba(0, 0, 0, 0.5);
    --text-shadow-xl: 2px 2px 4px rgba(0, 0, 0, 0.5);

    /* ==========================================
       OVERLAYS & TRANSPARENCY (Black)
       ========================================== */
    --overlay-black-subtle: rgba(0, 0, 0, 0.1);
    --overlay-black-light: rgba(0, 0, 0, 0.2);
    --overlay-black-medium: rgba(0, 0, 0, 0.4);
    --overlay-black-dark: rgba(0, 0, 0, 0.6);
    --overlay-black-heavy: rgba(0, 0, 0, 0.75);
    --overlay-black-opaque: rgba(0, 0, 0, 0.8);

    /* ==========================================
       OVERLAYS & TRANSPARENCY (White)
       ========================================== */
    --overlay-white-subtle: rgba(255, 255, 255, 0.1);
    --overlay-white-light: rgba(255, 255, 255, 0.3);
    --overlay-white-medium: rgba(255, 255, 255, 0.5);
    --overlay-white-opaque: rgba(255, 255, 255, 0.95);

    /* ==========================================
       BORDER RADIUS SCALE
       ========================================== */
    --radius-xs: 2px;
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 20px;
    --radius-full: 50px;
    --radius-circle: 50%;

    /* ==========================================
       CONTENT MAX-WIDTHS
       ========================================== */
    --content-text: 500px;
    --content-form: 520px;
    --content-article: 600px;
    --content-hero-subtitle: 700px;
    --content-image-float: 400px;

}

/* ==========================================
   UNIVERSAL FONT-WEIGHT DEFAULT
   ========================================== */
* {
    font-weight: var(--font-weight-normal);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-normal);
}