/*
 * KemisJewel visual foundations.  Storefront and dashboard styles consume
 * these tokens so presentation does not introduce parallel colour systems.
 */
@font-face {
    font-family: "Hero";
    src: url("../fonts/HeroLight-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Hero";
    src: url("../fonts/HeroLight-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand and surfaces */
    --colour-teal: #006d6f;
    --colour-teal-deep: #004f52;
    --colour-gold: #c6a15b;
    --colour-gold-dark: #8a6825;
    --colour-ivory: #faf8f3;
    --colour-charcoal: #252525;
    --colour-white: #ffffff;
    --colour-teal-soft: #e7f0ee;
    --colour-gold-soft: #f3ebdc;
    --colour-charcoal-muted: #625f5b;
    --colour-surface-muted: #f1eee7;
    --colour-image-surface: #ece9e1;
    --colour-header-surface: rgba(250, 248, 243, .96);
    --colour-surface-translucent: rgba(255, 255, 255, .45);
    --colour-hero-overlay-start: rgba(0, 79, 82, .78);
    --colour-hero-overlay-middle: rgba(0, 79, 82, .38);
    --colour-hero-overlay-end: rgba(0, 79, 82, .10);
    --colour-image-overlay: rgba(0, 79, 82, .62);
    --colour-on-dark-muted: rgba(255, 255, 255, .76);
    --colour-on-dark-subtle: rgba(255, 255, 255, .58);
    --colour-on-dark-border: rgba(255, 255, 255, .24);

    /* Semantic states: never use brand gold for an error state. */
    --colour-success: #1e6a4d;
    --colour-success-surface: #edf7f1;
    --colour-warning: #805b15;
    --colour-warning-surface: #fbf4e5;
    --colour-error: #9d2d28;
    --colour-error-surface: #fff2ef;
    --colour-info: #075c73;
    --colour-info-surface: #edf7f8;

    --colour-border: rgba(37, 37, 37, .16);
    --colour-border-strong: rgba(0, 79, 82, .42);
    --colour-focus-ring: #006d6f;
    --shadow-focus-ring: 0 0 0 .2rem rgba(0, 109, 111, .18);

    /* Typography */
    --font-display: Georgia, "Times New Roman", serif;
    --font-body: "Hero", Arial, sans-serif;
    --font-size-xs: .75rem;
    --font-size-sm: .875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --line-height-tight: 1.05;
    --line-height-body: 1.5;
    --line-height-relaxed: 1.65;

    /* Layout and motion */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --radius-sm: 2px;
    --radius-md: 4px;
    --shadow-raised: 0 14px 34px rgba(0, 79, 82, .12);
    --shadow-subtle: 0 5px 16px rgba(37, 37, 37, .08);
    --container-content: 1240px;
    --container-catalogue: 1500px;
    --shell: min(var(--container-content), calc(100% - 64px));
    --breakpoint-narrow: 360px;
    --breakpoint-mobile: 640px;
    --breakpoint-tablet: 900px;
    --breakpoint-desktop: 1120px;
    --transition-fast: 160ms ease;
    --transition-standard: 240ms ease;

    /* Compatibility aliases used by established project templates. */
    --ink: var(--colour-charcoal);
    --warm-ink: var(--colour-teal-deep);
    --ivory: var(--colour-ivory);
    --blush: var(--colour-teal-soft);
    --sand: var(--colour-gold-soft);
    --muted: var(--colour-charcoal-muted);
    --line: var(--colour-border);
    --serif: var(--font-display);
    --sans: var(--font-body);
}