@cloudgrid-io/ui 0.0.2 → 0.2.0

package/dist/tokens/base.json

@@ -51,6 +51,68 @@
       }
     }
   },
+  "state": {
+    "$description": "state: what an entity IS, not what it means editorially.\n\nAdopted from the Console rather than invented, 2026-08-24 (#96). The Console\nhad already chosen and contrast-tested these — --color-live and\n--color-attention — while the brand carried no state colour at all beyond the\ndanger placeholder. Taking its values means the Console's appearance does not\nchange when it starts consuming this package, and the two stop disagreeing\nabout what 'live' looks like.\n\nEach carries per-surface values in surface-panel and surface-ink, for the same\nreason danger does: measured against all three grounds, no single value works.\nThe live green is 1.72:1 on the purple panel, and the brand's own lime is\n1.54:1 on white. A flat value would be invisible somewhere.\n\nNo --cg-offline-fill, deliberately. Measured, the pair does not work: the\nmuted neutral on a neutral tint is 2.90:1, under the 3:1 bar for a dot or a\nborder. Rather than invent a value to satisfy the ratio, an unplugged chip\nuses the existing surface-card ground with border-control, and --cg-offline\nis the dot on that ground, where it measures 3.28:1. Absence of state should\nnot need a colour of its own.",
+    "online": {
+      "$value": "#00a05c",
+      "$type": "color",
+      "$description": "Serving. From the Console's --color-live. 3.40:1 on white — clears the 3:1 bar for an indicator, which is all this is ever used as. Never body text on white.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online"
+        }
+      }
+    },
+    "offline": {
+      "$value": "{neutrals.neutral-500}",
+      "$description": "Unplugged. Deliberately the existing muted neutral rather than a new colour — an entity that is off should recede, not signal. 3.28:1 on white.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-offline"
+        }
+      }
+    },
+    "expired": {
+      "$value": "#b0662a",
+      "$type": "color",
+      "$description": "Past its 30-day life and no longer served. From the Console's --color-attention. 4.39:1 on white. Amber rather than red: expiry is the documented default for a drop, not a fault.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired"
+        }
+      }
+    },
+    "online-fill": {
+      "$value": "#e6f7ef",
+      "$type": "color",
+      "$description": "From the Console's --color-live-fill. --cg-online measures 3.06:1 on it.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-fill"
+        }
+      }
+    },
+    "expired-fill": {
+      "$value": "#fdf3e0",
+      "$type": "color",
+      "$description": "From the Console's --color-attention-fill. --cg-expired measures 3.99:1 on it.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-fill"
+        }
+      }
+    },
+    "danger-fill": {
+      "$value": "#fceded",
+      "$type": "color",
+      "$description": "From the Console's --color-error-fill. --cg-danger measures 3.72:1 on it. danger had no fill before; a chip needs one.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-fill"
+        }
+      }
+    }
+  },
   "brand-derived": {
     "$description": "brand derived (interaction only)",
     "primary-press": {
@@ -101,64 +163,71 @@
       }
     },
     "lavender-50": {
-      "$value": "#f2f1f7; /* SOURCE: alternate page wash */ --cg-neutral-100: #f1f1f1; /* SOURCE: hairline / card border */ --cg-neutral-200: #e3e3e3; /* SOURCE: control border, inactive pill fill */ --cg-neutral-400: #acacac; /* SOURCE: placeholder */ --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0)",
+      "$value": "#f2f1f7",
+      "$type": "color",
+      "$description": "SOURCE: alternate page wash",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-lavender-50"
         }
       }
     },
     "neutral-100": {
-      "$value": "#f1f1f1; /* SOURCE: hairline / card border */ --cg-neutral-200: #e3e3e3; /* SOURCE: control border, inactive pill fill */ --cg-neutral-400: #acacac; /* SOURCE: placeholder */ --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0)",
+      "$value": "#f1f1f1",
+      "$type": "color",
+      "$description": "SOURCE: hairline / card border",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-neutral-100"
         }
       }
     },
     "neutral-200": {
-      "$value": "#e3e3e3; /* SOURCE: control border, inactive pill fill */ --cg-neutral-400: #acacac; /* SOURCE: placeholder */ --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0)",
+      "$value": "#e3e3e3",
+      "$type": "color",
+      "$description": "SOURCE: control border, inactive pill fill",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-neutral-200"
         }
       }
     },
     "neutral-400": {
-      "$value": "#acacac; /* SOURCE: placeholder */ --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0)",
+      "$value": "#acacac",
+      "$type": "color",
+      "$description": "SOURCE: placeholder",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-neutral-400"
         }
       }
     },
     "neutral-500": {
-      "$value": "#8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0)",
+      "$value": "#8e8e8e",
+      "$type": "color",
+      "$description": "SOURCE: footer text",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-neutral-500"
         }
       }
     },
     "neutral-700": {
-      "$value": "#595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0)",
+      "$value": "#595959",
+      "$type": "color",
+      "$description": "SOURCE: legal / secondary text",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-neutral-700"
         }
       }
     },
     "neutral-900": {
-      "$value": "#222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0)",
+      "$value": "#222222",
+      "$type": "color",
+      "$description": "SOURCE: ink",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-neutral-900"
         }
       }
@@ -448,10 +517,11 @@
       }
     },
     "display-md": {
-      "$value": "38px; /* SOURCE: onboarding H1 (was 42px) */ --cg-display-sm: 30px",
+      "$value": "38px",
+      "$type": "dimension",
+      "$description": "SOURCE: onboarding H1 (was 42px)",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-display-md"
         }
       }
@@ -495,19 +565,21 @@
       }
     },
     "heading-md": {
-      "$value": "20px; /* SOURCE: card title */ --cg-heading-sm: 17px; /* SOURCE: step title */ --cg-heading-line: 1.3",
+      "$value": "20px",
+      "$type": "dimension",
+      "$description": "SOURCE: card title",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-heading-md"
         }
       }
     },
     "heading-sm": {
-      "$value": "17px; /* SOURCE: step title */ --cg-heading-line: 1.3",
+      "$value": "17px",
+      "$type": "dimension",
+      "$description": "SOURCE: step title",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-heading-sm"
         }
       }
@@ -522,37 +594,41 @@
       }
     },
     "body-lg": {
-      "$value": "19px; /* SOURCE: H1 subline */ --cg-body-md: 16px; /* SOURCE: default UI text */ --cg-body-sm: 15px; /* SOURCE: card body, legal */ --cg-caption: 13px; /* SOURCE: footer, helper */ --cg-body-line: 1.5",
+      "$value": "19px",
+      "$type": "dimension",
+      "$description": "SOURCE: H1 subline",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-body-lg"
         }
       }
     },
     "body-md": {
-      "$value": "16px; /* SOURCE: default UI text */ --cg-body-sm: 15px; /* SOURCE: card body, legal */ --cg-caption: 13px; /* SOURCE: footer, helper */ --cg-body-line: 1.5",
+      "$value": "16px",
+      "$type": "dimension",
+      "$description": "SOURCE: default UI text",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-body-md"
         }
       }
     },
     "body-sm": {
-      "$value": "15px; /* SOURCE: card body, legal */ --cg-caption: 13px; /* SOURCE: footer, helper */ --cg-body-line: 1.5",
+      "$value": "15px",
+      "$type": "dimension",
+      "$description": "SOURCE: card body, legal",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-body-sm"
         }
       }
     },
     "caption": {
-      "$value": "13px; /* SOURCE: footer, helper */ --cg-body-line: 1.5",
+      "$value": "13px",
+      "$type": "dimension",
+      "$description": "SOURCE: footer, helper",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-caption"
         }
       }
@@ -734,10 +810,11 @@
       }
     },
     "column-wide": {
-      "$value": "920px; /* SOURCE 844px; widened 2026-08-06 with the container */ --cg-page-pad: 32px",
+      "$value": "920px",
+      "$type": "dimension",
+      "$description": "SOURCE 844px; widened 2026-08-06 with the container",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-column-wide"
         }
       }
@@ -845,37 +922,41 @@
       }
     },
     "radius-md": {
-      "$value": "12px; /* SOURCE: code block, OTP cell */ --cg-radius-lg: 14px; /* SOURCE: provider button, input, tool card */ --cg-radius-xl: 16px; /* SOURCE: option card */ --cg-radius-2xl: 24px; /* SOURCE: full-bleed purple panel */ --cg-radius-pill: 999px",
+      "$value": "12px",
+      "$type": "dimension",
+      "$description": "SOURCE: code block, OTP cell",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-radius-md"
         }
       }
     },
     "radius-lg": {
-      "$value": "14px; /* SOURCE: provider button, input, tool card */ --cg-radius-xl: 16px; /* SOURCE: option card */ --cg-radius-2xl: 24px; /* SOURCE: full-bleed purple panel */ --cg-radius-pill: 999px",
+      "$value": "14px",
+      "$type": "dimension",
+      "$description": "SOURCE: provider button, input, tool card",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-radius-lg"
         }
       }
     },
     "radius-xl": {
-      "$value": "16px; /* SOURCE: option card */ --cg-radius-2xl: 24px; /* SOURCE: full-bleed purple panel */ --cg-radius-pill: 999px",
+      "$value": "16px",
+      "$type": "dimension",
+      "$description": "SOURCE: option card",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-radius-xl"
         }
       }
     },
     "radius-2xl": {
-      "$value": "24px; /* SOURCE: full-bleed purple panel */ --cg-radius-pill: 999px",
+      "$value": "24px",
+      "$type": "dimension",
+      "$description": "SOURCE: full-bleed purple panel",
       "$extensions": {
         "io.cloudgrid": {
-          "raw": true,
           "css": "--cg-radius-2xl"
         }
       }

package/dist/tokens/surface-ink.json

@@ -132,5 +132,68 @@
         }
       }
     }
+  },
+  "state": {
+    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed.",
+    "online": {
+      "$value": "#5FD99A",
+      "$type": "color",
+      "$description": "9.00:1 on #222. Ink has headroom, so this stays a recognisable green rather than washing to mint.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online"
+        }
+      }
+    },
+    "offline": {
+      "$value": "#9A9A9A",
+      "$type": "color",
+      "$description": "5.65:1. Still the quiet one, lifted just enough to read.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-offline"
+        }
+      }
+    },
+    "expired": {
+      "$value": "#F0B45E",
+      "$type": "color",
+      "$description": "8.63:1. Keeps the amber legible without turning yellow.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired"
+        }
+      }
+    },
+    "online-fill": {
+      "$value": "rgba(255, 255, 255, 0.08)",
+      "$type": "color",
+      "$description": "Translucent white; the ink foreground measures 7.04:1 on it.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-fill"
+        }
+      }
+    },
+    "expired-fill": {
+      "$value": "rgba(255, 255, 255, 0.08)",
+      "$type": "color",
+      "$description": "Translucent white; the ink foreground measures 6.76:1 on it.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-fill"
+        }
+      }
+    },
+    "danger-fill": {
+      "$value": "rgba(255, 255, 255, 0.08)",
+      "$type": "color",
+      "$description": "Translucent white; the ink foreground measures 5.45:1 on it.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-fill"
+        }
+      }
+    }
   }
 }

package/dist/tokens/surface-panel.json

@@ -116,5 +116,68 @@
         }
       }
     }
+  },
+  "state": {
+    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed.",
+    "online": {
+      "$value": "#C8F5DC",
+      "$type": "color",
+      "$description": "4.88:1 on the purple. The source green is 1.72:1 here — invisible, same class as the danger override.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online"
+        }
+      }
+    },
+    "offline": {
+      "$value": "#D9D4FB",
+      "$type": "color",
+      "$description": "4.11:1. A desaturated lavender so 'off' still recedes against the panel instead of reading as another state.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-offline"
+        }
+      }
+    },
+    "expired": {
+      "$value": "#FFE2B8",
+      "$type": "color",
+      "$description": "4.68:1. The amber as a tint; the source value is 1.38:1 on this ground.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired"
+        }
+      }
+    },
+    "online-fill": {
+      "$value": "rgba(255, 255, 255, 0.16)",
+      "$type": "color",
+      "$description": "Translucent white rather than a tint; the panel foreground measures 3.62:1 on it.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-fill"
+        }
+      }
+    },
+    "expired-fill": {
+      "$value": "rgba(255, 255, 255, 0.16)",
+      "$type": "color",
+      "$description": "Translucent white rather than a tint; the panel foreground measures 3.47:1 on it.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-fill"
+        }
+      }
+    },
+    "danger-fill": {
+      "$value": "rgba(255, 255, 255, 0.16)",
+      "$type": "color",
+      "$description": "Translucent white rather than a tint; the panel foreground measures 3.35:1 on it.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-fill"
+        }
+      }
+    }
   }
 }

package/dist/tokens.css

@@ -73,6 +73,46 @@
      brand pass can darken it; that is a decision, not a tidy-up. */
   --cg-danger: #E53935;
 
+  /* ---- state ----
+     state: what an entity IS, not what it means editorially.
+
+     Adopted from the Console rather than invented, 2026-08-24 (#96). The Console
+     had already chosen and contrast-tested these — --color-live and
+     --color-attention — while the brand carried no state colour at all beyond the
+     danger placeholder. Taking its values means the Console's appearance does not
+     change when it starts consuming this package, and the two stop disagreeing
+     about what 'live' looks like.
+
+     Each carries per-surface values in surface-panel and surface-ink, for the same
+     reason danger does: measured against all three grounds, no single value works.
+     The live green is 1.72:1 on the purple panel, and the brand's own lime is
+     1.54:1 on white. A flat value would be invisible somewhere.
+
+     No --cg-offline-fill, deliberately. Measured, the pair does not work: the
+     muted neutral on a neutral tint is 2.90:1, under the 3:1 bar for a dot or a
+     border. Rather than invent a value to satisfy the ratio, an unplugged chip
+     uses the existing surface-card ground with border-control, and --cg-offline
+     is the dot on that ground, where it measures 3.28:1. Absence of state should
+     not need a colour of its own. */
+  /*
+     Serving. From the Console's --color-live. 3.40:1 on white — clears the 3:1 bar for an indicator, which is all this is ever used as. Never body text on white. */
+  --cg-online: #00a05c;
+  /*
+     Unplugged. Deliberately the existing muted neutral rather than a new colour — an entity that is off should recede, not signal. 3.28:1 on white. */
+  --cg-offline: var(--cg-neutral-500);
+  /*
+     Past its 30-day life and no longer served. From the Console's --color-attention. 4.39:1 on white. Amber rather than red: expiry is the documented default for a drop, not a fault. */
+  --cg-expired: #b0662a;
+  /*
+     From the Console's --color-live-fill. --cg-online measures 3.06:1 on it. */
+  --cg-online-fill: #e6f7ef;
+  /*
+     From the Console's --color-attention-fill. --cg-expired measures 3.99:1 on it. */
+  --cg-expired-fill: #fdf3e0;
+  /*
+     From the Console's --color-error-fill. --cg-danger measures 3.72:1 on it. danger had no fill before; a chip needs one. */
+  --cg-danger-fill: #fceded;
+
   /* ---- brand-derived ----
      brand derived (interaction only) */
   --cg-primary-press: #4b39db;
@@ -82,13 +122,20 @@
 
   /* ---- neutrals ---- */
   --cg-neutral-0: #ffffff;
-  --cg-lavender-50: #f2f1f7; /* SOURCE: alternate page wash */ --cg-neutral-100: #f1f1f1; /* SOURCE: hairline / card border */ --cg-neutral-200: #e3e3e3; /* SOURCE: control border, inactive pill fill */ --cg-neutral-400: #acacac; /* SOURCE: placeholder */ --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0);
-  --cg-neutral-100: #f1f1f1; /* SOURCE: hairline / card border */ --cg-neutral-200: #e3e3e3; /* SOURCE: control border, inactive pill fill */ --cg-neutral-400: #acacac; /* SOURCE: placeholder */ --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0);
-  --cg-neutral-200: #e3e3e3; /* SOURCE: control border, inactive pill fill */ --cg-neutral-400: #acacac; /* SOURCE: placeholder */ --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0);
-  --cg-neutral-400: #acacac; /* SOURCE: placeholder */ --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0);
-  --cg-neutral-500: #8e8e8e; /* SOURCE: footer text */ --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0);
-  --cg-neutral-700: #595959; /* SOURCE: legal / secondary text */ --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0);
-  --cg-neutral-900: #222222; /* SOURCE: ink */ /* ---- semantic surfaces ---- */ --cg-surface-page: var(--cg-neutral-0);
+  /* SOURCE: alternate page wash */
+  --cg-lavender-50: #f2f1f7;
+  /* SOURCE: hairline / card border */
+  --cg-neutral-100: #f1f1f1;
+  /* SOURCE: control border, inactive pill fill */
+  --cg-neutral-200: #e3e3e3;
+  /* SOURCE: placeholder */
+  --cg-neutral-400: #acacac;
+  /* SOURCE: footer text */
+  --cg-neutral-500: #8e8e8e;
+  /* SOURCE: legal / secondary text */
+  --cg-neutral-700: #595959;
+  /* SOURCE: ink */
+  --cg-neutral-900: #222222;
 
   /* ---- semantic-surfaces ---- */
   --cg-surface-page: var(--cg-neutral-0);
@@ -144,20 +191,27 @@
      dominant). The SOURCE values were xl 64 / lg 48 / md 42 / sm 32. */
   --cg-display-xl: 56px;
   --cg-display-lg: 44px;
-  --cg-display-md: 38px; /* SOURCE: onboarding H1 (was 42px) */ --cg-display-sm: 30px;
+  /* SOURCE: onboarding H1 (was 42px) */
+  --cg-display-md: 38px;
   --cg-display-sm: 30px;
   --cg-display-line: 1.06;
   --cg-display-tracking: 0.012em;
 
   /* ---- manrope-ramp ---- */
   --cg-heading-lg: 24px;
-  --cg-heading-md: 20px; /* SOURCE: card title */ --cg-heading-sm: 17px; /* SOURCE: step title */ --cg-heading-line: 1.3;
-  --cg-heading-sm: 17px; /* SOURCE: step title */ --cg-heading-line: 1.3;
+  /* SOURCE: card title */
+  --cg-heading-md: 20px;
+  /* SOURCE: step title */
+  --cg-heading-sm: 17px;
   --cg-heading-line: 1.3;
-  --cg-body-lg: 19px; /* SOURCE: H1 subline */ --cg-body-md: 16px; /* SOURCE: default UI text */ --cg-body-sm: 15px; /* SOURCE: card body, legal */ --cg-caption: 13px; /* SOURCE: footer, helper */ --cg-body-line: 1.5;
-  --cg-body-md: 16px; /* SOURCE: default UI text */ --cg-body-sm: 15px; /* SOURCE: card body, legal */ --cg-caption: 13px; /* SOURCE: footer, helper */ --cg-body-line: 1.5;
-  --cg-body-sm: 15px; /* SOURCE: card body, legal */ --cg-caption: 13px; /* SOURCE: footer, helper */ --cg-body-line: 1.5;
-  --cg-caption: 13px; /* SOURCE: footer, helper */ --cg-body-line: 1.5;
+  /* SOURCE: H1 subline */
+  --cg-body-lg: 19px;
+  /* SOURCE: default UI text */
+  --cg-body-md: 16px;
+  /* SOURCE: card body, legal */
+  --cg-body-sm: 15px;
+  /* SOURCE: footer, helper */
+  --cg-caption: 13px;
   --cg-body-line: 1.5;
   --cg-body-tracking: 0em;
   --cg-mono-size: 14px;
@@ -183,7 +237,8 @@
   /* ---- layout ----
      layout (SOURCE measurements from the 1440px frames) */
   --cg-column-form: 414px;
-  --cg-column-wide: 920px; /* SOURCE 844px; widened 2026-08-06 with the container */ --cg-page-pad: 32px;
+  /* SOURCE 844px; widened 2026-08-06 with the container */
+  --cg-column-wide: 920px;
   --cg-page-pad: 32px;
   --cg-header-height: 90px;
   --cg-footer-height: 64px;
@@ -201,10 +256,14 @@
   /* ---- corners ---- */
   --cg-radius-xs: 8px;
   --cg-radius-sm: 10px;
-  --cg-radius-md: 12px; /* SOURCE: code block, OTP cell */ --cg-radius-lg: 14px; /* SOURCE: provider button, input, tool card */ --cg-radius-xl: 16px; /* SOURCE: option card */ --cg-radius-2xl: 24px; /* SOURCE: full-bleed purple panel */ --cg-radius-pill: 999px;
-  --cg-radius-lg: 14px; /* SOURCE: provider button, input, tool card */ --cg-radius-xl: 16px; /* SOURCE: option card */ --cg-radius-2xl: 24px; /* SOURCE: full-bleed purple panel */ --cg-radius-pill: 999px;
-  --cg-radius-xl: 16px; /* SOURCE: option card */ --cg-radius-2xl: 24px; /* SOURCE: full-bleed purple panel */ --cg-radius-pill: 999px;
-  --cg-radius-2xl: 24px; /* SOURCE: full-bleed purple panel */ --cg-radius-pill: 999px;
+  /* SOURCE: code block, OTP cell */
+  --cg-radius-md: 12px;
+  /* SOURCE: provider button, input, tool card */
+  --cg-radius-lg: 14px;
+  /* SOURCE: option card */
+  --cg-radius-xl: 16px;
+  /* SOURCE: full-bleed purple panel */
+  --cg-radius-2xl: 24px;
   --cg-radius-pill: 999px;
   --cg-border-width: 1px;
   --cg-border-width-strong: 1.5px;
@@ -256,6 +315,27 @@
      Same class as #41. This tint is derived from it and measures 4.52:1, so it
      clears AA for body text as well as the 3:1 UI bar. */
   --cg-danger: #FFDAD6;
+
+  /* ---- state ----
+     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. */
+  /*
+     4.88:1 on the purple. The source green is 1.72:1 here — invisible, same class as the danger override. */
+  --cg-online: #C8F5DC;
+  /*
+     4.11:1. A desaturated lavender so 'off' still recedes against the panel instead of reading as another state. */
+  --cg-offline: #D9D4FB;
+  /*
+     4.68:1. The amber as a tint; the source value is 1.38:1 on this ground. */
+  --cg-expired: #FFE2B8;
+  /*
+     Translucent white rather than a tint; the panel foreground measures 3.62:1 on it. */
+  --cg-online-fill: rgba(255, 255, 255, 0.16);
+  /*
+     Translucent white rather than a tint; the panel foreground measures 3.47:1 on it. */
+  --cg-expired-fill: rgba(255, 255, 255, 0.16);
+  /*
+     Translucent white rather than a tint; the panel foreground measures 3.35:1 on it. */
+  --cg-danger-fill: rgba(255, 255, 255, 0.16);
 }
 
 [data-cg-surface='ink'] {
@@ -286,4 +366,20 @@
      than washing out to pink: 6.97:1 against #222, comfortably past AA for body
      text. The source red would have managed only 3.76:1 here. */
   --cg-danger: #FF8A80;
+
+  /* ---- state ----
+     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. */
+  /*
+     9.00:1 on #222. Ink has headroom, so this stays a recognisable green rather than washing to mint. */
+  --cg-online: #5FD99A;
+  /* 5.65:1. Still the quiet one, lifted just enough to read. */
+  --cg-offline: #9A9A9A;
+  /* 8.63:1. Keeps the amber legible without turning yellow. */
+  --cg-expired: #F0B45E;
+  /* Translucent white; the ink foreground measures 7.04:1 on it. */
+  --cg-online-fill: rgba(255, 255, 255, 0.08);
+  /* Translucent white; the ink foreground measures 6.76:1 on it. */
+  --cg-expired-fill: rgba(255, 255, 255, 0.08);
+  /* Translucent white; the ink foreground measures 5.45:1 on it. */
+  --cg-danger-fill: rgba(255, 255, 255, 0.08);
 }