# Art Deco theme — codeless .bnp manifest (WO-WZ-021 Phase B).
# Synthesized into manifest.pb by `ninja plugin build` (no plugin.wasm).
theme_presets: presets.json
bundled_fonts: fonts.json
master_pages: master_pages.json

system_templates:
  - key: art-deco
    title: Art Deco
    description: "Luxury Art Deco theme with champagne gold gradients, jet black, ivory and geometric fan motifs for hotels, fine dining, weddings and jewellers."

page_templates:
  - system: art-deco
    key: default
    title: Default
    description: "Centered symmetric layout with gold rule header and footer."
    slots: [header, main, footer]
  - system: art-deco
    key: landing
    title: Marquee Landing
    description: "Wide hero with sunburst overlay, reservation strip, CTA."
    slots: [marquee, main, cta, footer]
  - system: art-deco
    key: article
    title: Editorial
    description: "Narrow editorial column for press, menus and stories."
    slots: [header, main, aside, footer]
  - system: art-deco
    key: full-width
    title: Grand Ballroom
    description: "Edge-to-edge gallery layout for venues and lookbooks."
    slots: [header, main, footer]
  - system: art-deco
    key: blog-index
    title: Editorial Index
    description: "Blog index with gilded masthead, featured and post-grid slots."
    slots: [header, featured, main, footer]
  - system: art-deco
    key: contact
    title: Reservations
    description: "Contact layout with optional aside for hours and location."
    slots: [header, main, aside, footer]
  - system: art-deco
    key: auth
    title: Members
    description: "Centred auth shell with wordmark and sunburst crest."
    slots: [main, footer]

template_overrides:
  # Chrome
  - { template: art-deco, block: navbar }
  - { template: art-deco, block: footer }
  - { template: art-deco, block: utility-bar }
  - { template: art-deco, block: announcement-bar }
  # Marketing
  - { template: art-deco, block: hero }
  - { template: art-deco, block: feature-grid }
  - { template: art-deco, block: rich-section }
  - { template: art-deco, block: stats }
  - { template: art-deco, block: testimonial }
  - { template: art-deco, block: logo-strip }
  - { template: art-deco, block: pricing }
  - { template: art-deco, block: team }
  - { template: art-deco, block: faq }
  - { template: art-deco, block: timeline }
  - { template: art-deco, block: cta }
  - { template: art-deco, block: countdown }
  # Primitives
  - { template: art-deco, block: heading }
  - { template: art-deco, block: text }
  - { template: art-deco, block: rich-text }
  - { template: art-deco, block: image }
  - { template: art-deco, block: quote }
  - { template: art-deco, block: divider }
  - { template: art-deco, block: button }
  - { template: art-deco, block: card }
  - { template: art-deco, block: gallery }
  - { template: art-deco, block: video-embed }
  - { template: art-deco, block: audio-embed }
  # Commerce / local
  - { template: art-deco, block: menu-list }
  - { template: art-deco, block: event-list }
  - { template: art-deco, block: contact-form }
  - { template: art-deco, block: contact-card }
  - { template: art-deco, block: hours-location }
  - { template: art-deco, block: social-links }
  # Blog family
  - { template: art-deco, block: blog-hero }
  - { template: art-deco, block: featured-posts }
  - { template: art-deco, block: related-posts }
  - { template: art-deco, block: popular-posts }
  - { template: art-deco, block: category-list }
  - { template: art-deco, block: post-hero }
  - { template: art-deco, block: post-metadata }
  - { template: art-deco, block: author-bio }
  - { template: art-deco, block: author-bio-hero }
  - { template: art-deco, block: newsletter-signup }
  - { template: art-deco, block: breadcrumbs }
  - { template: art-deco, block: sidebar-nav }
  # Auth surface
  - { template: art-deco, block: auth-form }
  - { template: art-deco, block: password-reset-form }
  - { template: art-deco, block: auth-status }
  # System
  - { template: art-deco, block: page-suggestions }

email_wrappers:
  - art-deco

css:
  input_css_append: |
    /* Art Deco theme — utility CSS for foil, frames, fans and grain.
     *
     * Color is always consumed via hsl(var(--token)) — the tokens carry HSL triples.
     * Font families always come from var(--font-heading|body|mono, <fallback>).
     */

    @layer utilities {
        /* deco-rule — hairline gold rule, 1px ascending to 2px on accent lines. */
        .deco-rule {
            border: none;
            border-top: 1px solid hsl(var(--primary));
            margin: 0;
        }
        .deco-rule-thick {
            border: none;
            border-top: 2px solid hsl(var(--primary));
            margin: 0;
        }

        /* deco-frame — stepped ziggurat frame, layered borders + clipped corners. */
        .deco-frame {
            position: relative;
            border: 1px solid hsl(var(--primary));
            padding: 1.25rem;
        }
        .deco-frame::before,
        .deco-frame::after {
            content: "";
            position: absolute;
            left: -6px;
            right: -6px;
            height: 4px;
            background: hsl(var(--primary));
            opacity: 0.85;
        }
        .deco-frame::before { top: -6px; }
        .deco-frame::after  { bottom: -6px; }

        /* deco-step — stepped corner mask suitable for image frames. */
        .deco-step {
            position: relative;
            padding: 4px;
            background:
                linear-gradient(hsl(var(--primary)), hsl(var(--primary))) top    left  / 14px 1px no-repeat,
                linear-gradient(hsl(var(--primary)), hsl(var(--primary))) top    left  / 1px 14px no-repeat,
                linear-gradient(hsl(var(--primary)), hsl(var(--primary))) top    right / 14px 1px no-repeat,
                linear-gradient(hsl(var(--primary)), hsl(var(--primary))) top    right / 1px 14px no-repeat,
                linear-gradient(hsl(var(--primary)), hsl(var(--primary))) bottom left  / 14px 1px no-repeat,
                linear-gradient(hsl(var(--primary)), hsl(var(--primary))) bottom left  / 1px 14px no-repeat,
                linear-gradient(hsl(var(--primary)), hsl(var(--primary))) bottom right / 14px 1px no-repeat,
                linear-gradient(hsl(var(--primary)), hsl(var(--primary))) bottom right / 1px 14px no-repeat;
        }
        .deco-step > * {
            display: block;
            width: 100%;
            height: 100%;
        }

        /* deco-grain — 3% film-grain noise, dark surfaces only. */
        .deco-grain {
            position: relative;
            isolation: isolate;
        }
        .deco-grain::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            opacity: 0.03;
            background-image:
                repeating-radial-gradient(circle at 17% 23%, hsl(var(--foreground)) 0 1px, transparent 1px 3px),
                repeating-radial-gradient(circle at 73% 61%, hsl(var(--foreground)) 0 1px, transparent 1px 3px);
            mix-blend-mode: overlay;
        }

        /* deco-foil — inset gold "stamp" shadow used on hover states. */
        .deco-foil {
            box-shadow:
                inset 0 0 0 1px hsl(var(--primary)),
                inset 0 1px 0 hsl(var(--primary) / 0.6),
                inset 0 -1px 0 hsl(var(--primary) / 0.3);
        }

        /* deco-sunburst — conic-gradient sunburst rays. Used by divider_fan & marquee_hero. */
        .deco-sunburst {
            background-image:
                conic-gradient(
                    from 180deg at 50% 100%,
                    transparent 0deg,
                    hsl(var(--primary) / 0.7) 5deg,
                    transparent 10deg,
                    transparent 20deg,
                    hsl(var(--primary) / 0.55) 25deg,
                    transparent 30deg,
                    transparent 40deg,
                    hsl(var(--primary) / 0.7) 45deg,
                    transparent 50deg,
                    transparent 60deg,
                    hsl(var(--primary) / 0.55) 65deg,
                    transparent 70deg,
                    transparent 80deg,
                    hsl(var(--primary) / 0.7) 85deg,
                    transparent 90deg,
                    transparent 100deg,
                    hsl(var(--primary) / 0.55) 105deg,
                    transparent 110deg,
                    transparent 120deg,
                    hsl(var(--primary) / 0.7) 125deg,
                    transparent 130deg,
                    transparent 140deg,
                    hsl(var(--primary) / 0.55) 145deg,
                    transparent 150deg,
                    transparent 160deg,
                    hsl(var(--primary) / 0.7) 165deg,
                    transparent 170deg,
                    transparent 180deg
                );
        }

        /* deco-scallop — scalloped fan crest via radial gradient. */
        .deco-scallop {
            background-image:
                radial-gradient(circle at 50% 100%, hsl(var(--primary) / 0.7) 0 2px, transparent 3px),
                repeating-linear-gradient(
                    to right,
                    transparent 0,
                    transparent 12px,
                    hsl(var(--primary) / 0.55) 12px,
                    hsl(var(--primary) / 0.55) 13px,
                    transparent 13px,
                    transparent 24px
                );
        }

        /* deco-ziggurat — stepped ziggurat divider stripes. */
        .deco-ziggurat {
            background-image:
                linear-gradient(to bottom, transparent 0 30%, hsl(var(--primary)) 30% 32%, transparent 32% 50%, hsl(var(--primary)) 50% 52%, transparent 52% 70%, hsl(var(--primary)) 70% 72%, transparent 72% 100%);
        }

        /* deco-caps — caps tracking helper for Italiana display headings. */
        .deco-caps {
            text-transform: uppercase;
            letter-spacing: 0.18em;
        }

        /* deco-dropcap — classical italic dropcap on first paragraph. */
        .deco-dropcap[data-deco-dropcap]::first-letter {
            font-family: var(--font-body, "Cormorant Garamond", "Cormorant", Georgia, serif);
            font-style: italic;
            font-size: 3.2em;
            line-height: 0.95;
            float: left;
            padding: 0.05em 0.12em 0 0;
            color: hsl(var(--primary));
        }

        /* deco-underline — hairline gold underline on headings. */
        .deco-underline {
            position: relative;
            padding-bottom: 0.35em;
        }
        .deco-underline::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1px;
            background: hsl(var(--primary));
        }

        /* deco-pill — black pill button base for the button override. */
        .deco-pill {
            border-radius: 9999px;
            border-width: 1px;
            border-style: solid;
            border-color: hsl(var(--primary));
            background-color: hsl(var(--foreground));
            color: hsl(var(--background));
            padding: 0.65rem 1.6rem;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            font-size: 0.85rem;
            transition: box-shadow 200ms ease, background-color 200ms ease;
        }
        .deco-pill:hover,
        .deco-pill:focus-visible {
            box-shadow:
                inset 0 0 0 1px hsl(var(--primary)),
                inset 0 1px 0 hsl(var(--primary) / 0.6),
                inset 0 -1px 0 hsl(var(--primary) / 0.4);
        }
        .deco-pill:focus-visible {
            outline: 2px solid hsl(var(--ring));
            outline-offset: 3px;
        }

        /* deco-link — gold underline link state. */
        .deco-link {
            color: hsl(var(--primary));
            text-decoration: none;
            border-bottom: 1px solid hsl(var(--primary));
            transition: color 200ms ease, border-color 200ms ease;
        }
        .deco-link:hover,
        .deco-link:focus-visible {
            color: hsl(var(--accent));
            border-bottom-color: hsl(var(--accent));
        }
    }
