# Glassmorphism — frosted glass panels over blurred colour.
#
# The background is a real plate: translucent coloured blobs blurred behind a
# frosted content panel. Native cards sit on top as a second layer of glass
# (see tokens.shape.card_fill — translucent white), so the blur genuinely
# shows through every panel. Text stays native pptxgenjs.

name: glassmorphism
label: Glassmorphism
summary: Frosted glass panels over blurred colour — translucent, airy, modern.

tokens:
  palette:
    bg: "#E9EEF6"          # calm pale slate
    surface: "#FFFFFF"     # the frost tone
    ink: "#1E2A3A"         # deep slate
    ink_muted: "#5B6B80"
    accent: "#6C5CE7"      # violet
    accent_alt: "#00CEC9"  # teal
    rule: "#D4DEEE"
    on_accent: "#FFFFFF"

  surfaces:
    title:   { bg: "#1E2A3A", ink: "#FFFFFF", muted: "#B9C5D6", accent: "#00CEC9" }
    section: { bg: "#6C5CE7", ink: "#FFFFFF", muted: "#DCD6FF" }

  dark:
    bg: "#141A24"
    surface: "#232E3E"
    ink: "#E7EDF5"
    ink_muted: "#9AA9BC"
    accent: "#8B7CF0"
    accent_alt: "#35D6D2"
    rule: "#FFFFFF1A"
    on_accent: "#FFFFFF"

  type:
    display:  { family: "Space Grotesk", weight: 700, size: 38, line: 1.1,  tracking: -0.5 }
    heading:  { family: "Space Grotesk", weight: 600, size: 29, line: 1.15, tracking: -0.3 }
    subhead:  { family: Inter,           weight: 500, size: 15, line: 1.4,  tracking: 0 }
    body:     { family: Inter,           weight: 400, size: 13, line: 1.55, tracking: 0 }
    caption:  { family: Inter,           weight: 500, size: 10, line: 1.35, tracking: 0.2 }
    eyebrow:  { family: Inter,           weight: 600, size: 10, line: 1.2,  tracking: 1.2, transform: upper }
    stat:     { family: "Space Grotesk", weight: 700, size: 52, line: 1.0,  tracking: -1 }

  grid:
    # A little wider than a flat theme: the content box is the inside of the
    # plate's panel, which the renderer draws past it on every side, and the
    # ground behind has to stay visible. Only a little — `flow`'s vertical
    # spine stops fitting its body above the readable floor past about 0.76in,
    # so this is the widest step that costs no theme a slide.
    margin: { top: 0.66, right: 0.74, bottom: 0.58, left: 0.74 }
    gutter: 0.30
    columns: 12
    band: { eyebrow_y: 0.62, title_y: 1.30, body_y: 2.55 }

  shape:
    radius: { card: 0.30, pill: 0.40, chip: 0.12 }
    border: { width: 1, color: "#FFFFFF80" }   # frosted edge, not a hard rule
    card_pad: 0.30
    # The native panels are the second glass layer over the plate's frost.
    card_fill: { color: "#FFFFFF", transparency: 42 }

  shadow:
    card: { type: outer, blur: 16, offset: 4, angle: 90, color: "1E2A3A", opacity: 0.12 }

  # Composition — src/composition.js owns the vocabulary; every axis
  # left out here is the shared default.
  layout:
    title:
      composition: centred
    section:
      composition: centred
    heading:
      opening: bar

  plate:
    enabled: true
    # The blur belongs to the glass, not to the background.
    #
    # This used to paint three blobs at 64px blur over stacked radial
    # gradients, and then put a frosted panel on top. Frosting a blur leaves
    # nothing to frost: the whole slide became fog, which is both why it read as
    # "glow" and why it was indistinguishable from the other soft themes.
    #
    # The shapes behind the glass are now crisp — hard-edged circles and bars in
    # the accent colours, no filter on any of them. The only blur in the theme
    # is the panel's own backdrop-filter, so a shape is sharp where it crosses
    # the ground and soft where it passes behind the panel. That edge, visible
    # in the same image, is what the material actually looks like.
    html: |
      <style>
        .ground{position:absolute;inset:0;
          background:linear-gradient(155deg, {{tokens.palette.bg}} 0%, {{tokens.palette.rule}} 100%);}
        .sh{position:absolute;}
        /* Two shapes, each straddling an edge of the panel so the same circle is
           sharp on the ground and soft through the glass. Kept faint: at full
           strength they read as objects dropped on the slide and compete with
           the content. A tint the ground shifts into still shows the sharp/soft
           edge, which is the only thing they are there to do. Both stay clear
           of the top-right corner, which belongs to the crest. */
        .c1{left:-7%;top:22%;width:26%;height:46%;border-radius:50%;
          background:{{tokens.palette.accent}};opacity:.24;}
        .c2{right:9%;bottom:-16%;width:23%;height:40%;border-radius:50%;
          background:{{tokens.palette.accent_alt}};opacity:.22;}
        .frost{position:absolute;left:{{panel.x}}px;top:{{panel.y}}px;width:{{panel.w}}px;height:{{panel.h}}px;
          border-radius:26px;background:{{tokens.palette.surface}}52;
          backdrop-filter:blur(26px) saturate(140%);-webkit-backdrop-filter:blur(26px) saturate(140%);
          border:1px solid {{tokens.palette.surface}}a6;
          box-shadow:0 16px 48px {{tokens.palette.ink}}26;}
      </style>
      <div class="ground"></div>
      <div class="sh c1"></div><div class="sh c2"></div>
      <div class="frost"></div>
    surfaces:
      title: |
        <style>
          .ground{position:absolute;inset:0;
            background:linear-gradient(155deg, {{tokens.surfaces.title.bg}} 0%, {{tokens.palette.ink}} 100%);}
          .sh{position:absolute;}
          .c1{right:-5%;bottom:-18%;width:28%;height:52%;border-radius:50%;
            background:{{tokens.palette.accent}};opacity:.42;}
          .c2{right:22%;top:14%;width:16%;height:28%;border-radius:50%;
            background:{{tokens.palette.accent_alt}};opacity:.34;}
          /* A full-height pane of glass over the left third, where the title
             sits — the shapes go soft behind it and stay sharp beside it. */
          .pane{position:absolute;left:0;top:0;width:62%;height:100%;
            background:{{tokens.surfaces.title.bg}}59;
            backdrop-filter:blur(30px) saturate(130%);-webkit-backdrop-filter:blur(30px) saturate(130%);
            border-right:1px solid {{tokens.palette.surface}}2e;}
        </style>
        <div class="ground"></div>
        <div class="sh c1"></div><div class="sh c2"></div>
        <div class="pane"></div>
      section: |
        <style>
          .ground{position:absolute;inset:0;
            background:linear-gradient(150deg, {{tokens.surfaces.section.bg}} 0%, {{tokens.palette.ink}} 130%);}
          .sh{position:absolute;}
          .c1{right:8%;bottom:-24%;width:30%;height:56%;border-radius:50%;
            background:{{tokens.palette.accent_alt}};opacity:.34;}
          .c2{left:52%;top:-18%;width:18%;height:34%;border-radius:50%;
            background:{{tokens.palette.surface}};opacity:.14;}
          /* The band runs off the left edge and is rounded on the right, so it
             reads as a pane the section title rests on rather than a stripe. */
          .band{position:absolute;left:0;top:24%;width:72%;height:48%;
            border-radius:0 999px 999px 0;
            background:{{tokens.palette.surface}}24;
            backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);
            border:1px solid {{tokens.palette.surface}}3d;border-left:none;}
        </style>
        <div class="ground"></div>
        <div class="sh c1"></div><div class="sh c2"></div>
        <div class="band"></div>

voice:
  feel: airy, modern, translucent, premium software
  density: medium
  prefers:
    - card-based breakdowns
    - concise, punchy headlines
    - short body text that reads well over frost
  avoid:
    - dense paragraphs
    - more than four cards on one slide
    - low-contrast text on busy colour
  headline_style: >
    Short and direct. Seven words or fewer when you can. "Rendering, Frosted
    Glass, One Pipeline" over "An Introduction to the Rendering Pipeline".
  body_style: >
    Full sentences, but trim. Lead with the claim. No filler, no throat-clearing.