Brand
Book

:root {
  /* Neutrals: blue-biased graticule ramp */
  --jat-ink-950: #07090B;  --jat-ink-900: #0A0C0F;  --jat-ink-850: #10141A;
  --jat-ink-800: #161B22;  --jat-ink-700: #222A34;  --jat-ink-600: #2E3845;
  --jat-ink-500: #3D4855;  --jat-ink-450: #5A6675;  --jat-ink-400: #7D8996;
  --jat-ink-300: #A3AFBC;  --jat-ink-100: #E6ECF2;

  /* Channels */
  --jat-ch1: #3CE3F0;  /* Platforms    · Channel Cyan */
  --jat-ch2: #9A8CFF;  /* Intelligence · Ultraviolet  */
  --jat-ch3: #FFC23D;  /* Security     · Amber        */
  --jat-ch4: #5EF0A0;  /* Operations   · Signal       */
  --jat-danger: #FF5C7A;

  /* Paper set (light surfaces, print) */
  --jat-paper: #F3F5F7;  --jat-paper-muted: #465260;
  --jat-ch1-deep: #007C88;  --jat-ch2-deep: #5B4BD6;
  --jat-ch3-deep: #8A5800;  --jat-ch4-deep: #0A7646;  --jat-danger-deep: #B0203C;

  /* Roles */
  --jat-bg: var(--jat-ink-900);        --jat-panel: var(--jat-ink-850);
  --jat-raised: var(--jat-ink-800);    --jat-line: var(--jat-ink-700);
  --jat-line-strong: var(--jat-ink-600); --jat-line-control: var(--jat-ink-450);
  --jat-fg: var(--jat-ink-100);        --jat-fg-muted: var(--jat-ink-300);
  --jat-fg-subtle: var(--jat-ink-400); --jat-accent: var(--jat-ch1);
  --jat-focus: 2px solid var(--jat-ch1);

  /* Type */
  /* metric-matched fallbacks are declared with @font-face in the theme stylesheet */
  --jat-font-display: "Archivo", "Archivo Wide Fallback", Arial, sans-serif;
  --jat-font-body: "Archivo", "Archivo Fallback", Arial, sans-serif;
  --jat-font-mono: "Martian Mono", "Martian Mono Fallback", ui-monospace, Menlo, Consolas, monospace;

  /* Type roles: size · weight · width · leading · tracking travel together */
  --jat-text-display: clamp(3.25rem, 1.6rem + 6vw, 6rem);      /* 640 · 125% · .92 · -.035em */
  --jat-text-page:    clamp(2.5rem, 1.5rem + 4vw, 4.5rem);     /* 640 · 125% · .95 · -.03em  */
  --jat-text-section: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);  /* 620 · 118% · 1.05 · -.02em */
  --jat-text-title:   clamp(1.375rem, 1.2rem + .6vw, 1.75rem); /* 600 · 112% · 1.15 · -.01em */
  --jat-text-item:    1.125rem;                                /* 600 · 108% · 1.3           */
  --jat-text-lede:    clamp(1.125rem, 1rem + .4vw, 1.3125rem); /* 400 · 100% · 1.5           */
  --jat-text-body:    1.0625rem;                               /* 400 · 100% · 1.6           */
  --jat-text-small:   0.9375rem;                               /* 430 · 100% · 1.5           */
  --jat-text-label:   0.75rem;                                 /* mono 400 · 90% · +.06em caps */
  --jat-text-data:    1.0625rem;                               /* mono 400 · 90% · tabular   */
  --jat-measure: 32em;                                         /* ≈ 70 characters of Archivo */

  /* Space: 4px base */
  --jat-space-1: 4px;   --jat-space-2: 8px;   --jat-space-3: 12px;
  --jat-space-4: 16px;  --jat-space-5: 24px;  --jat-space-6: 32px;
  --jat-space-7: 48px;  --jat-space-8: 64px;  --jat-space-9: 96px;
  --jat-space-10: 128px;

  /* Shape and depth */
  --jat-radius-tag: 2px;  --jat-radius-control: 6px;  --jat-radius-panel: 12px;
  --jat-shadow-raised: 0 10px 30px -8px rgb(0 0 0 / .6);
  --jat-glass: rgb(16 20 26 / .62);  --jat-glass-blur: 14px;

  /* Motion */
  --jat-ease-out: cubic-bezier(.16, 1, .3, 1);
  --jat-dur-fast: 120ms;  --jat-dur-base: 200ms;
  --jat-dur-slow: 320ms;  --jat-dur-sweep: 640ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --jat-dur-fast: 0ms; --jat-dur-base: 0ms; --jat-dur-slow: 0ms; --jat-dur-sweep: 0ms; }
}

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "layout": { "contentSize": "720px", "wideSize": "1280px" },
    "color": {
      "defaultPalette": false, "defaultGradients": false, "custom": false,
      "palette": [
        { "slug": "graticule", "name": "Graticule", "color": "#0A0C0F" },
        { "slug": "panel", "name": "Panel", "color": "#10141A" },
        { "slug": "raised", "name": "Raised", "color": "#161B22" },
        { "slug": "line", "name": "Line", "color": "#222A34" },
        { "slug": "ice", "name": "Ice", "color": "#E6ECF2" },
        { "slug": "ink-300", "name": "Ink 300", "color": "#A3AFBC" },
        { "slug": "ch1", "name": "CH1 Cyan", "color": "#3CE3F0" },
        { "slug": "ch2", "name": "CH2 Ultraviolet", "color": "#9A8CFF" },
        { "slug": "ch3", "name": "CH3 Amber", "color": "#FFC23D" },
        { "slug": "ch4", "name": "CH4 Signal", "color": "#5EF0A0" },
        { "slug": "paper", "name": "Paper", "color": "#F3F5F7" },
        { "slug": "ch1-deep", "name": "Deep Cyan", "color": "#007C88" }
      ]
    },
    "typography": {
      "defaultFontSizes": false, "fluid": true,
      "fontFamilies": [
        { "slug": "display", "name": "Archivo",
          "fontFamily": "Archivo, 'Helvetica Neue', Arial, sans-serif",
          "fontFace": [{ "fontFamily": "Archivo", "fontWeight": "400 700",
            "fontStretch": "100% 125%", "fontStyle": "normal",
            "src": ["file:./assets/fonts/archivo-var.woff2"] }] },
        { "slug": "mono", "name": "Martian Mono",
          "fontFamily": "'Martian Mono', ui-monospace, Menlo, monospace",
          "fontFace": [{ "fontFamily": "Martian Mono", "fontWeight": "400 500",
            "fontStretch": "87.5% 100%",
            "src": ["file:./assets/fonts/martian-mono-var.woff2"] }] }
      ],
      "fontSizes": [
        { "slug": "label", "name": "Label", "size": "0.75rem" },
        { "slug": "small", "name": "Small", "size": "0.9375rem" },
        { "slug": "medium", "name": "Body", "size": "1.0625rem" },
        { "slug": "item", "name": "Item", "size": "1.125rem" },
        { "slug": "lede", "name": "Lede", "size": "1.3125rem", "fluid": { "min": "1.125rem", "max": "1.3125rem" } },
        { "slug": "title", "name": "Title", "size": "1.75rem", "fluid": { "min": "1.375rem", "max": "1.75rem" } },
        { "slug": "section", "name": "Section", "size": "2.75rem", "fluid": { "min": "1.875rem", "max": "2.75rem" } },
        { "slug": "page", "name": "Page", "size": "4.5rem", "fluid": { "min": "2.5rem", "max": "4.5rem" } },
        { "slug": "display", "name": "Display", "size": "6rem", "fluid": { "min": "3.25rem", "max": "6rem" } }
      ]
    },
    "spacing": {
      "defaultSpacingSizes": false,
      "spacingSizes": [
        { "slug": "20", "name": "4", "size": "4px" },  { "slug": "30", "name": "8", "size": "8px" },
        { "slug": "40", "name": "16", "size": "16px" }, { "slug": "50", "name": "24", "size": "24px" },
        { "slug": "60", "name": "32", "size": "32px" }, { "slug": "70", "name": "48", "size": "48px" },
        { "slug": "80", "name": "64", "size": "64px" }, { "slug": "90", "name": "96", "size": "96px" }
      ]
    },
    "custom": {
      "radius": { "tag": "2px", "control": "6px", "panel": "12px" },
      "motion": { "ease": "cubic-bezier(.16,1,.3,1)", "fast": "120ms", "base": "200ms", "slow": "320ms" }
    }
  },
  "styles": {
    "color": { "background": "var(--wp--preset--color--graticule)", "text": "var(--wp--preset--color--ice)" },
    "typography": { "fontFamily": "var(--wp--preset--font-family--display)", "fontSize": "var(--wp--preset--font-size--medium)", "lineHeight": "1.6" },
    "elements": {
      "link": { "color": { "text": "var(--wp--preset--color--ch1)" } },
      "heading": { "typography": { "fontWeight": "620", "lineHeight": "1.05", "letterSpacing": "-0.02em" } },
      "button": { "color": { "background": "var(--wp--preset--color--ch1)", "text": "var(--wp--preset--color--graticule)" },
        "border": { "radius": "var(--wp--custom--radius--control)" } }
    }
  }
}

{
  "color": {
    "ink": {
      "950": { "$type": "color", "$value": "#07090B" },
      "900": { "$type": "color", "$value": "#0A0C0F", "$description": "Graticule" },
      "850": { "$type": "color", "$value": "#10141A", "$description": "Panel" },
      "800": { "$type": "color", "$value": "#161B22", "$description": "Raised" },
      "700": { "$type": "color", "$value": "#222A34" },
      "600": { "$type": "color", "$value": "#2E3845" },
      "500": { "$type": "color", "$value": "#3D4855" },
      "450": { "$type": "color", "$value": "#5A6675", "$description": "Min control border, 3.35:1" },
      "400": { "$type": "color", "$value": "#7D8996" },
      "300": { "$type": "color", "$value": "#A3AFBC" },
      "100": { "$type": "color", "$value": "#E6ECF2", "$description": "Ice" }
    },
    "channel": {
      "ch1": { "$type": "color", "$value": "#3CE3F0", "$description": "Platforms" },
      "ch2": { "$type": "color", "$value": "#9A8CFF", "$description": "Intelligence" },
      "ch3": { "$type": "color", "$value": "#FFC23D", "$description": "Security" },
      "ch4": { "$type": "color", "$value": "#5EF0A0", "$description": "Operations" }
    },
    "paper": {
      "ground": { "$type": "color", "$value": "#F3F5F7" },
      "muted":  { "$type": "color", "$value": "#465260" },
      "ch1":    { "$type": "color", "$value": "#007C88" },
      "ch2":    { "$type": "color", "$value": "#5B4BD6" },
      "ch3":    { "$type": "color", "$value": "#8A5800" },
      "ch4":    { "$type": "color", "$value": "#0A7646" }
    },
    "semantic": {
      "success": { "$type": "color", "$value": "{color.channel.ch4}" },
      "warning": { "$type": "color", "$value": "{color.channel.ch3}" },
      "danger":  { "$type": "color", "$value": "#FF5C7A" },
      "info":    { "$type": "color", "$value": "{color.channel.ch1}" }
    }
  },
  "font": {
    "family": {
      "display": { "$type": "fontFamily", "$value": ["Archivo", "Archivo Wide Fallback", "Arial", "sans-serif"] },
      "body":    { "$type": "fontFamily", "$value": ["Archivo", "Archivo Fallback", "Arial", "sans-serif"] },
      "mono":    { "$type": "fontFamily", "$value": ["Martian Mono", "Martian Mono Fallback", "ui-monospace", "Menlo", "monospace"] }
    },
    "weight": { "body": { "$type": "fontWeight", "$value": 400 }, "small": { "$type": "fontWeight", "$value": 430 }, "item": { "$type": "fontWeight", "$value": 600 }, "section": { "$type": "fontWeight", "$value": 620 }, "display": { "$type": "fontWeight", "$value": 640 } }
  },
  "typography": {
    "display": { "$type": "typography", "$value": { "fontFamily": "{font.family.display}", "fontSize": "clamp(3.25rem, 1.6rem + 6vw, 6rem)", "fontWeight": 640, "lineHeight": 0.92, "letterSpacing": "-0.035em" } },
    "page":    { "$type": "typography", "$value": { "fontFamily": "{font.family.display}", "fontSize": "clamp(2.5rem, 1.5rem + 4vw, 4.5rem)", "fontWeight": 640, "lineHeight": 0.95, "letterSpacing": "-0.03em" } },
    "section": { "$type": "typography", "$value": { "fontFamily": "{font.family.display}", "fontSize": "clamp(1.875rem, 1.3rem + 2vw, 2.75rem)", "fontWeight": 620, "lineHeight": 1.05, "letterSpacing": "-0.02em" } },
    "title":   { "$type": "typography", "$value": { "fontFamily": "{font.family.display}", "fontSize": "clamp(1.375rem, 1.2rem + .6vw, 1.75rem)", "fontWeight": 600, "lineHeight": 1.15, "letterSpacing": "-0.01em" } },
    "item":    { "$type": "typography", "$value": { "fontFamily": "{font.family.display}", "fontSize": "1.125rem", "fontWeight": 600, "lineHeight": 1.35, "letterSpacing": "0" } },
    "lede":    { "$type": "typography", "$value": { "fontFamily": "{font.family.body}", "fontSize": "clamp(1.125rem, 1rem + .4vw, 1.3125rem)", "fontWeight": 400, "lineHeight": 1.5, "letterSpacing": "0" } },
    "body":    { "$type": "typography", "$value": { "fontFamily": "{font.family.body}", "fontSize": "1.0625rem", "fontWeight": 400, "lineHeight": 1.6, "letterSpacing": "0" } },
    "small":   { "$type": "typography", "$value": { "fontFamily": "{font.family.body}", "fontSize": "0.9375rem", "fontWeight": 430, "lineHeight": 1.5, "letterSpacing": "0" } },
    "label":   { "$type": "typography", "$value": { "fontFamily": "{font.family.mono}", "fontSize": "0.75rem", "fontWeight": 400, "lineHeight": 1.35, "letterSpacing": "0.06em" } },
    "data":    { "$type": "typography", "$value": { "fontFamily": "{font.family.mono}", "fontSize": "1.0625rem", "fontWeight": 400, "lineHeight": 1.3, "letterSpacing": "0" } }
  },
  "space": {
    "1": { "$type": "dimension", "$value": "4px" },  "2": { "$type": "dimension", "$value": "8px" },
    "3": { "$type": "dimension", "$value": "12px" }, "4": { "$type": "dimension", "$value": "16px" },
    "5": { "$type": "dimension", "$value": "24px" }, "6": { "$type": "dimension", "$value": "32px" },
    "7": { "$type": "dimension", "$value": "48px" }, "8": { "$type": "dimension", "$value": "64px" },
    "9": { "$type": "dimension", "$value": "96px" }, "10": { "$type": "dimension", "$value": "128px" }
  },
  "radius": { "tag": { "$type": "dimension", "$value": "2px" }, "control": { "$type": "dimension", "$value": "6px" }, "panel": { "$type": "dimension", "$value": "12px" } },
  "duration": { "fast": { "$type": "duration", "$value": "120ms" }, "base": { "$type": "duration", "$value": "200ms" }, "slow": { "$type": "duration", "$value": "320ms" }, "sweep": { "$type": "duration", "$value": "640ms" } },
  "easing": { "out": { "$type": "cubicBezier", "$value": [0.16, 1, 0.3, 1] } }
}