/* SocialHub design tokens. Central source of truth for color, type, shape,
   elevation and motion — every other stylesheet in this plugin consumes
   these custom properties by name instead of hardcoding values. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/Inter-Variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/PlayfairDisplay-Variable.woff2') format('woff2');
}

:root {
    --shub-bg: #FFFFFF;
    --shub-bg-subtle: #F7FAF9;
    --shub-text: #1A1A1A;
    --shub-text-secondary: #6B7280;
    --shub-accent-start: #4ECDC4;
    --shub-accent-end: #1FA971;
    --shub-accent-gradient: linear-gradient(135deg, var(--shub-accent-start), var(--shub-accent-end));
    --shub-accent-tint: #E8F5F0;
    --shub-accent-text: #157F55;
    --shub-border: #E5E7EB;
    --shub-error: #AD4438;
    --shub-warning: #8F6316;
    --shub-on-accent: #12181A;

    --shub-radius-sm: 8px;
    --shub-radius-md: 12px;
    --shub-radius-lg: 16px;
    --shub-radius-pill: 999px;

    --shub-space-2: 2px;
    --shub-space-4: 4px;
    --shub-space-5: 5px;
    --shub-space-6: 6px;
    --shub-space-8: 8px;
    --shub-space-10: 10px;
    --shub-space-12: 12px;
    --shub-space-16: 16px;
    --shub-space-20: 20px;
    --shub-space-24: 24px;
    --shub-space-32: 32px;
    --shub-space-40: 40px;
    --shub-space-48: 48px;
    --shub-space-64: 64px;

    --shub-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shub-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.04);

    --shub-transition: 180ms ease;

    --shub-font-heading: 'Playfair Display', Georgia, serif;
    --shub-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[data-theme="dark"] {
    --shub-bg: #12181A;
    --shub-bg-subtle: #1A2220;
    --shub-text: #F5F7F6;
    --shub-text-secondary: #9CA6A3;
    --shub-accent-start: #5EE6DB;
    --shub-accent-end: #2BC98A;
    --shub-accent-tint: #16302A;
    --shub-accent-text: #2BC98A;
    --shub-border: #2A3330;
    --shub-error: #E5948A;
    --shub-warning: #E9B44C;
    /* Elevation can't rely on box-shadow against a near-black canvas — a
       black shadow is invisible there. Dark mode expresses elevation via
       --shub-bg-subtle + --shub-border on the card/panel itself instead;
       see .imk-shell-card / .imk-stat-card in app-shell.css and landing.css. */
    --shub-shadow-sm: none;
    --shub-shadow-md: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--shub-font-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--shub-text);
    background: var(--shub-bg);
    transition: background var(--shub-transition), color var(--shub-transition);
}

h1, .imk-h1 {
    font-family: var(--shub-font-heading);
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    margin: 0 0 0.5em;
}

h2, .imk-h2 {
    font-family: var(--shub-font-heading);
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    margin: 0 0 0.5em;
}

@media (min-width: 768px) {
    h1, .imk-h1 { font-size: 48px; line-height: 56px; }
    h2, .imk-h2 { font-size: 32px; line-height: 40px; }
}

h3, .imk-h3 {
    font-family: var(--shub-font-body);
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    margin: 0 0 0.5em;
}

small, .imk-small {
    font-size: 14px;
    line-height: 20px;
}

.imk-data-figure {
    font-family: var(--shub-font-body);
    font-weight: 600;
    font-size: 28px;
    line-height: 32px;
}

.imk-eyebrow {
    display: block;
    font-family: var(--shub-font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--shub-accent-text);
    margin-bottom: 0.75em;
}

/* Visually hides text while keeping it in the accessibility tree, so an
   icon-plus-count control's visible number gets a spoken label instead of
   being announced as a bare digit. Standard clip-based hiding technique
   (matches WordPress core's own .screen-reader-text). */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--shub-accent-end);
    outline-offset: 2px;
}

/* fill-mode is `backwards`, not `both` -- `forwards`/`both` would leave the
   `to` keyframe's `transform: translateY(0)` permanently applied after the
   animation ends. Even though that's a visual no-op (0 offset), ANY
   non-`none` transform on an ancestor creates a new containing block for
   `position: fixed` descendants (e.g. .imk-feed-report-modal), breaking
   their viewport-relative positioning site-wide. `backwards` still applies
   the `from` keyframe during any future animation-delay (avoiding a flash
   of unstyled content before the reveal starts) but releases the property
   back to the normal cascade (transform: none) once the animation ends. */
.imk-reveal {
    animation: imk-reveal 400ms ease-out backwards;
}

@keyframes imk-reveal {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .imk-reveal {
        animation: none;
    }
}