/*
Theme Name: Tomasz Photography
Theme URI: https://tomasznosowski.pl
Author: Tomasz Nosowski
Author URI: https://tomasznosowski.pl
Description: A dark, editorial photography portfolio theme for concert and portrait photography. Featuring a warm charcoal and orange palette.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: Private
Text Domain: tomasz-photography
Tags: photography, portfolio, dark, one-column, two-columns, custom-menu, featured-images, full-width-template, translation-ready
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — Design Tokens
   ============================================================ */
:root {
    /* Colors */
    --color-background:                #131313;
    --color-surface:                   #131313;
    --color-surface-dim:               #131313;
    --color-surface-container-lowest:  #0e0e0e;
    --color-surface-container-low:     #1c1b1b;
    --color-surface-container:         #201f1f;
    --color-surface-container-high:    #2a2a2a;
    --color-surface-container-highest: #353534;
    --color-surface-variant:           #353534;
    --color-surface-bright:            #393939;

    --color-primary:                   #ffb59d;
    --color-primary-fixed:             #ffdbd0;
    --color-primary-fixed-dim:         #ffb59d;
    --color-primary-container:         #f95d23;
    --color-on-primary:                #5d1800;
    --color-on-primary-container:      #521400;
    --color-on-primary-fixed:          #390b00;
    --color-on-primary-fixed-variant:  #842600;
    --color-inverse-primary:           #ac3400;

    --color-secondary:                 #e6c270;
    --color-secondary-container:       #634a00;
    --color-secondary-fixed:           #ffdf9a;
    --color-secondary-fixed-dim:       #e6c270;
    --color-on-secondary:              #3f2e00;
    --color-on-secondary-container:    #debb6a;
    --color-on-secondary-fixed:        #251a00;
    --color-on-secondary-fixed-variant:#5a4300;

    --color-tertiary:                  #e8bdb1;
    --color-tertiary-container:        #af887d;
    --color-tertiary-fixed:            #ffdbd1;
    --color-tertiary-fixed-dim:        #e8bdb1;
    --color-on-tertiary:               #452922;
    --color-on-tertiary-container:     #3d231c;
    --color-on-tertiary-fixed:         #2d150e;
    --color-on-tertiary-fixed-variant: #5e3f37;

    --color-on-surface:                #e5e2e1;
    --color-on-surface-variant:        #e3bfb4;
    --color-on-background:             #e5e2e1;
    --color-outline:                   #aa8a80;
    --color-outline-variant:           #5a4139;
    --color-inverse-surface:           #e5e2e1;
    --color-inverse-on-surface:        #313030;

    --color-error:                     #ffb4ab;
    --color-error-container:           #93000a;
    --color-on-error:                  #690005;
    --color-on-error-container:        #ffdad6;

    --color-accent-orange:             #f1571d;

    /* Typography */
    --font-headline: 'Epilogue', sans-serif;
    --font-body:     'Manrope', sans-serif;
    --font-label:    'Space Grotesk', sans-serif;

    /* Spacing */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --space-40: 10rem;

    /* Border Radius */
    --radius-sm:   0.125rem;
    --radius-md:   0.25rem;
    --radius-lg:   0.5rem;
    --radius-full: 0.75rem;

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-base:   300ms ease;
    --transition-slow:   500ms ease;
    --transition-slower: 700ms ease;

    /* Shadows */
    --shadow-editorial: 0 64px 64px -12px rgba(255, 181, 157, 0.06);
    --shadow-glow:       0 0 120px rgba(249, 93, 35, 0.1);

    /* Layout */
    --max-width-content: 80rem;    /* 1280px */
    --max-width-wide:    96rem;    /* 1536px */
    --header-height:     88px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-background);
    color: var(--color-on-background);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background-color: var(--color-primary-container);
    color: var(--color-on-primary);
}

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

a {
    color: inherit;
    text-decoration: none;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

ul, ol {
    list-style: none;
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.font-headline { font-family: var(--font-headline); }
.font-body     { font-family: var(--font-body); }
.font-label    { font-family: var(--font-label); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
    line-height: 1.1;
    font-weight: 800;
    color: var(--color-on-surface);
}

.label-overline {
    font-family: var(--font-label);
    font-size: 0.625rem;    /* 10px */
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--color-secondary);
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--max-width-content);
    margin-inline: auto;
    padding-inline: var(--space-8);
}

.container--wide {
    max-width: var(--max-width-wide);
}

/* ============================================================
   SKIP LINK (accessibility)
   ============================================================ */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    background: var(--color-primary-container);
    color: var(--color-on-primary);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    z-index: 9999;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-4);
}

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

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-8);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition:
        filter var(--transition-base),
        transform var(--transition-fast),
        background-color var(--transition-base);
    border-radius: var(--radius-sm);
    border: none;
    line-height: 1;
}

.btn:active {
    transform: scale(0.95);
}

.btn--primary {
    background-color: var(--color-primary-container);
    color: var(--color-on-primary);
}

.btn--primary:hover {
    filter: brightness(1.1);
}

.btn--outline {
    background-color: transparent;
    color: var(--color-secondary);
    border: 1px solid rgba(90, 65, 57, 0.3);
}

.btn--outline:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ============================================================
   EDITORIAL SHADOW UTILITY
   ============================================================ */
.editorial-shadow {
    box-shadow: var(--shadow-editorial);
}