:root {
    /* =========================
       COLORS (RESTAURANT STYLE)
    ========================= */
    --lune-bg: #f6f3ef;
    --lune-surface: rgba(255, 255, 255, 0.85);
    --lune-surface-solid: #ffffff;

    --lune-text: #1a1a1a;
    --lune-text-soft: #6b6b6b;

    --lune-border: rgba(0, 0, 0, 0.08);

    /* 🎨 BRAND */
    --lune-primary: #c9a96e;   /* gold */
    --lune-secondary: #8b0000; /* deep red */
    --lune-accent: #111111;

    /* SHADOW / UI */
    --lune-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    --lune-radius: 18px;

    /* LAYOUT */
    --lune-container: 1240px;
    --lune-header-height: 84px;

    /* UX */
    --lune-transition: 240ms ease;
}

/* =========================
   DARK MODE (RESTAURANT NIGHT)
========================= */
html[data-theme='dark'] {
    --lune-bg: #0b0b0b;
    --lune-surface: rgba(18, 18, 18, 0.85);
    --lune-surface-solid: #121212;

    --lune-text: #f5f5f5;
    --lune-text-soft: #a1a1a1;

    --lune-border: rgba(255, 255, 255, 0.08);

    --lune-primary: #e6c48f;
    --lune-secondary: #b22222;
    --lune-accent: #ffffff;

    --lune-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

/* =========================
   RESET
========================= */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* =========================
   BODY
========================= */
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    color: var(--lune-text);

    background:
        radial-gradient(circle at top left, rgba(201, 169, 110, 0.12), transparent 30%),
        radial-gradient(circle at top right, rgba(139, 0, 0, 0.08), transparent 25%),
        var(--lune-bg);

    transition:
        background var(--lune-transition),
        color var(--lune-transition);
}

/* =========================
   TYPOGRAPHY
========================= */
h1, h2, h3, h4 {
    font-weight: 600;
    letter-spacing: -0.02em;
}

p {
    color: var(--lune-text-soft);
    line-height: 1.6;
}

/* =========================
   LINKS
========================= */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--lune-transition);
}

a:hover {
    color: var(--lune-primary);
}

/* =========================
   IMAGES
========================= */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =========================
   CODE (optional)
========================= */
code {
    background: rgba(127, 127, 127, 0.12);
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    font-size: 0.9em;
}

/* =========================
   CONTAINER
========================= */
.lune-container {
    width: min(calc(100% - 2rem), var(--lune-container));
    margin-inline: auto;
}

/* =========================
   BUTTON BASE (IMPORTANT 🔥)
========================= */
.lune-btn {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 30px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--lune-transition);
}

/* PRIMARY */
.lune-btn-primary {
    background: var(--lune-primary);
    color: #000;
}

.lune-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--lune-shadow);
}

/* SECONDARY */
.lune-btn-secondary {
    border: 1px solid var(--lune-border);
    color: var(--lune-text);
}

.lune-btn-secondary:hover {
    background: var(--lune-primary);
    color: #000;
}

/* =========================
   CARD / SURFACE
========================= */
.lune-card {
    background: var(--lune-surface);
    backdrop-filter: blur(10px);
    border-radius: var(--lune-radius);
    box-shadow: var(--lune-shadow);
    border: 1px solid var(--lune-border);
}

/* =========================
   UTILITIES
========================= */
.text-center {
    text-align: center;
}

.mt-40 {
    margin-top: 40px;
}