/*
Theme Name: Tomasz Photography
Theme URI: https://tomaszn.pl
Author: Tomasz Nowak
Author URI: https://tomaszn.pl
Description: A dark, editorial photography portfolio theme for concert and portrait photography. Featuring a warm charcoal and orange palette.
Version: 2.3.1
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 v3 (--tn-* unified)
   Źródło prawdy: handoff-claude-code/tokens.css
   ============================================================ */
:root {
    /* ── TN Brand Tokens (canonical) ────────────────────────── */
    --tn-orange:      #F36437;
    --tn-orange-ink:  #C44E24;
    --tn-graphite:    #2C2E35;
    --tn-graphite-2:  #454852;
    --tn-white:       #FFFFFF;

    /* ── Dark surfaces (stage mode — świadoma decyzja) ───────── */
    --tn-bg:          #0C0C0E;
    --tn-surface:     #16171B;
    --tn-surface-2:   #1E2028;
    --tn-border:      #2A2C34;
    --tn-muted:       #888A96;

    /* ── Status ──────────────────────────────────────────────── */
    --tn-ok:  #2F7D4F;
    --tn-err: #B23B1A;

    /* ── Typography ──────────────────────────────────────────── */
    --tn-grotesk: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --tn-body:    "Figtree", -apple-system, BlinkMacSystemFont, sans-serif;
    --tn-mono:    "Space Mono", ui-monospace, monospace;

    /* ── Border radius ───────────────────────────────────────── */
    --tn-r-sm: 4px;
    --tn-r-md: 8px;
    --tn-r-lg: 14px;

    /* ── Theme-specific (nie w canonical tokens.css) ─────────── */
    --tn-orange-soft: rgba(243, 100, 55, 0.14);

    /* ── Theme surface aliases (bez --tn-* equiv) ────────────── */
    --surface-3:  #202024;
    --footer-bg:  #0A0A0A;
    --line:       rgba(255, 255, 255, 0.09);
    --line-2:     rgba(255, 255, 255, 0.14);
    --text:       rgba(245, 243, 238, 0.84);
    --heading:    #FFFFFF;
    --meta:       #9A9A9A;
    --meta-dim:   #6E6E6E;

    /* ── Backward-compat: short aliases → --tn-* ────────────── */
    --orange:        var(--tn-orange);
    --orange-ink:    var(--tn-orange-ink);
    --orange-soft:   var(--tn-orange-soft);
    --graphite:      var(--tn-graphite);
    --white:         var(--tn-white);
    --bg:            var(--tn-bg);
    --surface:       var(--tn-surface);
    --surface-2:     var(--tn-surface-2);
    --font-headline: var(--tn-grotesk);
    --font-body:     var(--tn-body);
    --font-label:    var(--tn-mono);

    /* ── Backward-compat: border radius → --tn-* ────────────── */
    --radius-sm:   var(--tn-r-sm);
    --radius-md:   var(--tn-r-md);
    --radius-lg:   var(--tn-r-lg);
    --radius-full: 100px;

    /* ── Backward-compat: Material3 color aliases → --tn-* ───── */
    --color-background:                var(--tn-bg);
    --color-surface:                   var(--tn-surface);
    --color-surface-dim:               var(--tn-surface);
    --color-surface-container-lowest:  var(--footer-bg);
    --color-surface-container-low:     var(--tn-surface);
    --color-surface-container:         var(--tn-surface-2);
    --color-surface-container-high:    var(--surface-3);
    --color-surface-container-highest: #202024;
    --color-surface-variant:           var(--surface-3);
    --color-surface-bright:            #252529;
    --color-primary:                   var(--tn-orange);
    --color-primary-fixed:             var(--tn-orange-soft);
    --color-primary-fixed-dim:         var(--tn-orange);
    --color-primary-container:         var(--tn-orange);
    --color-on-primary:                #FFFFFF;
    --color-on-primary-container:      #FFFFFF;
    --color-inverse-primary:           var(--tn-orange-ink);
    --color-secondary:                 var(--meta);
    --color-secondary-container:       var(--tn-surface-2);
    --color-on-secondary:              #FFFFFF;
    --color-on-secondary-container:    var(--meta);
    --color-on-surface:                var(--text);
    --color-on-surface-variant:        var(--meta);
    --color-on-background:             var(--text);
    --color-outline:                   rgba(255, 255, 255, 0.2);
    --color-outline-variant:           var(--line);
    --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:             var(--tn-orange-ink);

    /* ── 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;

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

    /* ── Shadows (używają wartości --tn-orange) ───────────────── */
    --shadow-editorial: 0 64px 64px -12px rgba(243, 100, 55, 0.06);
    --shadow-glow:      0 0 120px rgba(243, 100, 55, 0.10);

    /* ── Layout ──────────────────────────────────────────────── */
    --max-width-content: 80rem;
    --max-width-wide:    96rem;
    --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(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::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(--heading);
    text-transform: none;
    letter-spacing: -0.02em;
}

.heading-accent,
.site-header__name-accent { color: var(--heading); }

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

/* ============================================================
   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(--orange);
    color: #fff;
}

.btn--primary:hover {
    background-color: var(--orange-ink);
    filter: none;
}

.btn--outline {
    background-color: transparent;
    color: var(--text);
    border: 1px solid var(--line-2);
}

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

/* ── Focus visible — accessibility ──────────────────────── */
:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}

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