name: soft-glass-light
label: Soft Glass Light
summary: Warm frosted glass — oat and amber, soft and calm.
tokens:
  palette:
    bg: "#EFE7D8"
    surface: "#FDF9F1"
    ink: "#3D3226"
    ink_muted: "#8A7A67"
    accent: "#C98A3B"
    accent_alt: "#B2574C"
    rule: "#DCCEB8"
    on_accent: "#0A0A0A"
  surfaces:
    title:
      bg: "#3D3226"
      ink: "#FDF9F1"
      muted: "#C9BBA6"
      accent: "#D9A45C"
    section:
      bg: "#B2574C"
      ink: "#FDF9F1"
      muted: "#F0D8D3"
  dark:
    bg: "#241D14"
    surface: "#332A1E"
    ink: "#F4EDDF"
    ink_muted: "#B0A08B"
    accent: "#C98A3B"
    accent_alt: "#C26357"
    rule: "#4A3E2E"
    on_accent: "#F4EDDF"
  type:
    display:
      family: Fraunces
      weight: 500
      size: 40
      line: 1.1
      tracking: -0.4
    heading:
      family: Fraunces
      weight: 500
      size: 30
      line: 1.15
      tracking: -0.3
    subhead:
      family: Manrope
      weight: 400
      size: 14
      line: 1.5
      tracking: 0
    body:
      family: Manrope
      weight: 400
      size: 12.5
      line: 1.6
      tracking: 0
    caption:
      family: Manrope
      weight: 500
      size: 10
      line: 1.35
      tracking: 0.2
    eyebrow:
      family: Manrope
      weight: 700
      size: 10
      line: 1.2
      tracking: 1.6
      transform: upper
    stat:
      family: Fraunces
      weight: 500
      size: 54
      line: 1
      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.3
    columns: 12
    band:
      eyebrow_y: 0.66
      title_y: 1.36
      body_y: 2.62
  shape:
    radius:
      card: 0.34
      pill: 0.45
      chip: 0.14
    border:
      width: 1
      color: "#FDF9F180"
    card_pad: 0.3
    card_fill:
      color: "#FDF9F1"
      transparency: 44
  shadow:
    card:
      type: outer
      blur: 20
      offset: 5
      angle: 90
      color: 3D3226
      opacity: 0.1
  # Composition — src/composition.js owns the vocabulary; every axis
  # left out here is the shared default.
  layout:
    title:
      composition: centred
    section:
      composition: band
    heading:
      align: centre
      opening: none
    content:
      frame: inset

  plate:
    enabled: true
    # Glass, like glassmorphism — and deliberately not the same glass.
    #
    # Both themes had the same fault: blurred blobs behind a frosted panel, so
    # the frost had nothing to frost and the slide became haze. Both are fixed
    # the same way, by putting something with a hard edge behind the glass.
    #
    # What is behind it differs, or the two are one design in two palettes.
    # Glassmorphism sets circles on a cool ground; this is warm and orthogonal —
    # long rectangular bars at a slight tilt, like light falling through a
    # window onto a table. Same material, different room.
    html: |
      <style>
        .ground{position:absolute;inset:0;
          background:linear-gradient(150deg, {{tokens.palette.bg}} 0%, {{tokens.palette.rule}} 100%);}
        /* Strips that cross the whole frame, entering one edge and leaving the
           other. A bar that stops short reads as an object placed on the
           slide; one that runs the full width reads as light laid across it —
           and, because the panel sits over the middle, the same strip is
           hard-edged out at the margins and soft where it passes behind the
           glass. That one strip being both at once is the material explaining
           itself, which a shape tucked in a corner can never do. */
        .bar{position:absolute;border-radius:5px;transform:rotate(-7deg);}
        .k1{left:-8%;top:12%;width:116%;height:11%;background:{{tokens.palette.accent}};opacity:.3;}
        .k2{left:-8%;bottom:14%;width:116%;height:8%;background:{{tokens.palette.accent_alt}};opacity:.24;}
        .frost{position:absolute;left:{{panel.x}}px;top:{{panel.y}}px;width:{{panel.w}}px;height:{{panel.h}}px;
          border-radius:30px;background:{{tokens.palette.surface}}52;
          backdrop-filter:blur(26px) saturate(120%);-webkit-backdrop-filter:blur(26px) saturate(120%);
          border:1px solid {{tokens.palette.surface}}a6;
          box-shadow:0 16px 48px {{tokens.palette.ink}}26;}
      </style>
      <div class="ground"></div>
      <div class="bar k1"></div><div class="bar k2"></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%);}
          /* The pane covers the left of the frame, so a strip crossing the
             whole width is sharp beside the title and soft behind it — the
             clearest reading of the material this theme gets. */
          .bar{position:absolute;border-radius:5px;transform:rotate(-7deg);}
          .k1{left:-8%;top:16%;width:116%;height:14%;background:{{tokens.palette.accent}};opacity:.5;}
          .k2{left:-8%;bottom:16%;width:116%;height:10%;background:{{tokens.palette.accent_alt}};opacity:.4;}
          /* Glass over the left of the frame, where the title sits: the bars
             stay hard-edged beside it and go soft behind it. */
          .pane{position:absolute;left:0;top:0;width:60%;height:100%;
            background:{{tokens.surfaces.title.bg}}52;
            backdrop-filter:blur(30px) saturate(115%);-webkit-backdrop-filter:blur(30px) saturate(115%);
            border-right:1px solid {{tokens.palette.surface}}2e;}
        </style>
        <div class="ground"></div>
        <div class="bar k1"></div><div class="bar k2"></div>
        <div class="pane"></div>
      section: |
        <style>
          .ground{position:absolute;inset:0;
            background:linear-gradient(152deg, {{tokens.surfaces.section.bg}} 0%, {{tokens.palette.accent_alt}} 100%);}
          .bar{position:absolute;border-radius:5px;transform:rotate(-7deg);}
          .k1{left:-8%;top:12%;width:116%;height:13%;background:{{tokens.palette.surface}};opacity:.24;}
          .k2{left:-8%;bottom:13%;width:116%;height:9%;background:{{tokens.palette.surface}};opacity:.18;}
          .band{position:absolute;left:0;top:24%;width:70%;height:48%;
            border-radius:0 999px 999px 0;
            background:{{tokens.palette.surface}}24;
            backdrop-filter:blur(26px) saturate(115%);-webkit-backdrop-filter:blur(26px) saturate(115%);
            border:1px solid {{tokens.palette.surface}}3d;border-left:none;}
        </style>
        <div class="ground"></div>
        <div class="bar k1"></div><div class="bar k2"></div>
        <div class="band"></div>

voice:
  feel: calm, tactile, warm, crafted
  density: medium
  prefers:
    - soft card breakdowns
    - a gentle confident register
    - short lines that read through frost
  avoid:
    - cold digital language
    - dense paragraphs
    - stark high-contrast design
  headline_style: >
    Warm and specific. "Soft Light, Clear Thinking" over "An Introduction".
    Calm, crafted, unhurried.
  body_style: |
    Gentle full sentences. Say the warm thing, then the true thing.