name: claymorphism
label: Claymorphism
summary: Soft extruded clay panels with inner shadows — warm, rounded, playful.
tokens:
  palette:
    bg: "#F4EBDE"
    surface: "#EFD8C0"
    ink: "#463B30"
    ink_muted: "#8B7B68"
    accent: "#E07A5F"
    accent_alt: "#F2CC8F"
    rule: "#E7D6BE"
    on_accent: "#0A0A0A"
  # The pebbles' clay, pre-blended toward the ground.
  #
  # At full accent strength they read as bright markers stuck onto the slide
  # rather than as more of the same material. Lowering their opacity is the
  # wrong lever — a pebble's whole shape comes from its shadows and inner rim,
  # and opacity fades those with it, flattening the object into a stain. So the
  # colour is mixed toward the background instead: still clay, still lit, just
  # not shouting.
  clay:
    pebble_a: "#ECBCA9"   # accent, 42% into the ground
    pebble_b: "#F3DCB6"   # accent_alt, 50% into the ground
    pebble_on_section: "#EAA779"

  surfaces:
    # Clay is a light material. A dark brown title surface under two accent
    # glows read as mud, and contradicted every other slide in the deck.
    title:
      bg: "#F6E3D3"
      ink: "#463B30"
      muted: "#746555"   # the team and guide lines are caption size; 3.3:1 was not enough
      accent: "#D6634A"
    # White on the accent terracotta measured 2.95:1 — a divider headline just
    # under the large-text floor, and its standfirst well under. Deepened until
    # the mark carries; the hue is the same clay.
    section:
      bg: "#B1604B"
      ink: "#FFFFFF"
      muted: "#F6DED6"
  dark:
    bg: "#2A2118"
    surface: "#3D3225"
    ink: "#F2E8D8"
    ink_muted: "#B3A286"
    accent: "#E07A5F"
    accent_alt: "#E8BC82"
    rule: "#FFFFFF1A"
    on_accent: "#FFFFFF"
  type:
    display:
      family: Poppins
      weight: 700
      size: 36
      line: 1.12
      tracking: -0.4
    heading:
      family: Poppins
      weight: 600
      size: 28
      line: 1.18
      tracking: -0.2
    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: Poppins
      weight: 700
      size: 52
      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.62
      title_y: 1.3
      body_y: 2.55
  shape:
    radius:
      card: 0.55
      pill: 0.4
      chip: 0.14
    border:
      width: 0
      color: "#00000000"
    card_pad: 0.3
    card_fill:
      color: "#EFD8C0"
      transparency: 18
  shadow:
    card:
      type: outer
      blur: 20
      offset: 7
      angle: 90
      color: 463B30
      opacity: 0.16
  # Composition — src/composition.js owns the vocabulary; every axis
  # left out here is the shared default.
  layout:
    title:
      composition: centred
    section:
      composition: centred
    heading:
      align: centre

  plate:
    enabled: true
    # Clay's depth is geometry, not luminosity: a large soft drop shadow with a
    # bright inner rim reads as a thick extruded slab. The radial accent washes
    # this used to carry made it glow instead, which is the same trick three
    # other themes already use and is not what this style is.
    html: >
      <style>
        .ground{position:absolute;inset:0;
          background:linear-gradient(168deg, {{tokens.palette.bg}} 0%, {{tokens.palette.surface}} 100%);}
        .pebble{position:absolute;border-radius:50%;
          background:{{tokens.clay.pebble_b}};
          box-shadow:0 18px 30px {{tokens.palette.ink}}24, inset 0 8px 14px #FFFFFF80, inset 0 -10px 18px {{tokens.palette.ink}}1f;}
        .p1{left:-6%;top:-14%;width:26%;height:38%;}
        .p2{right:-4%;bottom:-16%;width:22%;height:34%;background:{{tokens.clay.pebble_a}};}
        .board{position:absolute;left:{{panel.x}}px;top:{{panel.y}}px;
          width:{{panel.w}}px;height:{{panel.h}}px;
          border-radius:56px;
          background:{{tokens.palette.surface}};
          box-shadow:
            0 26px 50px {{tokens.palette.ink}}2b,
            inset 0 12px 18px #FFFFFF9e,
            inset 0 -14px 22px {{tokens.palette.ink}}26;}
      </style>

      <div class="ground"></div>

      <div class="pebble p1"></div>

      <div class="pebble p2"></div>

      <div class="board"></div>
    surfaces:
      title: >
        <style>
          .ground{position:absolute;inset:0;
            background:linear-gradient(168deg, #FBF1E6 0%, {{tokens.surfaces.title.bg}} 100%);}
          .slab{position:absolute;left:6%;top:16%;width:88%;height:68%;border-radius:72px;
            background:{{tokens.palette.surface}};
            box-shadow:
              0 34px 60px {{tokens.palette.ink}}30,
              inset 0 16px 24px #FFFFFFad,
              inset 0 -18px 28px {{tokens.palette.ink}}24;}
          .pebble{position:absolute;border-radius:50%;
            box-shadow:0 16px 26px {{tokens.palette.ink}}26, inset 0 8px 12px #FFFFFF8c, inset 0 -9px 16px {{tokens.palette.ink}}1f;}
          .a{right:9%;top:9%;width:15%;height:24%;background:{{tokens.clay.pebble_a}};}
          .b{left:10%;bottom:7%;width:10%;height:16%;background:{{tokens.clay.pebble_b}};}
        </style>

        <div class="ground"></div>

        <div class="slab"></div>

        <div class="pebble a"></div>

        <div class="pebble b"></div>
      section: >
        <style>
          .ground{position:absolute;inset:0;
            background:linear-gradient(168deg, {{tokens.palette.bg}} 0%, {{tokens.palette.surface}} 100%);}
          .slab{position:absolute;left:0;top:14%;width:74%;height:72%;
            border-radius:0 96px 96px 0;
            background:{{tokens.surfaces.section.bg}};
            box-shadow:
              0 30px 56px {{tokens.palette.ink}}33,
              inset 0 14px 22px #FFFFFF5c,
              inset 0 -16px 26px {{tokens.palette.ink}}2b;}
          .pebble{position:absolute;right:8%;top:30%;width:14%;height:24%;border-radius:50%;
            background:{{tokens.clay.pebble_on_section}};
            box-shadow:0 18px 28px {{tokens.palette.ink}}26, inset 0 8px 12px #FFFFFF8c, inset 0 -9px 16px {{tokens.palette.ink}}1f;}
        </style>

        <div class="ground"></div>

        <div class="slab"></div>

        <div class="pebble"></div>
voice:
  feel: warm, playful, tactile, handmade
  density: medium
  prefers:
    - friendly, approachable language
    - rounded card breakdowns
    - a single strong takeaway
  avoid:
    - cold corporate phrasing
    - dense tables that fight the soft shapes
    - sharp contrast edges
  headline_style: >
    Friendly and concrete. "Clay, One Mould at a Time" over "Introduction to
    Claymorphism". Keep the warmth, lose the filler.
  body_style: |
    Full sentences, plain words. Explain like you are showing a colleague.