@import url("https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;700&family=Roboto:wght@400;700&display=swap");
:root {
    /* Brand — yellow/gold theme */
    --brand-primary: #C9A227;
    --brand-primary-dark: #8B6914;
    --brand-primary-deep: #7A5E10;
    --brand-primary-light: #DDB830;
    --brand-primary-soft: #F5EDD4;
    --brand-primary-bg: #FBF6E8;
    --brand-gradient: linear-gradient(120deg, #DDB830, #8B6914);
    --brand-gradient-soft: linear-gradient(135deg, #FBF6E8, #FFF9EE);
    --brand-gradient-accent: linear-gradient(90deg, #C9A227 0%, #DDB830 50%, #C9A227 100%);
    --brand-shadow: rgba(201, 162, 39, 0.35);
    --brand-shadow-soft: rgba(201, 162, 39, 0.12);
    --brand-hover-bg: #FBF6E8;
    --brand-hover-border: #EDE0B8;

    /* Primary colors */
    --color-primary: #F5EDD4;
    --color-secondary: #FBF6E8;
    --color-dark: #1a1a1a;
    --color-accent: #C9A227;

    /* --linear-gradient */
    --linear-gradient: linear-gradient(
        to top,
        rgba(201, 162, 39, 0.75),
        rgba(14, 13, 13, 0.411)
    );

    /* Background colors */
    --background-default: #f8f8f8;
    --background-light: #ffffff;
    --background-dark: #1a1a1a;

    /* Text colors */
    --text-color-light: #ffffff;
    --text-color-dark: #1a1a2e;
    --text-color-2: #8B6914;
    --text-muted: #666666;

    /* Borders */
    --border-color: #e8eaef;
    --border-radius: 4px;

    /* hover  */
    --hover: #FBF6E8;
    --active-color: #C9A227;
    --disabled-color: #d3d3d3;

    /* Shadows */
    --box-shadow-default: 0 2px 4px rgba(0, 0, 0, 0.1);
    --box-shadow-hover: 0 4px 8px rgba(201, 162, 39, 0.15);

    /* Transitions */
    --transition-default: 0.3s ease;

    /* Font family */
    --font-family: "Google Sans", Roboto, Arial, sans-serif;
}