/*
|--------------------------------------------------------------------------
| File: assets/css/base.css
|--------------------------------------------------------------------------
| Purpose:
| Core reset, root variables, color system, spacing scale, and utility
| foundations for the luxury yacht media concierge platform.
|
| This file should stay generic and reusable.
| Page-specific styling belongs elsewhere.
|--------------------------------------------------------------------------
*/

/* ==========================================================================
   1. Root design tokens
   ========================================================================== */

:root {
    --color-bg: #07131f;
    --color-bg-deep: #040c14;
    --color-surface: #0d1d2d;
    --color-surface-soft: #15283b;
    --color-surface-elevated: rgba(13, 29, 45, 0.9);
    --color-border: rgba(226, 215, 197, 0.12);
    --color-border-strong: rgba(226, 215, 197, 0.24);

    --color-text: #f5f1e8;
    --color-text-soft: #d8d0c3;
    --color-text-muted: #b4aa9c;
    --color-text-inverse: #07131f;

    --color-accent: #c8a46a;
    --color-accent-soft: #e1c38f;
    --color-accent-deep: #9b7a45;

    --color-success: #7ab89a;
    --color-danger: #cf8d8d;
    --color-warning: #d2b06e;

    --color-body-top: #07131f;
    --color-body-bottom: #040c14;
    --color-body-glow: rgba(200, 164, 106, 0.08);
    --color-backdrop-highlight: rgba(245, 241, 232, 0.03);

    --shadow-soft: 0 12px 40px rgba(1, 6, 12, 0.34);
    --shadow-deep: 0 24px 80px rgba(1, 6, 12, 0.52);

    --radius-xs: 0.35rem;
    --radius-sm: 0.6rem;
    --radius-md: 1rem;
    --radius-lg: 1.4rem;
    --radius-xl: 2rem;
    --radius-pill: 999px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --container-xs: 42rem;
    --container-sm: 56rem;
    --container-md: 72rem;
    --container-lg: 84rem;
    --container-xl: 96rem;

    --transition-fast: 0.18s ease;
    --transition-base: 0.28s ease;
}

/* ==========================================================================
   2. Luxury light theme overrides
   ========================================================================== */

html[data-theme="light"] {
    --color-bg: #f6f1e8;
    --color-bg-deep: #efe7da;
    --color-surface: #fffaf3;
    --color-surface-soft: #f5ede1;
    --color-surface-elevated: rgba(255, 250, 243, 0.94);
    --color-border: rgba(34, 42, 52, 0.1);
    --color-border-strong: rgba(34, 42, 52, 0.18);

    --color-text: #142334;
    --color-text-soft: #3d4a58;
    --color-text-muted: #7d776f;
    --color-text-inverse: #fbf7f0;

    --color-accent: #b38a4b;
    --color-accent-soft: #c7a368;
    --color-accent-deep: #8d6935;

    --color-success: #668c76;
    --color-danger: #b77474;
    --color-warning: #b89052;

    --color-body-top: #f6f1e8;
    --color-body-bottom: #ebe3d7;
    --color-body-glow: rgba(179, 138, 75, 0.1);
    --color-backdrop-highlight: rgba(20, 35, 52, 0.04);

    --shadow-soft: 0 12px 36px rgba(34, 42, 52, 0.08);
    --shadow-deep: 0 24px 70px rgba(34, 42, 52, 0.12);
}

/* ==========================================================================
   3. Reset and document defaults
   ========================================================================== */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    background:
        radial-gradient(circle at top, var(--color-body-glow), transparent 28%),
        linear-gradient(180deg, var(--color-body-top) 0%, var(--color-body-bottom) 100%);
    color: var(--color-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition:
        background var(--transition-base),
        color var(--transition-base);
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

picture {
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
    transition:
        color var(--transition-fast),
        opacity var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-soft);
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

p,
figure,
blockquote {
    margin: 0;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 0;
}

/* ==========================================================================
   4. Selection and focus states
   ========================================================================== */

::selection {
    background: rgba(200, 164, 106, 0.24);
    color: var(--color-text);
}

:focus-visible {
    outline: 2px solid rgba(200, 164, 106, 0.85);
    outline-offset: 3px;
}

/* ==========================================================================
   5. Shared utility classes
   ========================================================================== */

.is-hidden {
    display: none !important;
}

.text-soft {
    color: var(--color-text-soft);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-accent {
    color: var(--color-accent-soft);
}

.bg-surface {
    background: var(--color-surface);
}

.bg-surface-soft {
    background: var(--color-surface-soft);
}

.border-soft {
    border: 1px solid var(--color-border);
}

.shadow-soft {
    box-shadow: var(--shadow-soft);
}

.shadow-deep {
    box-shadow: var(--shadow-deep);
}

.radius-md {
    border-radius: var(--radius-md);
}

.radius-lg {
    border-radius: var(--radius-lg);
}

.radius-xl {
    border-radius: var(--radius-xl);
}

.centered {
    text-align: center;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ==========================================================================
   6. Shared structural helpers
   ========================================================================== */

.site-backdrop {
    position: relative;
    isolation: isolate;
}

.site-backdrop::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.01), transparent 40%),
        radial-gradient(circle at 15% 10%, var(--color-body-glow), transparent 18%),
        radial-gradient(circle at 85% 0%, var(--color-backdrop-highlight), transparent 22%);
    z-index: -1;
}