/*
 * Base
 * Palette (blue = links/focus, green = primary actions), reset, typography, container and utility classes. Every other file reads the variables defined here.
 */

/*
 * vpbodrum public theme.
 * Palette: black, white, gray, blue (links / focus) and green (primary actions).
 */
:root {
    --black: #0b0d10;
    --ink: #1a1d21;
    --panel: #26292d;
    --white: #ffffff;
    --gray-50: #f6f7f8;
    --gray-100: #eceef0;
    --gray-200: #dcdfe3;
    --gray-300: #c2c7cd;
    --gray-500: #7b838c;
    --gray-700: #454b52;
    --blue: #1d4ed8;
    --blue-dark: #1e3fae;
    --green: #16a34a;
    --green-dark: #15803d;
    --red: #dc2626;
    --navy: #1f3a5f;
    --shadow: 0 10px 30px rgba(11, 13, 16, .18);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Corners */
    --radius-sm: 4px;
    --radius: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-pill: 999px;
    --radius-round: 50%;

    /*
     * Semantic colours: what a component means by a colour, not which palette entry it is. Other
     * files use these (text, surface, border, on-dark), so a new theme starts by changing them here.
     */
    --color-text: var(--ink);
    --color-text-muted: var(--gray-500);
    --color-surface: var(--white);
    --color-surface-alt: var(--gray-50);
    --color-border: var(--gray-200);
    --color-on-dark: var(--white);
    --color-link: var(--blue);
    --color-link-hover: var(--blue-dark);
    --color-media-bg: #000;
    --gradient-brand: linear-gradient(135deg, var(--black), var(--navy) 60%, var(--blue));

    /* Status and brand colours used by single components */
    --color-whatsapp: #25d366;
    --color-whatsapp-hover: #1ebe5b;
    --color-star: #f59e0b;
    --color-warning-bg: #fef3c7;
    --color-warning-text: #92400e;
    --color-warning-accent: #d97706;
    --color-notice-bg: #fff7ed;
    --color-notice-text: #9a3412;
    --color-danger-bg: #fee2e2;
    --color-danger-text: #991b1b;
    --color-danger-soft: #fca5a5;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-surface);
    -webkit-font-smoothing: antialiased;
}

body.nav-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--color-text-muted); }
.icon { flex: 0 0 auto; }