/*==========================================================================
   OLIVIER SONNET — Design System: The Tectonic Grid
   Utility Classes
   ========================================================================== */

/* --------------------------------------------------------------------------
   PIXEL GRID — Background pattern for decorative grid overlay
   -------------------------------------------------------------------------- */
.ds-pixel-grid {
    background-image:
        linear-gradient(to right, var(--ds-grid-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--ds-grid-color) 1px, transparent 1px);
    background-size: var(--ds-grid-size) var(--ds-grid-size);
}

/* --------------------------------------------------------------------------
   TECTONIC BLOCK — Hard offset shadow (signature elevation style)
   -------------------------------------------------------------------------- */
.ds-block {
    box-shadow: var(--ds-shadow-ds);
}

.ds-block-sm {
    box-shadow: var(--ds-shadow-ds-sm);
}

.ds-block-lg {
    box-shadow: var(--ds-shadow-ds-lg);
}

/* --------------------------------------------------------------------------
   ACCENT TILE — Decorative floating squares (pixel dissolve motif)
   -------------------------------------------------------------------------- */
.ds-accent-tile {
    position: absolute;
    width: var(--ds-grid-size);
    height: var(--ds-grid-size);
    z-index: 0;
    opacity: 0.15;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   GLASSMORPHISM — Frosted glass effect for overlays & navs
   -------------------------------------------------------------------------- */
.ds-glass {
    background: var(--ds-glass-bg);
    backdrop-filter: blur(var(--ds-glass-blur));
    -webkit-backdrop-filter: blur(var(--ds-glass-blur));
}

/* --------------------------------------------------------------------------
   GHOST BORDER — Felt not seen (15% opacity outline-variant)
   -------------------------------------------------------------------------- */
.ds-ghost-border {
    border: var(--ds-border-ghost);
}

/* --------------------------------------------------------------------------
   STRUCTURAL BORDER — Bold border for heavy separation
   -------------------------------------------------------------------------- */
.ds-border-structural {
    border: var(--ds-border-structural);
}

.ds-border-top-accent {
    border-top: var(--ds-border-top-accent);
}

/* --------------------------------------------------------------------------
   TONAL SHIFT — Section separation by background color change
   -------------------------------------------------------------------------- */
.ds-surface-base {
    background-color: var(--ds-surface);
}

.ds-surface-low {
    background-color: var(--ds-surface-container-low);
}

.ds-surface-default {
    background-color: var(--ds-surface-container);
}

.ds-surface-high {
    background-color: var(--ds-surface-container-high);
}

.ds-surface-highest {
    background-color: var(--ds-surface-container-highest);
}

.ds-surface-lowest {
    background-color: var(--ds-surface-container-lowest);
}

/* --------------------------------------------------------------------------
   HEADLINE — Space Grotesk uppercase condensed style
   -------------------------------------------------------------------------- */
.ds-headline {
    font-family: var(--ds-font-headline);
    text-transform: uppercase;
    letter-spacing: var(--ds-tracking-tighter);
    font-weight: var(--ds-weight-black);
}

/* --------------------------------------------------------------------------
   BODY TEXT — Inter readable body
   -------------------------------------------------------------------------- */
.ds-body {
    font-family: var(--ds-font-body);
    font-weight: var(--ds-weight-regular);
    line-height: var(--ds-leading-normal);
}

/* --------------------------------------------------------------------------
   LABEL — Inter uppercase tracking-widest
   -------------------------------------------------------------------------- */
.ds-label {
    font-family: var(--ds-font-label);
    text-transform: uppercase;
    letter-spacing: var(--ds-tracking-widest);
    font-weight: var(--ds-weight-bold);
}

/* --------------------------------------------------------------------------
   PRIMARY BUTTON — Solid primary_container bg, on_primary_container text
   Hover: shifts to secondary_fixed (metallic silver spark)
   -------------------------------------------------------------------------- */
.ds-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ds-primary-container);
    color: var(--ds-on-primary-container);
    font-family: var(--ds-font-headline);
    font-weight: var(--ds-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--ds-tracking-widest);
    padding: var(--ds-space-4) var(--ds-space-6);
    border: none;
    border-radius: var(--ds-radius-none);
    cursor: pointer;
    transition: var(--ds-transition-base);
    text-decoration: none;
}

.ds-btn-primary:hover {
    background-color: var(--ds-secondary-fixed);
    color: var(--ds-on-secondary-fixed);
}

/* --------------------------------------------------------------------------
   SECONDARY BUTTON — Ghost style with outline
   -------------------------------------------------------------------------- */
.ds-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(171, 137, 133, 0.2);
    color: var(--ds-on-surface);
    font-family: var(--ds-font-headline);
    font-weight: var(--ds-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--ds-tracking-widest);
    padding: var(--ds-space-4) var(--ds-space-6);
    border: 1px solid var(--ds-outline);
    border-radius: var(--ds-radius-none);
    cursor: pointer;
    transition: var(--ds-transition-base);
    text-decoration: none;
}

.ds-btn-secondary:hover {
    background-color: var(--ds-surface);
    color: var(--ds-on-surface);
    border-color: var(--ds-surface);
}

/* --------------------------------------------------------------------------
   CONTAINER — Max width constraint
   -------------------------------------------------------------------------- */
.ds-container {
    max-width: var(--ds-container-2xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ds-space-6);
    padding-right: var(--ds-space-6);
}

@media (min-width: 768px) {
    .ds-container {
        padding-left: var(--ds-space-8);
        padding-right: var(--ds-space-8);
    }
}

/* --------------------------------------------------------------------------
   SECTION SPACING
   -------------------------------------------------------------------------- */
.ds-section {
    padding-top: var(--ds-space-24);
    padding-bottom: var(--ds-space-24);
}

@media (min-width: 768px) {
    .ds-section {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

/* --------------------------------------------------------------------------
   MATERIAL SYMBOLS — Variable font settings
   -------------------------------------------------------------------------- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}