:root {

    /* Accent */
    --link-font-color: #4f7cff;

    /* Base palette */
    --color-white: #ffffff;
    --color-black: #0f1115;

    --color-maroon: #832732;

    --color-light-gray: #f5f6f8;
    --color-dark-gray: #181a20;

    --color-success: #2fbf71;
    --color-warning: #ffb020;
    --color-danger: #e5484d;
    --color-info: #3aa8ff;

    /* Border radius */
    --border-radius: 14px;

    /* Elevation */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.16);

    /* Fonts */
    --font-family-primary: "Geist", sans-serif;
    --font-family-secondary: "Cormorant", serif;

    --font-size-base: clamp(16px, 2vw, 18px);

    /* Type scale */
    --font-scale-h1: 3;
    --font-scale-h2: 2.4;
    --font-scale-h3: 1.9;
    --font-scale-h4: 1.45;
    --font-scale-h5: 1.2;
    --font-scale-h6: 1;

    --font-size-h1: clamp(calc(1rem * var(--font-scale-h1)), 5vw, calc(1rem * (var(--font-scale-h1) + 0.4)));
    --font-size-h2: clamp(calc(1rem * var(--font-scale-h2)), 4vw, calc(1rem * (var(--font-scale-h2) + 0.3)));
    --font-size-h3: clamp(calc(1rem * var(--font-scale-h3)), 3vw, calc(1rem * (var(--font-scale-h3) + 0.2)));
    --font-size-h4: clamp(calc(1rem * var(--font-scale-h4)), 2.5vw, calc(1rem * (var(--font-scale-h4) + 0.2)));
    --font-size-h5: clamp(calc(1rem * var(--font-scale-h5)), 2vw, calc(1rem * (var(--font-scale-h5) + 0.1)));
    --font-size-h6: 1rem;

    --line-height-body: 1.6;
    --line-height-heading-tight: 1.15;
    --line-height-heading: 1.25;

    /* Layout spacing */
    --padding-fluid: clamp(12px, 2vw, 24px);

    --padding-xxs: clamp(4px, 1vw, 6px);
    --padding-xs: clamp(6px, 1vw, 10px);
    --padding-sm: clamp(10px, 1.5vw, 14px);
    --padding-md: clamp(14px, 2vw, 18px);
    --padding-lg: clamp(18px, 3vw, 32px);

    /* Text spacing */
    --padding-text-fluid: clamp(0.8em, 1em, 1.3em);
    --padding-text-xs: clamp(0.4em, 0.55em, 0.65em);
    --padding-text-sm: clamp(0.6em, 0.8em, 0.95em);
    --padding-text-md: clamp(0.85em, 1.05em, 1.25em);
    --padding-text-lg: clamp(1.1em, 1.35em, 1.6em);
}

:root {
    color-scheme: light dark;

    /* LIGHT MODE */
    --page-background-color-light: #f4f2ec;
    --page-background-color-over-light: #ffffff;
    --page-over-border-color-light: #e4e1d8;

    /* DARK MODE */
    --page-background-color-dark: #141518;
    --page-background-color-over-dark: #1c1e24;
    --page-over-border-color-dark: #2a2d36;

    /* Derived tokens */
    --page-background-color:
        light-dark(var(--page-background-color-light), var(--page-background-color-dark));

    --page-background-color-over:
        light-dark(var(--page-background-color-over-light), var(--page-background-color-over-dark));

    --page-background-color-reverse:
        light-dark(var(--page-background-color-dark), var(--page-background-color-light));

    --page-font-color:
        light-dark(#1a1c20, #f3f4f6);

    --page-font-color-reverse:
        light-dark(#ffffff, #0f1115);

    --island-background-color:
        light-dark(var(--page-background-color-over-light), var(--page-background-color-over-dark));

    --island-border-color:
        light-dark(var(--page-over-border-color-light), var(--page-over-border-color-dark));
}