/*
Theme Name: Studio Pierrot Child
Theme URI: https://studio-pierrot.mayart.info
Description: Child-Theme basierend auf dem Stitch-Design für Studio Pierrot
Author: MayArt
Author URI: https://mayart.info
Template: twentytwentyfive
Version: 1.0.0
Text Domain: studio-pierrot-child
*/

/* ===== Stitch Design System: "The Tactile Minimalist" ===== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* CSS Custom Properties from Stitch Design Tokens */
:root {
    /* Primary */
    --sp-primary: #675a4a;
    --sp-primary-container: #817261;
    --sp-on-primary: #ffffff;
    --sp-on-primary-container: #fffbff;
    --sp-primary-fixed: #f3dfcb;
    --sp-primary-fixed-dim: #d6c4b0;

    /* Secondary */
    --sp-secondary: #5e5e5e;
    --sp-secondary-container: #e2e2e2;
    --sp-on-secondary: #ffffff;

    /* Tertiary */
    --sp-tertiary: #5b5c5c;
    --sp-tertiary-container: #747575;

    /* Surface */
    --sp-surface: #f9f9f9;
    --sp-surface-container: #eeeeee;
    --sp-surface-container-low: #f3f3f3;
    --sp-surface-container-high: #e8e8e8;
    --sp-surface-container-highest: #e2e2e2;
    --sp-surface-container-lowest: #ffffff;
    --sp-on-surface: #1a1c1c;
    --sp-on-surface-variant: #4d463e;

    /* Outline */
    --sp-outline: #7e766d;
    --sp-outline-variant: #d0c5bb;

    /* Error */
    --sp-error: #ba1a1a;

    /* Inverse */
    --sp-inverse-surface: #2f3131;
    --sp-inverse-on-surface: #f1f1f1;
    --sp-inverse-primary: #d6c4b0;

    /* Typography */
    --sp-font-headline: 'Manrope', sans-serif;
    --sp-font-body: 'Inter', sans-serif;
}

/* ===== Base Styles ===== */
body {
    font-family: var(--sp-font-body);
    background-color: var(--sp-surface);
    color: var(--sp-on-surface);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sp-font-headline);
}

/* ===== Editorial Shadow (from Stitch) ===== */
.editorial-shadow {
    box-shadow: 0 30px 60px -12px rgba(26, 28, 28, 0.08),
                0 18px 36px -18px rgba(26, 28, 28, 0.1);
}

/* ===== WordPress Block Overrides ===== */

/* Buttons */
.wp-block-button__link,
.wp-element-button {
    background-color: var(--sp-primary) !important;
    color: var(--sp-on-primary) !important;
    font-family: var(--sp-font-headline);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 0.75rem;
    padding: 0.8em 2em;
    transition: opacity 0.5s;
    border: none;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
    opacity: 0.7;
}

/* Navigation / Header */
.wp-block-navigation a {
    font-family: var(--sp-font-headline);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--sp-on-surface-variant);
    transition: color 0.5s;
}

.wp-block-navigation a:hover {
    color: var(--sp-on-surface);
}

/* Site Title */
.wp-block-site-title a {
    font-family: var(--sp-font-headline);
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sp-on-surface) !important;
    text-decoration: none;
}

/* Headings */
.wp-block-heading {
    font-family: var(--sp-font-headline);
    font-weight: 300;
    letter-spacing: -0.01em;
    color: var(--sp-on-surface);
}

h1.wp-block-heading {
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

h2.wp-block-heading {
    font-size: clamp(2rem, 5vw, 3.75rem);
}

/* Paragraphs */
.wp-block-paragraph {
    font-family: var(--sp-font-body);
    color: var(--sp-on-surface-variant);
    line-height: 1.8;
}

/* Cover Block */
.wp-block-cover {
    min-height: 80vh !important;
}

.wp-block-cover .wp-block-cover__inner-container {
    text-align: center;
}

/* Group backgrounds */
.has-background {
    border: none !important;
}

/* Image blocks */
.wp-block-image img {
    border-radius: 0.5rem;
}

.wp-block-image.editorial-shadow img {
    box-shadow: 0 30px 60px -12px rgba(26, 28, 28, 0.08),
                0 18px 36px -18px rgba(26, 28, 28, 0.1);
}

/* Columns */
.wp-block-columns {
    gap: 3rem;
}

/* Separator */
.wp-block-separator {
    border-color: var(--sp-outline-variant);
    opacity: 0.3;
}

/* Footer */
footer {
    background-color: var(--sp-surface-container-low);
    border-top: 1px solid var(--sp-outline-variant);
}

footer a {
    font-family: var(--sp-font-body);
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* ===== Custom Utility Classes ===== */
.sp-section-light {
    background-color: var(--sp-surface);
    padding: 6rem 0;
}

.sp-section-alt {
    background-color: var(--sp-surface-container-low);
    padding: 6rem 0;
}

.sp-section-dark {
    background-color: var(--sp-inverse-surface);
    color: var(--sp-inverse-on-surface);
    padding: 6rem 0;
}

.sp-label {
    font-family: var(--sp-font-headline);
    font-size: 0.75rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--sp-outline);
}

.sp-accent-line {
    width: 4rem;
    height: 1px;
    background-color: var(--sp-primary);
    display: inline-block;
}

/* ===== Glassmorphism (Stitch Design System) ===== */
.sp-glass {
    background: rgba(249, 249, 249, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ===== Selection ===== */
::selection {
    background-color: var(--sp-primary-fixed);
    color: var(--sp-on-surface);
}

/* ===== Smooth Scrolling ===== */
html {
    scroll-behavior: smooth;
}