/* ==========================================================================
   RIFS Design System - Base CSS
   ========================================================================== */

/* -- Custom Properties (Design Tokens) -- */
:root {
    /* Colors */
    --color-rieksts: #a6715f;
    --color-grafits: #4f5b63;
    --color-suna: #79826a;
    --color-smilga: #cbbfba;
    --color-plume: #73495d;
    --color-gliemezvaks: #e2dadb;
    --color-bg: #f9f4f4;
    --color-black: #1e1e1e;
    --color-white: #ffffff;
    --color-error: #de4f3f;
    --color-overlay: rgba(79, 91, 99, 0.5);
    --color-overlay-light: rgba(226, 218, 219, 0.2);

    /* Typography */
    --font-display: 'Hobeaux', Georgia, 'Times New Roman', serif;
    --font-body: 'Supreme', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-small: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing */
    --max-width: 1312px;
    --page-padding: 64px;
    --section-padding: 100px;

    /* Border Radius */
    --radius-input: 6px;
    --radius-btn: 15px;
    --radius-card: 20px;
    --radius-footer: 40px;
}

/* -- Font Faces -- */
@font-face {
    font-family: 'Hobeaux';
    src: url("../fonts/hobeaux/Hobeaux-Light.69fae066e346.woff2") format('woff2'),
         url("../fonts/hobeaux/Hobeaux-Light.e87b78958f5e.woff") format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Hobeaux';
    src: url("../fonts/hobeaux/Hobeaux-Regular.0ae5ecf86814.woff2") format('woff2'),
         url("../fonts/hobeaux/Hobeaux-Regular.4883e9544342.woff") format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Hobeaux';
    src: url("../fonts/hobeaux/Hobeaux-Bold.9b9f9c21cd3a.woff2") format('woff2'),
         url("../fonts/hobeaux/Hobeaux-Bold.4c64cf626c23.woff") format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Hobeaux';
    src: url("../fonts/hobeaux/Hobeaux-Black.3e0b3722d42b.woff2") format('woff2'),
         url("../fonts/hobeaux/Hobeaux-Black.fede1876ff5d.woff") format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Supreme';
    src: url("../fonts/supreme/Supreme-Variable.071dbaade84b.woff2") format('woff2'),
         url("../fonts/supreme/Supreme-Variable.0cc077c384bd.woff") format('woff');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Supreme';
    src: url("../fonts/supreme/Supreme-VariableItalic.b127b036eaf9.woff2") format('woff2'),
         url("../fonts/supreme/Supreme-VariableItalic.fefd8e3769ca.woff") format('woff');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* -- Reset & Base -- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-black);
    background-color: var(--color-bg);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, textarea {
    font-family: var(--font-body);
    font-size: 16px;
}

/* -- Typography Classes -- */
.h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 64px;
    line-height: 1.2;
}

.h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 56px;
    line-height: 1.2;
}

.h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 48px;
    line-height: 1.2;
}

.h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 35px;
    line-height: 1.2;
}

.h5 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.4;
}

.body-large {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
}

.body {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
}

.body-small {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
}

.text-small {
    font-family: var(--font-small);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
}

/* -- Rich Text Prose -- */
.rich-text p {
    margin-bottom: 1em;
}

.rich-text p:last-child {
    margin-bottom: 0;
}

.rich-text ul,
.rich-text ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
}

.rich-text ul {
    list-style: disc;
}

.rich-text ol {
    list-style: decimal;
}

.rich-text li {
    margin-bottom: 0.25em;
}

.rich-text a {
    color: var(--color-rieksts);
    text-decoration: underline;
}

.rich-text a:hover {
    color: var(--color-plume);
}

/* -- Container -- */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--page-padding);
}

/* -- Buttons -- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: var(--radius-btn);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: opacity 0.2s, transform 0.1s;
    min-width: 166px;
}

.btn:hover {
    opacity: 0.9;
}

.btn:active {
    transform: scale(0.98);
}

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

.btn--secondary {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

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

.btn--accent {
    background: var(--color-rieksts);
    color: var(--color-white);
    border-color: var(--color-rieksts);
}

.required {
    color: var(--color-error);
    font-weight: 700;
}

/* -- Page Decorations -- */
main {
    position: relative;
}

.page-decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    
}

.page-decoration {
    position: absolute;
}

/* Dark grey leaf - left of hero */
.page-decoration--1 {
    top: 570px;
    left: -140px;
    width: 380px;
}

/* Olive green botanical - right below hero */
.page-decoration--2 {
    top: 860px;
    right: -120px;
    width: 340px;
}

/* Beige leaf - left of about section */
.page-decoration--3 {
    top: 2840px;
    left: -100px;
    width: 320px;
}

/* Terracotta - left middle area */
.page-decoration--4 {
    top: 3720px;
    left: -60px;
    width: 300px;
}

/* Plum botanical - right near contact form */
.page-decoration--5 {
    top: 4490px;
    right: -20px;
    width: 180px;
    transform:scaleX(-1);
}

@media (max-width: 1024px) {
    .page-decorations {
        display: none;
    }
}

/* -- Responsive Breakpoints -- */
@media (max-width: 1024px) {
    :root {
        --page-padding: 40px;
        --section-padding: 60px;
    }
    .h1 { font-size: 48px; }
    .h2 { font-size: 40px; }
    .h3 { font-size: 36px; }
    .h4 { font-size: 28px; }
}

@media (max-width: 768px) {
    :root {
        --page-padding: 24px;
        --section-padding: 40px;
    }
    .h1 { font-size: 36px; }
    .h2 { font-size: 32px; }
    .h3 { font-size: 28px; }
    .h4 { font-size: 24px; }
    .h5 { font-size: 22px; }
}

@media (max-width: 375px) {
    :root {
        --page-padding: 16px;
        --section-padding: 32px;
    }
    .h1 { font-size: 32px; }
    .h2 { font-size: 28px; }
}