:root {
    /* Typography */
    --font-family-base: "Enriqueta", serif;
    --font-family-ui: "Inter", "Enriqueta", serif;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 32px;

    --font-size-xs-rem: 0.75rem;
    --font-size-sm-rem: 0.85rem;
    --font-size-md-rem: 0.9rem;
    --font-size-lg-rem: 0.95rem;
    --font-size-xl-rem: 1rem;
    --font-size-2xl-rem: 1.1rem;
    --font-size-3xl-rem: 1.2rem;
    --font-size-4xl-rem: 1.25rem;
    --font-size-5xl-rem: 1.5rem;
    --font-size-6xl-rem: 1.75rem;
    --font-size-7xl-rem: 2rem;
    --font-size-8xl-rem: 2.25rem;
    --font-size-9xl-rem: 2.5rem;
    --font-size-10xl-rem: 3rem;
    --font-size-11xl-rem: 5rem;
    --font-size-12xl-rem: 6rem;
    --font-size-13xl-rem: 15rem;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 550;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    --line-height-sm: 20px;
    --line-height-md: 20.8px;
    --line-height-lg: 23.1px;

    /* Sizing */
    --content-width: 960px;
    --header-height: 80px;
    --header-height-mobile: 94px;
    --header-logo-height: 64px;
    --header-logo-height-mobile: 50px;

    /* Spacing scale */
    --space-0: 0;
    --space-1: 1px;
    --space-2: 2px;
    --space-3: 3px;
    --space-4: 4px;
    --space-5: 5px;
    --space-6: 6px;
    --space-7: 7px;
    --space-8: 8px;
    --space-9: 9px;
    --space-10: 10px;
    --space-11: 12px;
    --space-12: 13px;
    --space-13: 14px;
    --space-14: 15px;
    --space-15: 16px;
    --space-16: 17px;
    --space-17: 18px;
    --space-18: 20px;
    --space-19: 21px;
    --space-20: 22px;
    --space-21: 23px;
    --space-22: 24px;
    --space-23: 25px;
    --space-24: 26px;
    --space-25: 27px;
    --space-26: 28px;
    --space-27: 30px;
    --space-28: 32px;
    --space-29: 34px;
    --space-30: 36px;
    --space-31: 40px;
    --space-32: 44px;
    --space-33: 48px;
    --space-34: 50px;
    --space-35: 56px;
    --space-36: 58px;
    --space-37: 60px;
    --space-38: 64px;
    --space-39: 68px;
    --space-40: 82px;
    --space-41: 84px;
    --space-42: 88px;
    --space-43: 96px;
    --space-44: 100px;
    --space-45: 120px;
    --space-46: 140px;
    --space-47: 144px;
    --space-48: 150px;
    --space-49: 151px;
    --space-50: 181px;
    --space-51: 192px;
    --space-52: 200px;
    --space-53: 240px;
    --space-54: 250px;
    --space-55: 259px;
    --space-56: 280px;
    --space-57: 290px;
    --space-58: 300px;
    --space-59: 316px;
    --space-60: 320px;
    --space-61: 322px;
    --space-62: 350px;
    --space-63: 371px;
    --space-64: 375px;
    --space-65: 389px;
    --space-66: 400px;
    --space-67: 444px;
    --space-68: 480px;
    --space-69: 500px;
    --space-70: 520px;
    --space-71: 576px;
    --space-72: 600px;
    --space-73: 664px;
    --space-74: 720px;
    --space-75: 760px;
    --space-76: 768px;
    --space-77: 800px;
    --space-78: 887px;
    --space-79: 1000px;
    --space-80: 1200px;

    --space-rem-1: 0.25rem;
    --space-rem-2: 0.35rem;
    --space-rem-3: 0.375rem;
    --space-rem-4: 0.4rem;
    --space-rem-5: 0.5rem;
    --space-rem-6: 0.75rem;
    --space-rem-7: 1rem;
    --space-rem-8: 1.5rem;
    --space-rem-9: 2rem;

    /* Radius */
    --radius-xs: 2px;
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 5px;
    --radius-xl: 6px;
    --radius-2xl: 7px;
    --radius-3xl: 8px;
    --radius-4xl: 9px;
    --radius-5xl: 999px;
    --radius-round: 50%;
    --radius-rem-sm: 0.25rem;
    --radius-rem-md: 0.375rem;
    --radius-rem-lg: 0.5rem;
    --radius-rem-xl: 0.75rem;

    /* Borders */
    --border-width-hairline: 0.16px;
    --border-width-thin: 0.18px;
    --border-width-xthin: 0.2px;
    --border-width-light: 0.24px;
    --border-width-soft: 0.32px;
    --border-width-subtle: 0.4px;
    --border-width-subtle-plus: 0.5px;
    --border-width-muted: 0.52px;
    --border-width-medium: 0.56px;
    --border-width-strong: 0.64px;
    --border-width-default: 1px;
    --border-width-lg: 2px;

    /* Color system */
    --color-primary: #702A2A;
    --color-primary-dark: #5a1f1f;
    --color-accent-1: #2a5b70;
    --color-accent-blue: #2196F3;

    --color-bg-page: #ffffff;
    --color-bg-surface: #ffffff;
    --color-bg-surface-muted: #fafafa;
    --color-bg-surface-soft: #f9f9f9;
    --color-bg-surface-subtle: #f5f5f5;
    --color-bg-surface-highlight: #f2f2f2;
    --color-bg-inverse: #292929;
    --color-bg-inverse-hover: #3e3e3e;
    --color-bg-stage-overlay: #ff0000ad;
    --color-bg-toggle-off: #7c0404;
    --color-bg-toggle-on: #066809;

    --color-text-primary: #333;
    --color-text-secondary: #666;
    --color-text-muted: #999;
    --color-text-brand: #73512e;
    --color-text-brand-soft: #da827d;
    --color-text-brand-muted: #d98682;
    --color-text-inverse: #f0f0f0;
    --color-text-on-dark: #ffffff;

    --color-border-default: #ccc;
    --color-border-muted: #ddd;
    --color-border-soft: #e0e0e0;
    --color-border-light: #e1e1e1;

    --color-danger: #f44336;
    --color-danger-dark: #c0392b;
    --color-danger-soft: #ef5350;
    --color-danger-bg: #ffebee;
    --color-danger-border: #ffcdd2;

    --color-success: #4CAF50;
    --color-success-dark: #45a049;
    --color-success-deep: #2e7d32;
    --color-success-bg: #f0f9f0;
    --color-success-border: #c8e6c9;

    --color-warning: #ff9800;
    --color-warning-deep: #d97706;
    --color-warning-bg: #fff3cd;

    --color-info: #1976D2;
    --color-info-bg: #e3f2fd;

    --color-neutral-050: #FEFEFE;
    --color-neutral-075: #FBF9F9;
    --color-neutral-100: #FFF8F3;
    --color-neutral-125: #fff8f8;
    --color-neutral-150: #F6F5F5;
    --color-neutral-175: #F5F2F2;
    --color-neutral-200: #EFE5E4;
    --color-neutral-250: #eceff1;
    --color-neutral-300: #e8f5e9;
    --color-neutral-350: #ecf5e0;
    --color-neutral-400: #e8e8e8;
    --color-neutral-450: #E8D7D7;
    --color-neutral-500: #DFD0CC;
    --color-neutral-550: #d0d0d0;
    --color-neutral-600: #cccccc;
    --color-neutral-650: #bbb;
    --color-neutral-700: #9e9e9e;
    --color-neutral-750: #939393;
    --color-neutral-800: #757575;
    --color-neutral-850: #717171;
    --color-neutral-900: #666666;
    --color-neutral-925: #555555;
    --color-neutral-950: #545454;
    --color-neutral-975: #455a64;
    --color-neutral-980: #333333;
    --color-neutral-990: #2A2A2A;
    --color-neutral-995: #222;
    --color-charcoal-900: #1d1d1d;
    --color-charcoal-950: #161616;

    --color-brand-salmon: #D47772;
    --color-brand-dark: #5a2222;
    --color-brand-soft: #6E4A4A;
    --color-brand-danger: #EB2A2A;

    --color-link-primary: #1a73e8;
    --color-link-dark: #1957bb;
    --color-link-teal: #0f96d9;

    --color-warning-accent: #e67e22;
    --color-warning-accent-dark: #ca6f1e;
    --color-warning-text: #856404;
    --color-warning-danger: #da190b;
    --color-warning-strong: #e74c3c;
    --color-warning-soft: #ff5252;
    --color-warning-highlight: #fff700;
    --color-warning-bg-soft: #fef3e8;

    --color-success-accent: #367e4c;
    --color-success-accent-soft: #3d8b40;
    --color-success-alpha-bg: #e0f5e0;
    --color-info-alpha-bg: #e0f0ff;

    --color-surface-warm: #f5ece8;
    --color-surface-success: #f0f8f0;

    --color-overlay-dark-95: rgba(0, 0, 0, 0.95);
    --color-overlay-dark-90: rgba(33, 33, 33, 0.9);
    --color-overlay-dark-82: rgba(0, 0, 0, 0.822);
    --color-overlay-dark-80: rgba(0, 0, 0, 0.8);
    --color-overlay-dark-70: rgba(0, 0, 0, 0.7);
    --color-overlay-dark-60: rgba(0, 0, 0, 0.6);
    --color-overlay-dark-50: rgba(0, 0, 0, 0.5);
    --color-overlay-dark-45: rgba(0, 0, 0, 0.45);
    --color-overlay-dark-30: rgba(0, 0, 0, 0.3);
    --color-overlay-dark-28: rgba(0, 0, 0, 0.28);
    --color-overlay-dark-25: rgba(0, 0, 0, 0.25);
    --color-overlay-dark-18: rgba(0, 0, 0, 0.18);
    --color-overlay-dark-15: rgba(0, 0, 0, 0.15);
    --color-overlay-dark-10: rgba(0, 0, 0, 0.1);
    --color-overlay-dark-08: rgba(0, 0, 0, 0.08);
    --color-overlay-dark-05: rgba(0, 0, 0, 0.05);
    --color-overlay-dark-03: rgba(0, 0, 0, 0.03);

    --color-primary-alpha-80: rgba(112, 42, 42, 0.80);
    --color-primary-alpha-40: rgba(112, 42, 42, 0.4);
    --color-primary-alpha-30: rgba(112, 42, 42, 0.3);
    --color-primary-alpha-20: rgba(112, 42, 42, 0.2);
    --color-primary-alpha-15: rgba(112, 42, 42, 0.15);
    --color-primary-alpha-10: rgba(112, 42, 42, 0.1);
    --color-primary-alpha-07: rgba(112, 42, 42, 0.07);
    --color-primary-alpha-05: rgba(218, 130, 125, 0.05);
    --color-primary-alpha-00: rgba(218, 130, 125, 0.00);

    --color-white-alpha-90: rgba(255, 255, 255, 0.9);
    --color-white-alpha-18: #ffffff30;

    --color-success-rgba-80: rgba(76, 175, 80, 0.8);
    --color-success-rgba-60: rgba(76, 175, 80, 0.6);
    --color-success-rgba-50: rgba(76, 175, 80, 0.5);
    --color-success-rgba-40: rgba(76, 175, 80, 0.4);
    --color-success-rgba-30: rgba(76, 175, 80, 0.3);
    --color-success-rgba-20: rgba(76, 175, 80, 0.2);
    --color-success-rgba-10: rgba(76, 175, 80, 0.1);
    --color-info-rgba-30: rgba(33, 150, 243, 0.3);
    --color-info-rgba-10: rgba(33, 150, 243, 0.1);
    --color-info-rgba-10-alt: rgba(25, 118, 210, 0.1);
    --color-danger-rgba-40: rgba(244, 67, 54, 0.4);
    --color-warning-rgba-40: rgba(231, 76, 60, 0.4);
    --color-warning-accent-rgba-40: rgba(230, 126, 34, 0.4);
    --color-link-teal-rgba-20: rgba(15, 150, 217, 0.2);
    --color-link-teal-rgba-10: rgba(15, 150, 217, 0.1);
    --color-success-strong-rgba-92: rgba(46, 125, 50, 0.92);
    --color-warning-rgba-95: rgba(245, 124, 0, 0.95);
    --color-danger-strong-rgba-92: rgba(183, 28, 28, 0.92);
    --color-surface-soft-rgba-94: rgba(249, 249, 249, 0.94);

    /* Effects */
    --animation-speed: .3s;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Layers */
    --layer-header: 1000;
    --layer-user-menu: 1000;

    /* Compatibility aliases */
    --header-height-desktop: var(--header-height);
    --color-background-input: var(--color-bg-surface-highlight);
    --system-black: #000;
    --system-white: #FFF;
    --system-success: rgb(36, 121, 36);
    --system-info: #3178C6;
    --system-warning: #b36b00;
    --system-danger: #911b1b;
}

@media screen and (max-width: 1000px) {
    :root {
        --content-width: 760px;
    }
}

@media screen and (max-width: 800px) {
    :root {
        --content-width: 560px;
    }
}

@media screen and (max-width: 600px) {
    :root {
        --content-width: calc(100% - 40px);
    }
}