# Retro CRT — phosphor glow, scanlines and a screen vignette.
#
# The tube is one curved piece of glass, and the plate has to read as that.
# Every layer is therefore concentric on the same centre: the phosphor bloom,
# the sheen on the glass and the vignette that darkens the corners are the
# same curvature seen three ways. The earlier plate put a blurred ellipse at
# 20%/14% and a bloom at 50%/40%, so two unrelated smears crossed the screen
# and the result read as a stain rather than a tube.

name: retro-crt
label: Retro CRT
summary: A phosphor-green CRT tube — scanlines, glow, screen vignette.

tokens:
  palette:
    bg: "#0B120B"          # off-tube black
    surface: "#0F180F"
    ink: "#C9FFCE"         # phosphor green
    ink_muted: "#83B288"   # sized against the lit band, not the dark rim
    accent: "#33FF5C"      # bright phosphor
    accent_alt: "#FFE14A"  # amber secondary
    rule: "#1F3A22"
    on_accent: "#0B120B"

  surfaces:
    title:   { bg: "#050A05", ink: "#C9FFCE", muted: "#93C298", accent: "#33FF5C" }
    section: { bg: "#1A3A1E", ink: "#C9FFCE", muted: "#99CE9E" }

  dark:
    bg: "#050A05"
    surface: "#0C140C"
    ink: "#C9FFCE"
    ink_muted: "#83B288"
    accent: "#3BFF68"
    accent_alt: "#FFE14A"
    rule: "#1A3320"
    on_accent: "#050A05"

  type:
    display:  { family: "IBM Plex Mono", weight: 700, size: 38, line: 1.1,  tracking: 1.0 }
    heading:  { family: "IBM Plex Mono", weight: 700, size: 28, line: 1.15, tracking: 0.8 }
    subhead:  { family: "IBM Plex Mono", weight: 400, size: 14, line: 1.5,  tracking: 0 }
    body:     { family: "IBM Plex Mono", weight: 400, size: 12.5, line: 1.6, tracking: 0 }
    caption:  { family: "IBM Plex Mono", weight: 400, size: 10, line: 1.35, tracking: 0.2 }
    eyebrow:  { family: "IBM Plex Mono", weight: 700, size: 10, line: 1.2,  tracking: 2.0, transform: upper }
    stat:     { family: "IBM Plex Mono", weight: 700, size: 54, line: 1.0,  tracking: 0 }

  grid:
    margin: { top: 0.66, right: 0.75, bottom: 0.58, left: 0.75 }
    gutter: 0.30
    columns: 12
    band: { eyebrow_y: 0.66, title_y: 1.36, body_y: 2.62 }

  shape:
    radius: { card: 0.06, pill: 0.40, chip: 0.04 }
    border: { width: 1, color: "#2A4A30" }
    card_pad: 0.30

  shadow:
    card: { type: outer, blur: 8, offset: 2, angle: 90, color: "000000", opacity: 0.5 }

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

  plate:
    enabled: true
    html: |
      <style>
        /* The glass itself: brightest where the beam lands, falling to the
           unlit tube at the rim. One gradient, one centre. */
        .tube{position:absolute;inset:0;background:
          radial-gradient(118% 104% at 50% 52%,
            {{tokens.palette.surface}} 0%, {{tokens.palette.bg}} 62%, #040704 100%);}
        /* Phosphor bloom. Wide and weak — a beam lights the screen, it does
           not sit on it as an object, so there is no blur and no hard edge. */
        .beam{position:absolute;inset:0;background:
          radial-gradient(62% 52% at 50% 52%,
            {{tokens.palette.accent}}30 0%, {{tokens.palette.accent}}14 40%, transparent 76%);}
        /* Every other line, across the whole screen rather than fading out
           where the ground goes dark. */
        .scan{position:absolute;inset:0;
          background:repeating-linear-gradient(0deg,
            rgba(0,0,0,.34) 0 1.5px, rgba(0,0,0,0) 1.5px 3.5px);}
        /* The reflection that says "glass": one soft diagonal, top-left. */
        .sheen{position:absolute;inset:0;background:
          linear-gradient(118deg,
            rgba(255,255,255,.055) 0%, rgba(255,255,255,.014) 28%, rgba(255,255,255,0) 48%);}
        .vig{position:absolute;inset:0;background:
          radial-gradient(110% 104% at 50% 52%, rgba(0,0,0,0) 52%, rgba(0,0,0,.5) 100%);}
      </style>
      <div class="tube"></div>
      <div class="beam"></div>
      <div class="scan"></div>
      <div class="sheen"></div>
      <div class="vig"></div>
    surfaces:
      title: |
        <style>
          /* The title is the tube warming up: the same geometry, the beam
             pushed to where the type sits so the lit area holds the words
             rather than the empty band above them. */
          .tube{position:absolute;inset:0;background:
            radial-gradient(120% 108% at 46% 62%,
              {{tokens.palette.surface}} 0%, {{tokens.surfaces.title.bg}} 60%, #030603 100%);}
          .beam{position:absolute;inset:0;background:
            radial-gradient(70% 60% at 46% 62%,
              {{tokens.palette.accent}}4a 0%, {{tokens.palette.accent}}1c 40%, transparent 76%);}
          .scan{position:absolute;inset:0;
            background:repeating-linear-gradient(0deg,
              rgba(0,0,0,.34) 0 1.5px, rgba(0,0,0,0) 1.5px 3.5px);}
          .sheen{position:absolute;inset:0;background:
            linear-gradient(118deg,
              rgba(255,255,255,.07) 0%, rgba(255,255,255,.018) 26%, rgba(255,255,255,0) 46%);}
          .vig{position:absolute;inset:0;background:
            radial-gradient(112% 106% at 46% 62%, rgba(0,0,0,0) 48%, rgba(0,0,0,.52) 100%);}
        </style>
        <div class="tube"></div>
        <div class="beam"></div>
        <div class="scan"></div>
        <div class="sheen"></div>
        <div class="vig"></div>
      section: |
        <style>
          /* A divider is the beam at full drive — the same tube, brighter. */
          .tube{position:absolute;inset:0;background:
            radial-gradient(118% 106% at 50% 50%,
              {{tokens.surfaces.section.bg}} 0%, {{tokens.palette.bg}} 78%, #040704 100%);}
          .beam{position:absolute;inset:0;background:
            radial-gradient(58% 50% at 50% 50%,
              {{tokens.palette.accent}}3c 0%, {{tokens.palette.accent}}16 44%, transparent 78%);}
          .scan{position:absolute;inset:0;
            background:repeating-linear-gradient(0deg,
              rgba(0,0,0,.32) 0 1.5px, rgba(0,0,0,0) 1.5px 3.5px);}
          .sheen{position:absolute;inset:0;background:
            linear-gradient(118deg,
              rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 27%, rgba(255,255,255,0) 47%);}
          .vig{position:absolute;inset:0;background:
            radial-gradient(110% 104% at 50% 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,.46) 100%);}
        </style>
        <div class="tube"></div>
        <div class="beam"></div>
        <div class="scan"></div>
        <div class="sheen"></div>
        <div class="vig"></div>

voice:
  feel: retro, precise, immersive, playful-tech
  density: medium
  prefers:
    - system and hardware framing
    - a playful-but-exact register
    - short lines, terminal energy
  avoid:
    - corporate prose
    - long paragraphs
    - soft warm language
  headline_style: >
    Like a boot message. "PIPELINE ONLINE // 60FPS" over "Rendering".
    Caps-able, terse, techy.
  body_style: >
    Compact and complete. Each line a fact; no filler lines.