/* GIAD/OS — Shared Design System
   Single source of truth for global visual tokens.
   Change these values here to update every GIAD/OS file that imports this stylesheet.
*/

:root {
  /* Typography */
  --giad-font: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --giad-font-size: 12px;

  /* Core palette */
  --giad-orange: #ff5a1f;
  --giad-orange-light: #ff8a4d;
  --giad-panel: #1c1e26;
  --giad-panel-dark: #14151a;
  --giad-equipment: #3e414c;
  --giad-field: #0d0e13;
  --giad-line: #0b0c11;
  --giad-text: #e8eaf1;
  --giad-muted: #8b90a0;
  --giad-faint: #6a6f80;
  --giad-blue: #28498c;
  --giad-amber: #f2a943;
  --giad-negative: #ff6b62;
  --giad-positive: #54d17a;

  /* App status colors */
  --status-free: #39ff88;
  --status-locked: var(--giad-orange);
  --status-development: #f2a943;
  --status-future: #9ca2b2;

  /* Legacy aliases used throughout existing GIAD/OS apps.
     Keeping these aliases means the migration does not break old program CSS. */
  --orange: var(--giad-orange);
  --orange2: var(--giad-orange-light);
  --panel: var(--giad-panel);
  --panel2: var(--giad-panel-dark);
  --equipment: var(--giad-equipment);
  --field: var(--giad-field);
  --line: var(--giad-line);
  --text: var(--giad-text);
  --muted: var(--giad-muted);
  --faint: var(--giad-faint);
  --blue: var(--giad-blue);
  --amber: var(--giad-amber);
  --neg: var(--giad-negative);
  --good: var(--giad-positive);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--giad-font);
}

html,
body {
  font-size: var(--giad-font-size);
}

button,
input,
select,
textarea {
  font-size: inherit;
}

/* Shared focus language. Individual apps may refine the shape/layout. */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color: var(--giad-orange);
}

/* Shared native control accent. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--giad-orange);
}

/* Shared program section titles.
   !important lets this design-system rule override older inline app styles. */
.grp > h2,
.subhead,
.section-title,
.panel-title {
  color: var(--giad-orange) !important;
  font-weight: 800;
}

/* Shared program footer bar.
   LEFT = program name/version + one-line description.
   RIGHT = copyright + contact email icon.
   Individual apps keep their own #status/.foot element id, but should
   reuse these classes so every program's footer matches exactly. */
.status,
.foot {
  height: 25px;
  flex: none;
  margin: 0 8px 8px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--giad-faint);
  background: var(--giad-panel-dark);
  border: 1px solid var(--giad-line);
  border-radius: 5px;
  font-size: 10.5px;
  letter-spacing: .5px;
}

.giad-foot-left {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.giad-foot-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  white-space: nowrap;
}

.giad-mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--giad-faint);
  text-decoration: none;
}

.giad-mail:hover {
  color: var(--giad-orange);
}

.giad-mail svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* GIAD/OS · GIAD DEPOT identity mark, placed the same spot (top-left of the
   left toolbar) in every program window. */
.giad-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 10px;
  color: var(--giad-faint);
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.giad-brand img,
.giad-brand svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.giad-brand b {
  color: var(--giad-orange);
  font-weight: 800;
}