/**
 * PickleHub Base Theme - Foundation tokens and global reset.
 */

:root {
    --ph-bg: #f4f9fc;
    --ph-bg-soft: #eef7fb;
    --ph-surface: rgba(255, 255, 255, 0.82);
    --ph-surface-strong: #ffffff;
    --ph-primary: #0b5f7a;
    --ph-primary-dark: #071d33;
    --ph-primary-soft: #e7f5fa;
    --ph-accent: #1fc7a6;
    --ph-accent-soft: #dcfaf3;
    --ph-warning: #b86b00;
    --ph-warning-soft: #fff4df;
    --ph-danger: #b42318;
    --ph-danger-soft: #fff1f0;
    --ph-success: #067647;
    --ph-success-soft: #ecfdf3;
    --ph-text: #102033;
    --ph-muted: #667085;
    --ph-border: rgba(15, 35, 55, 0.12);
    --ph-border-strong: rgba(15, 35, 55, 0.18);
    --ph-radius-sm: 10px;
    --ph-radius-md: 16px;
    --ph-radius-lg: 24px;
    --ph-radius-xl: 32px;
    --ph-shadow-card: 0 18px 45px rgba(15, 35, 55, 0.08);
    --ph-shadow-lift: 0 24px 60px rgba(15, 35, 55, 0.14);
    --ph-glass-blur: blur(18px);
    --ph-container: min(1180px, calc(100vw - 32px));
    --ph-wide: min(1440px, calc(100vw - 32px));
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(31, 199, 166, 0.16), transparent 32rem),
        radial-gradient(circle at top right, rgba(11, 95, 122, 0.13), transparent 34rem),
        var(--ph-bg);
    color: var(--ph-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--ph-primary);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

a:hover,
a:focus {
    color: var(--ph-primary-dark);
}

:where(.wp-site-blocks) {
    min-height: 100vh;
}

:where(.wp-site-blocks) > main {
    margin-top: 0;
}

:where(.alignwide) {
    max-width: var(--ph-wide);
}

:where(.wp-block-group.alignwide),
:where(.wp-block-group.alignfull > .wp-block-group__inner-container) {
    margin-left: auto;
    margin-right: auto;
}

::selection {
    background: var(--ph-accent);
    color: var(--ph-primary-dark);
}