name: sunset
label: Sunset Golden Hour
summary: A warm amber-to-rose-to-violet golden-hour mesh.
tokens:
  palette:
    bg: "#F7E9D8"
    surface: "#FFF9F0"
    ink: "#4A2B24"
    ink_muted: "#8A6456"
    accent: "#D2691E"
    accent_alt: "#B23A6B"
    rule: "#E9D2BC"
    on_accent: "#0A0A0A"
  # The sky, top to bottom. Golden hour is a vertical gradient — dusk overhead
  # falling through rose and amber to a bright band at the horizon — so these
  # are stops on one sky rather than separate light sources. The violet the
  # summary promises lives here; the palette proper stays warm, because that is
  # what the renderer draws text and shapes from.
  sky:
    dusk: "#5B3A6E"
    rose: "#B23A6B"
    amber: "#D2691E"
    gold: "#F0A45C"
    haze: "#FFD9A8"

  surfaces:
    title:
      bg: "#4A2B24"
      ink: "#FFF9F0"
      muted: "#D8B7A4"
      accent: "#F0A45C"
    section:
      bg: "#B23A6B"
      ink: "#FFF9F0"
      muted: "#F5CBDD"
  dark:
    bg: "#2B1B1E"
    surface: "#3A2527"
    ink: "#F7E9D8"
    ink_muted: "#B99A8A"
    accent: "#D2691E"
    accent_alt: "#C94A7C"
    rule: "#5A3E3E"
    on_accent: "#F7E9D8"
  type:
    display:
      family: Fraunces
      weight: 600
      size: 38
      line: 1.12
      tracking: -0.4
    heading:
      family: Fraunces
      weight: 600
      size: 29
      line: 1.18
      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: 600
      size: 52
      line: 1.05
      tracking: -1
  grid:
    # Room for the page the plate draws past the content box, as on every other
    # plate theme.
    margin:
      top: 0.7
      right: 0.78
      bottom: 0.62
      left: 0.78
    gutter: 0.3
    columns: 12
    band:
      eyebrow_y: 0.62
      title_y: 1.3
      body_y: 2.55
  shape:
    radius:
      card: 0.14
      pill: 0.4
      chip: 0.08
    border:
      width: 1
      color: "#FFF9F080"
    card_pad: 0.3
  shadow:
    card:
      type: outer
      blur: 12
      offset: 3
      angle: 90
      color: 4A2B24
      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: rules
    heading:
      align: centre
      opening: none
    content:
      frame: inset
    list:
      marker: dash

  plate:
    enabled: true
    # A sky, not a mesh.
    #
    # This was blurred blobs over stacked radials, like every other soft theme,
    # which is a strange way to draw the one thing everybody has actually seen.
    # Golden hour is a vertical gradient: dusk overhead, falling through rose
    # and amber to a bright band just above the horizon, with the sun sitting
    # in that band. That is a horizontal composition, and it is what keeps this
    # theme distinct from the aurora ones — their light runs diagonally across
    # the frame, this one is layered top to bottom.
    #
    # The one soft glow here is the sun, which has earned it.
    html: |
      <style>
        .sky{position:absolute;inset:0;background:linear-gradient(178deg,
          {{tokens.sky.dusk}} 0%, {{tokens.sky.rose}} 26%, {{tokens.sky.amber}} 52%,
          {{tokens.sky.gold}} 74%, {{tokens.sky.haze}} 100%);}
        /* Not a disc. A disc reads as an object stuck on the slide and draws
           the eye to a hard circular edge; the last light of the day is a
           broad warmth in one corner. Anchored past the corner so no part of
           its outline is on the slide. */
        .sun{position:absolute;right:-20%;bottom:-38%;width:64%;height:104%;border-radius:50%;
          background:radial-gradient(closest-side circle,
            {{tokens.sky.haze}}a6 0%, {{tokens.sky.gold}}5c 46%, {{tokens.sky.gold}}00 100%);}
        .grain{position:absolute;inset:0;opacity:.26;mix-blend-mode:soft-light;
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
          background-size:200px 200px;}
        .page{position:absolute;left:{{panel.x}}px;top:{{panel.y}}px;width:{{panel.w}}px;height:{{panel.h}}px;
          border-radius:20px;background:{{tokens.palette.surface}}f2;
          box-shadow:0 22px 56px {{tokens.palette.ink}}33;}
      </style>
      <div class="sky"></div>
      <div class="sun"></div>
      <div class="grain"></div>
      <div class="page"></div>
    surfaces:
      title: |
        <style>
          /* The bright end of the sky is compressed into the bottom third,
             where a horizon actually is. Spread evenly it put gold and haze
             straight through the band the title occupies: white title text
             measured 2.2:1 there and the subtitle 1.2:1, which is not a look,
             it is unreadable. */
          .sky{position:absolute;inset:0;background:linear-gradient(178deg,
            {{tokens.surfaces.title.bg}} 0%, {{tokens.sky.dusk}} 30%,
            {{tokens.sky.rose}} 62%, {{tokens.sky.amber}} 84%,
            {{tokens.sky.gold}} 94%, {{tokens.sky.haze}} 100%);}
          /* The sun sits low and right, clear of the text column. */
          .sun{position:absolute;right:-22%;bottom:-42%;width:66%;height:108%;border-radius:50%;
            background:radial-gradient(closest-side circle,
              {{tokens.sky.haze}}b8 0%, {{tokens.sky.gold}}66 46%, {{tokens.sky.gold}}00 100%);}
          /* The horizon. One hard line in a slide made entirely of gradient is
             what stops it reading as vapour. */
          .horizon{position:absolute;left:0;bottom:14%;width:100%;height:1.5px;
            background:{{tokens.palette.surface}}59;}
          .grain{position:absolute;inset:0;opacity:.3;mix-blend-mode:soft-light;
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size:200px 200px;}
        </style>
        <div class="sky"></div>
        <div class="sun"></div>
        <div class="horizon"></div>
        <div class="grain"></div>
      section: |
        <style>
          .sky{position:absolute;inset:0;background:linear-gradient(178deg,
            {{tokens.sky.dusk}} 0%, {{tokens.surfaces.section.bg}} 44%,
            {{tokens.sky.amber}} 86%, {{tokens.sky.gold}} 100%);}
          .sun{position:absolute;right:-20%;bottom:-40%;width:64%;height:104%;border-radius:50%;
            background:radial-gradient(closest-side circle,
              {{tokens.sky.haze}}a6 0%, {{tokens.sky.gold}}5c 46%, {{tokens.sky.gold}}00 100%);}
          /* A band of sky the section title sits in, edge to edge — layered,
             like the rest of this theme, rather than a shape floating on it. */
          .band{position:absolute;left:0;top:28%;width:100%;height:40%;
            background:{{tokens.palette.ink}}47;
            border-top:1px solid {{tokens.palette.surface}}3d;
            border-bottom:1px solid {{tokens.palette.surface}}3d;}
          .grain{position:absolute;inset:0;opacity:.28;mix-blend-mode:soft-light;
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size:200px 200px;}
        </style>
        <div class="sky"></div>
        <div class="sun"></div>
        <div class="band"></div>
        <div class="grain"></div>

voice:
  feel: warm, golden, cinematic, expansive
  density: medium
  prefers:
    - a warm, confident narrative
    - a hero statistic or a strong opening image
    - an ending that lingers
  avoid:
    - cold clinical phrasing
    - overcrowded slides
    - flat, grey vocabulary
  headline_style: >
    Evocative but exact. "Light at the End of the Pipeline" over "Rendering".
    Warm, cinematic, specific.
  body_style: |
    Full warm sentences. Lead with the feeling, land on the fact.