/*
 * Profile layout themes - token definitions.
 *
 * Themes override a subset of these via a <style> block generated by
 * engine/function/profile_themes.php.
 *
 * IMPORTANT: these defaults are scoped to .profile-themed, NOT to plain
 * #site_content. Widget CSS references tokens as `var(--pt-x, ORIGINAL)`, and
 * a declared value always beats a var() fallback. Declaring the defaults
 * unconditionally would therefore replace each element's original colour with
 * the generic token value on every profile, themed or not. Scoping them here
 * means an unthemed profile resolves every var() to its own original value and
 * renders exactly as it did before this system existed.
 *
 * The values below are the palette a theme starts from: any token a theme does
 * not set falls back to these rather than to the per-element original.
 *
 * Token reference lives in vc14/data/util/profile_themes.md
 */

#site_content.profile-themed {
    /* Frame (the bordered area wrapping the whole profile) */
    --pt-frame-bg: transparent;
    --pt-frame-border: transparent;
    --pt-frame-border-width: 2px;
    --pt-frame-image: none;
    --pt-frame-radius: 12px;
    --pt-frame-padding: 15px;

    /* Widget surfaces */
    --pt-widget-bg: rgba(0, 0, 0, 0.15);
    --pt-widget-header-bg: rgba(0, 0, 0, 0.2);
    --pt-widget-radius: 12px;
    --pt-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Smaller elevations: badge/trophy tiles and avatar circles. Kept separate
       from --pt-shadow so theming a widget does not thicken every small card. */
    --pt-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04);
    --pt-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1);

    /* Inner panels (stat tiles, catch cards, balance rows) */
    --pt-item-bg: rgba(0, 0, 0, 0.1);
    --pt-item-bg-hover: rgba(0, 0, 0, 0.15);
    --pt-item-radius: 8px;

    /* Light surfaces (accordion headers, table headers) */
    --pt-surface-light: #f5f5f5;
    /* Backing plate behind sprites: trainer picture, badge circles, guild logo.
       Separate from --pt-text so a light theme can darken text without turning
       those plates dark under the artwork sitting on them. */
    --pt-surface-plate: #fff;

    /* Dividers */
    --pt-divider: rgba(255, 255, 255, 0.1);
    /* Hover partner for --pt-divider. Distinct so hover feedback survives. */
    --pt-divider-strong: rgba(255, 255, 255, 0.15);
    --pt-divider-soft: rgba(255, 255, 255, 0.05);
    --pt-divider-light: #eee;
    --pt-input-border: #ddd;

    /* Text */
    --pt-text: #fff;
    --pt-text-muted: #999;
    --pt-text-muted-alt: #aaa;
    --pt-text-dim: #666;
    /* No --pt-text-dark: the surfaces that used to carry dark body text (the
       comment body, the jQuery accordion panels) become dark once a theme is
       applied, so those rules use --pt-text and keep their original dark value
       as the var() fallback for unthemed profiles. */
    --pt-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    --pt-text-shadow-strong: 0 2px 4px rgba(0, 0, 0, 0.3);

    /* Links */
    --pt-link: #fff;
    --pt-link-hover: #fff;
    --pt-link-glow: 0 0 8px rgba(255, 255, 255, 0.5);

    /* Accent (buttons, calls to action) */
    --pt-accent: #4CAF50;
    --pt-accent-hover: #45a049;
    --pt-accent-text: #fff;

    /* Typography */
    --pt-font-heading: inherit;
    --pt-font-body: inherit;
    --pt-heading-size: 1.2em;
    --pt-heading-transform: uppercase;
    --pt-heading-spacing: 1px;

    /* Widget header icons */
    --pt-icon-default: none;
    --pt-icon-size: 20px;
    --pt-icon-gap: 10px;
}

/* ------------------------------------------------------------------ */
/* Frame                                                               */
/* ------------------------------------------------------------------ */

/*
 * Box model check. The stock #site_content is 1000px wide (content-box, the
 * site has no global box-sizing reset) with padding 15px 0 40px 0, and holds
 * two floats: .content at 700px and .sidebar at 240px (210 + 28 padding + 2
 * border), so 940px of float has to fit.
 *
 * border-box here keeps the outer width at 1000px while we add 15px of side
 * padding and a 2px border, leaving 1000 - 30 - 4 = 966px of inner width.
 * 940 fits with 26px to spare, so the frame never reflows the columns.
 *
 * The 40px bottom padding is kept so vertical rhythm matches an unthemed page.
 */
#site_content.profile-themed {
    box-sizing: border-box;
    padding: var(--pt-frame-padding) var(--pt-frame-padding) 40px;
    background-color: var(--pt-frame-bg);
    background-image: var(--pt-frame-image);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    border: var(--pt-frame-border-width) solid var(--pt-frame-border);
    border-radius: var(--pt-frame-radius);
}

/* ------------------------------------------------------------------ */
/* Typography                                                          */
/* ------------------------------------------------------------------ */

#site_content.profile-themed .profile-widget {
    font-family: var(--pt-font-body);
    border-radius: var(--pt-widget-radius);
}

/* Corner rounding of the inner tiles, so a theme can go sharp or soft. */
#site_content.profile-themed .basic-info-item,
#site_content.profile-themed .balance-item,
#site_content.profile-themed .house-stat,
#site_content.profile-themed .catch-card {
    border-radius: var(--pt-item-radius);
}

#site_content.profile-themed .profile-widget h3 {
    font-family: var(--pt-font-heading);
    font-size: var(--pt-heading-size);
    text-transform: var(--pt-heading-transform);
    letter-spacing: var(--pt-heading-spacing);
}

/* ------------------------------------------------------------------ */
/* Widget header icons                                                 */
/* ------------------------------------------------------------------ */

/*
 * Gated behind .pt-icons so themes that ship no artwork never reserve an
 * empty box before the title. Per-widget background-image overrides are
 * emitted by profile_theme_render(), keyed on the widget's DOM id.
 */
#site_content.pt-icons .profile-widget h3::before {
    content: "";
    display: inline-block;
    width: var(--pt-icon-size, 20px);
    height: var(--pt-icon-size, 20px);
    margin-right: var(--pt-icon-gap, 10px);
    vertical-align: -0.15em;
    background-image: var(--pt-icon-default, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}