/* ============================================================
   PEARL RIVERA — Design Tokens
   ============================================================ */

/* SVN-Century Gothic — local fonts */
@font-face {
    font-family: 'SVN-Century Gothic';
    src: url('../fonts/century/ttf/SVN-CenturyGothic-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Century Gothic';
    src: url('../fonts/century/ttf/SVN-CenturyGothic-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Century Gothic';
    src: url('../fonts/century/ttf/SVN-CenturyGothic-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Century Gothic';
    src: url('../fonts/century/ttf/SVN-CenturyGothic-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Century Gothic';
    src: url('../fonts/century/ttf/SVN-CenturyGothic-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Century Gothic';
    src: url('../fonts/century/ttf/SVN-CenturyGothic-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Century Gothic';
    src: url('../fonts/century/ttf/SVN-CenturyGothic-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Century Gothic';
    src: url('../fonts/century/ttf/SVN-CenturyGothic-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Century Gothic';
    src: url('../fonts/century/ttf/SVN-CenturyGothic-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Century Gothic';
    src: url('../fonts/century/ttf/SVN-CenturyGothic-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Century Gothic';
    src: url('../fonts/century/ttf/SVN-CenturyGothic-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Century Gothic';
    src: url('../fonts/century/ttf/SVN-CenturyGothic-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Century Gothic';
    src: url('../fonts/century/ttf/SVN-CenturyGothic-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Century Gothic';
    src: url('../fonts/century/ttf/SVN-CenturyGothic-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* SVN-Domaine Text — local fonts */
@font-face {
    font-family: 'SVN-Domaine Text';
    src: url('../fonts/domaine/SVN-DomaineText-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Domaine Text';
    src: url('../fonts/domaine/SVN-DomaineText-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Domaine Text';
    src: url('../fonts/domaine/SVN-DomaineText-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Domaine Text';
    src: url('../fonts/domaine/SVN-DomaineText-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Domaine Text';
    src: url('../fonts/domaine/SVN-DomaineText-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Domaine Text';
    src: url('../fonts/domaine/SVN-DomaineText-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Domaine Text';
    src: url('../fonts/domaine/SVN-DomaineText-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Domaine Text';
    src: url('../fonts/domaine/SVN-DomaineText-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Domaine Text';
    src: url('../fonts/domaine/SVN-DomaineText-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SVN-Domaine Text';
    src: url('../fonts/domaine/SVN-DomaineText-BlackItalic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Brand Colors */
    --pr-0: #fcf9f6;
    --pr-1: #fff5e3;
    --pr-2: #e2d4ba;
    --pr-3: #0e8b8b;
    --pr-4: #1d6e72;
    --pr-5: #80644f;
    --pr-6: #655143;

    /* Semantic */
    --color-bg: var(--pr-0);
    --color-primary: var(--pr-3);
    --color-secondary: var(--pr-5);
    --color-accent: var(--pr-1);
    --color-border: var(--pr-5);
    --color-text: var(--pr-5);
    --color-text-muted: var(--pr-6);

    /* Typography */
    --font-family: 'SVN-Century Gothic', 'Century Gothic', 'Trebuchet MS', Arial, sans-serif;
    --font-family-domaine: 'SVN-Domaine Text', Georgia, serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 14px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-hero: 96px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Layout */
    --container-max: 1920px;
    --container-padding: 48px;

    /* Radius */
    --radius-pill: 100px;
    --radius-circle: 9999px;
    --radius-lg: 48px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Breakpoints
   Mobile:  < 768px
   Tablet:  768px – 1024px
   Laptop:  1024px – 1440px
   Desktop: 1440px – 1920px
   Wide:    > 1920px
*/