/* ============================================================================
   PostPilot — "Sunset Studio" design tokens · porcelain glass edition
   Premium light theme: white frosted-glass panels floating over a soft pastel
   sunset aurora. Coral→amber stays the brand accent; ink text for clarity.
   Fonts: Clash Display (display) + Satoshi (body), self-hosted.
   Everything downstream reads these CSS variables, so the whole app reskins here.
   ============================================================================ */

/* ---- Self-hosted type (Fontshare ITF license permits self-hosting) ---- */
@font-face {
    font-family: "Clash Display";
    src: url("../fonts/ClashDisplay-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "Clash Display";
    src: url("../fonts/ClashDisplay-Semibold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "Clash Display";
    src: url("../fonts/ClashDisplay-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Black.woff2") format("woff2");
    font-weight: 900;
    font-display: swap;
    font-style: normal;
}

/* Single light theme — declared for both selectors so it wins regardless of
   where data-bs-theme lands. */
:root,
[data-bs-theme="light"] {
    /* ---- Type ---- */
    --pp-font-display: "Clash Display", "Satoshi", "Segoe UI", system-ui, sans-serif;
    --pp-font-body: "Satoshi", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;

    /* ---- Brand (sunset) ---- */
    --pp-primary: #ff5b46;
    --pp-primary-rgb: 255, 91, 70;
    --pp-primary-hover: #f0402a;
    --pp-primary-soft: rgba(255, 91, 70, 0.1);
    --pp-accent: #ff9f1c;          /* amber */
    --pp-accent-rgb: 255, 159, 28;
    --pp-accent-2: #10b5a0;        /* teal counterpoint */
    --pp-accent-2-rgb: 16, 181, 160;

    /* signature gradients */
    --pp-gradient: linear-gradient(120deg, #ff5b46 0%, #ff8a3d 52%, #ffb020 100%);
    --pp-gradient-soft: linear-gradient(120deg, rgba(255, 91, 70, 0.12), rgba(255, 176, 32, 0.12));
    --pp-gradient-cool: linear-gradient(120deg, #ff5b46, #ff3d7f);
    /* text-clip variant tuned for white backgrounds (deeper tail for legibility) */
    --pp-gradient-text: linear-gradient(105deg, #ff4d36 0%, #f97316 55%, #e8930c 100%);

    /* ---- Layout metrics ---- */
    --pp-sidebar-width: 264px;
    --pp-sidebar-collapsed: 78px;
    --pp-topbar-height: 66px;

    /* ---- Porcelain neutrals ---- */
    --pp-canvas-deep: #f3eff9;                 /* hero / auth backdrops (pastel) */
    --pp-body-bg: #f6f4fa;
    --pp-surface: #ffffff;
    --pp-surface-2: #f7f5fb;
    --pp-surface-3: #efecf6;                   /* hover/raised layer */
    --pp-surface-glass: rgba(255, 255, 255, 0.66);
    --pp-border: #e7e2f0;
    --pp-border-strong: #d6cfe4;
    --pp-text: #241d33;
    --pp-text-muted: #6f6887;
    --pp-heading: #170f26;

    /* white glass system */
    --pp-glass-bg: rgba(255, 255, 255, 0.62);
    --pp-glass-border: rgba(255, 255, 255, 0.78);
    --pp-glass-highlight: rgba(255, 255, 255, 0.95);  /* top-edge light catch */
    --pp-glass-blur: 22px;

    /* sidebar: white glass console */
    --pp-sidebar-bg: rgba(255, 255, 255, 0.6);
    --pp-sidebar-text: #4c445f;
    --pp-sidebar-muted: #9a92ad;
    --pp-sidebar-active: #ffffff;

    /* ---- Shadows / glow (soft violet-tinted, light-theme depth) ---- */
    --pp-shadow-xs: 0 1px 2px rgba(43, 26, 84, 0.05);
    --pp-shadow-sm: 0 3px 12px -2px rgba(43, 26, 84, 0.08);
    --pp-shadow: 0 18px 44px -16px rgba(43, 26, 84, 0.16);
    --pp-shadow-lg: 0 34px 80px -24px rgba(43, 26, 84, 0.22);
    --pp-glow: 0 10px 30px -6px rgba(var(--pp-primary-rgb), 0.4);
    --pp-glow-soft: 0 8px 22px -8px rgba(var(--pp-primary-rgb), 0.3);
    --pp-glow-teal: 0 8px 30px -8px rgba(var(--pp-accent-2-rgb), 0.32);

    /* accessible focus ring */
    --pp-ring: 0 0 0 3px rgba(var(--pp-primary-rgb), 0.28);

    /* ---- Radii ---- */
    --pp-radius-xs: 8px;
    --pp-radius-sm: 11px;
    --pp-radius: 16px;
    --pp-radius-lg: 22px;
    --pp-radius-pill: 999px;

    /* ---- Motion ---- */
    --pp-ease: cubic-bezier(0.22, 1, 0.36, 1);           /* smooth ease-out */
    --pp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */
    --pp-dur-1: 0.16s;
    --pp-dur-2: 0.28s;
    --pp-dur-3: 0.5s;
    --pp-dur-4: 0.9s;                                    /* hero-scale moves */

    /* ---- Bootstrap bridge ---- */
    --bs-body-bg: var(--pp-body-bg);
    --bs-body-color: var(--pp-text);
    --bs-emphasis-color: var(--pp-heading);
    --bs-secondary-color: var(--pp-text-muted);
    --bs-border-color: var(--pp-border);
    --bs-border-color-translucent: rgba(23, 15, 38, 0.08);
    --bs-secondary-bg: var(--pp-surface-2);
    --bs-tertiary-bg: var(--pp-surface-2);
    --bs-heading-color: var(--pp-heading);

    color-scheme: light;
}

/* ============================================================================
   Dark theme — "Sunset Studio · obsidian glass". Same brand coral→amber→teal,
   neutrals flipped to deep ink; glass panels become translucent dark with the
   same blur. Only the tokens that change are overridden — everything else
   (type, radii, motion, layout metrics, gradients) is inherited from :root.
   Toggled by site.js via data-bs-theme on <html> (persisted as 'pp-theme').
   ============================================================================ */
[data-bs-theme="dark"] {
    /* ---- Ink neutrals ---- */
    --pp-canvas-deep: #0f1220;                 /* hero / auth backdrops */
    --pp-body-bg: #121527;
    --pp-surface: #1a1e33;
    --pp-surface-2: #20253f;
    --pp-surface-3: #272d4b;                   /* hover/raised layer */
    --pp-surface-glass: rgba(26, 30, 51, 0.66);
    --pp-border: #2b3050;
    --pp-border-strong: #3d4368;
    --pp-text: #d9d6e8;
    --pp-text-muted: #9b94b4;
    --pp-heading: #f4f2fc;

    /* dark glass system (same blur, translucent ink panels) */
    --pp-glass-bg: rgba(26, 30, 51, 0.55);
    --pp-glass-border: rgba(255, 255, 255, 0.09);
    --pp-glass-highlight: rgba(255, 255, 255, 0.07);  /* top-edge light catch */

    /* sidebar: obsidian glass console */
    --pp-sidebar-bg: rgba(15, 18, 32, 0.6);
    --pp-sidebar-text: #aca6c4;
    --pp-sidebar-muted: #6f6a8a;
    --pp-sidebar-active: #1a1e33;

    /* text-clip gradient brightened for dark backgrounds */
    --pp-gradient-text: linear-gradient(105deg, #ff6a52 0%, #ff9a3d 55%, #ffb84d 100%);

    /* ---- Shadows / glow (deeper on ink) ---- */
    --pp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --pp-shadow-sm: 0 3px 12px -2px rgba(0, 0, 0, 0.45);
    --pp-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.6);
    --pp-shadow-lg: 0 34px 80px -24px rgba(0, 0, 0, 0.7);

    /* focus ring pops a little harder against ink */
    --pp-ring: 0 0 0 3px rgba(var(--pp-primary-rgb), 0.4);

    /* ---- Bootstrap bridge (values that don't flow through --pp tokens) ---- */
    --bs-border-color-translucent: rgba(255, 255, 255, 0.09);

    color-scheme: dark;
}

/* ---- Map Bootstrap to the brand ---- */
:root {
    --bs-primary: var(--pp-primary);
    --bs-primary-rgb: var(--pp-primary-rgb);
    --bs-link-color: #ee4630;
    --bs-link-color-rgb: 238, 70, 48;
    --bs-link-hover-color: #c93317;
    --bs-border-radius: var(--pp-radius-sm);
    --bs-body-font-family: var(--pp-font-body);
}

.btn-primary {
    --bs-btn-bg: var(--pp-primary);
    --bs-btn-border-color: var(--pp-primary);
    --bs-btn-hover-bg: var(--pp-primary-hover);
    --bs-btn-hover-border-color: var(--pp-primary-hover);
    --bs-btn-active-bg: var(--pp-primary-hover);
    --bs-btn-active-border-color: var(--pp-primary-hover);
    --bs-btn-disabled-bg: var(--pp-primary);
    --bs-btn-disabled-border-color: var(--pp-primary);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: #ee4630;
    --bs-btn-border-color: rgba(var(--pp-primary-rgb), 0.5);
    --bs-btn-hover-bg: var(--pp-primary);
    --bs-btn-hover-border-color: var(--pp-primary);
    --bs-btn-active-bg: var(--pp-primary);
    --bs-btn-hover-color: #fff;
}

.text-primary { color: #ee4630 !important; }
.bg-primary { background-color: var(--pp-primary) !important; }
.link-primary { color: #ee4630 !important; }

/* Base typography hook (full rules live in site.css) */
:root { --bs-body-font-family: var(--pp-font-body); }