/* Graphite style kit: design tokens.
   Source = Orchestrator desktop app (Avalonia 12). Every value is copied from the code; see README.md for file:line.
   Avalonia writes colours as #AARRGGBB; here they are converted to CSS #RRGGBBAA (same numbers, alpha moved last).
   Values marked "inferred" are not defined in the app (README.md, "Inferred values").
   Light is the default. Dark applies with prefers-color-scheme: dark, unless <html data-theme="light">.
   Force a mode with <html data-theme="dark"> or data-theme="light". */

:root {
  color-scheme: light;

  /* ---------- colour: surfaces (GraphitePalette.axaml Light) ---------- */
  --g-app-bg: #FFFFFF;            /* window / main content background */
  --g-sidebar-bg: #F4F4F5;        /* left rail and universe sidebars */
  --g-panel-bg: #FFFFFF;          /* cards, segmented-control active segment */
  --g-code-bg: #F4F4F5;           /* item cards inside a card, code/preview boxes, messages */
  --g-field-bg: #FFFFFF;          /* text boxes, combo boxes, chip fields */

  /* ---------- colour: text ---------- */
  --g-text: #1C1C1E;              /* primary text */
  --g-muted: #6E6E73;             /* secondary text, labels, captions, quiet buttons */

  /* ---------- colour: accent (graphite in light, off-white in dark) ---------- */
  --g-accent: #2B2B2E;            /* primary button, checked box, focus ring, counter badge, number in a card */
  --g-accent-hover: #3D3D41;
  --g-accent-pressed: #1A1A1C;
  --g-accent-fg: #FFFFFF;         /* text/icon on accent */
  --g-accent-soft: #2B2B2E14;     /* chips, reason badges, inline banner, reply box */

  /* ---------- colour: lines + interaction overlays ---------- */
  --g-hair: #E4E4E7;              /* card border, hairlines */
  --g-window-border: #00000026;   /* window frame, dividers, drawer tab border, progress track */
  --g-field-border: #00000022;    /* input + outline-button border, item-card hover border */
  --g-field-border-hover: #00000038; /* hovered input border; switch track when off */
  --g-overlay-hover: #00000012;   /* hover fill of quiet/outline/tool buttons; segmented bar; source badge */
  --g-overlay-pressed: #00000020; /* pressed fill of quiet buttons */
  --g-row-hover: #EBEBED;         /* list row hover */
  --g-row-sel: #E2E2E5;           /* list row selected; active nav entry */

  /* ---------- colour: semantic ---------- */
  --g-good: #2E8B57;              /* success text, connection dot OK, "8 h planned" total */
  --g-good-soft: #2E8B571A;       /* state badge fill (Theme.axaml, Graphite does not override) */
  --g-danger: #C0392B;            /* errors, failed check, "high" badge (Theme.axaml) */
  --g-danger-soft: #C0392B1A;     /* error banner fill (Theme.axaml) */
  --g-warn: #E0A100;              /* = yellow action tier; the app has no separate warning token */
  --g-info: var(--g-accent-soft); /* inferred: the app has no info colour; info banners use AccentSoft */

  /* ---------- colour: fixed (same in both modes) ---------- */
  --g-tier-green: #2E8B57;        /* action tier pills, white text */
  --g-tier-yellow: #E0A100;
  --g-tier-red: #C0392B;
  --g-switch-on: #34C759;         /* toggle switch track when on */
  --g-switch-knob: #FFFFFF;
  --g-traffic-close: #FF5F57;     /* title-bar "traffic lights" */
  --g-traffic-min: #FEBC2E;
  --g-traffic-zoom: #28C840;
  --g-traffic-glyph: #00000090;
  --g-glow-border: #6E6E788C;     /* AI proposal block ("graphite glow") */
  --g-glow-shadow: #6E6E7873;

  /* chart colours: inferred, the app draws no charts (README.md) */
  --g-chart-1: var(--g-accent);
  --g-chart-2: var(--g-muted);
  --g-chart-3: var(--g-tier-green);
  --g-chart-4: var(--g-tier-yellow);
  --g-chart-5: var(--g-tier-red);
  --g-chart-grid: var(--g-hair);

  /* ---------- typography ---------- */
  --g-font-ui: "Segoe UI Variable", "Segoe UI", sans-serif;              /* app value */
  --g-font-ui-web: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Inter", sans-serif; /* inferred web fallback */
  --g-font-mono: "Cascadia Mono", Consolas, monospace;
  --g-weight-regular: 400;
  --g-weight-medium: 500;         /* all buttons */
  --g-weight-semibold: 600;       /* titles, labels, badges */
  --g-line-height: 1.33;          /* inferred: Avalonia uses the font's own line height (Segoe UI ~1.33) */
  --g-letter-spacing: 0;          /* the app never sets letter spacing */

  --g-fs-badge: 10.5px;           /* badges, counters, tier pills */
  --g-fs-label: 11px;             /* field/section labels (UPPERCASE text), captions, version line */
  --g-fs-meta: 11.5px;            /* timestamps, counts, status beside items */
  --g-fs-small: 12px;             /* subtitles under app name, small buttons, status line, mono code */
  --g-fs-body: 12.5px;            /* list rows, page subtitles, checkbox, segmented, body copy */
  --g-fs-button: 13px;            /* buttons, empty states, totals */
  --g-fs-input: 13.5px;           /* inputs, combo boxes, card titles */
  --g-fs-dialog-title: 14px;      /* modal title */
  --g-fs-app-title: 15.5px;       /* app / universe name at top of a sidebar */
  --g-fs-nav: 16px;               /* sidebar navigation entries, tab lists */
  --g-fs-section: 17px;           /* section title (detail pane, sub-pages) */
  --g-fs-page: 19px;              /* page title */
  --g-fs-display-mono: 22px;      /* big mono number (one-time code) */

  /* ---------- spacing (every gap/padding value the app uses) ---------- */
  --g-space-1: 1px;
  --g-space-2: 2px;
  --g-space-3: 3px;
  --g-space-4: 4px;
  --g-space-5: 5px;
  --g-space-6: 6px;
  --g-space-8: 8px;
  --g-space-10: 10px;
  --g-space-12: 12px;
  --g-space-14: 14px;
  --g-space-16: 16px;
  --g-space-18: 18px;
  --g-space-22: 22px;
  --g-space-28: 28px;
  --g-space-46: 46px;             /* top margin of every column: 40 px title bar + 6 */

  /* ---------- radii ---------- */
  --g-radius-badge: 6px;          /* badges, tier pills, result boxes */
  --g-radius-tool: 7px;           /* tool buttons, segments, suggestion rows */
  --g-radius-chip: 8px;           /* chips, dialog close button, steps, inline banner */
  --g-radius-button: 9px;         /* buttons, list rows, segmented bar, drawer tab */
  --g-radius-field: 10px;         /* inputs, combo, chip field, message bubbles, plan boxes */
  --g-radius-item: 12px;          /* item cards, window, modal */
  --g-radius-switch: 13px;
  --g-radius-card: 14px;          /* cards */
  --g-radius-round: 18px;         /* 36 px round icon button */

  /* ---------- borders ---------- */
  --g-border: 1px;
  --g-border-focus: 1.5px;        /* focused input, selected item card */

  /* ---------- shadows / elevation (Avalonia "x y blur spread colour") ---------- */
  --g-shadow-card: 0 1px 3px 0 #00000014;
  --g-shadow-segment: 0 1px 2px 0 #00000022;
  --g-shadow-knob: 0 1px 3px 0 #00000040;
  --g-shadow-window: 0 10px 30px 0 #00000040;   /* window and modal */
  --g-shadow-glow: 0 0 14px 1px var(--g-glow-shadow);

  /* ---------- blur / translucency ---------- */
  --g-blur: 0;                    /* none: no acrylic or backdrop blur anywhere */

  /* ---------- opacity ---------- */
  --g-opacity-disabled: 0.4;      /* disabled button */
  --g-opacity-disabled-switch: 0.45;
  --g-opacity-secondary: 0.75;    /* secondary text in modals */
  --g-opacity-note: 0.7;

  /* ---------- motion (Avalonia transitions are linear) ---------- */
  --g-dur-press: 70ms;            /* button press scale */
  --g-dur-toggle: 150ms;          /* switch track colour + knob slide */
  --g-ease: linear;
  --g-press-scale: 0.96;

  /* ---------- layout ---------- */
  --g-window-w: 1600px;           /* default window */
  --g-window-h: 900px;
  --g-window-min-w: 1200px;
  --g-window-min-h: 640px;
  --g-window-gutter: 12px;        /* transparent margin that holds the window shadow */
  --g-titlebar-h: 40px;
  --g-rail-w: 220px;              /* app navigation rail */
  --g-sidebar-w: 300px;           /* second sidebar inside a section */
  --g-list-w: 400px;              /* master list in master-detail; preview drawer */
  --g-page-pad-x: 28px;
  --g-page-pad-top: 46px;
  --g-page-pad-bottom: 14px;
  --g-sidebar-pad: 14px;
  --g-nav-icon: 28px;             /* rail icon box; 24 px in a section sidebar */
  --g-control-h: 34px;            /* inferred: 13 px button text x 1.33 + 2 x 8 px padding */
}

/* ---------- dark (GraphitePalette.axaml Dark) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --g-app-bg: #1C1C1E;
    --g-sidebar-bg: #161618;
    --g-panel-bg: #232326;
    --g-code-bg: #232326;
    --g-field-bg: #2A2A2D;
    --g-text: #EDEDED;
    --g-muted: #9A9A9F;
    --g-accent: #EDEDED;
    --g-accent-hover: #FFFFFF;
    --g-accent-pressed: #D4D4D6;
    --g-accent-fg: #1C1C1E;
    --g-accent-soft: #EDEDED24;
    --g-hair: #333336;
    --g-window-border: #FFFFFF3A;
    --g-field-border: #FFFFFF33;
    --g-field-border-hover: #FFFFFF55;
    --g-overlay-hover: #FFFFFF16;
    --g-overlay-pressed: #FFFFFF28;
    --g-row-hover: #2A2A2D;
    --g-row-sel: #36363A;
    --g-good: #5FBF7F;
    --g-good-soft: #5FBF7F26;
    --g-danger: #FF6B61;
    --g-danger-soft: #FF6B612E;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --g-app-bg: #1C1C1E;
  --g-sidebar-bg: #161618;
  --g-panel-bg: #232326;
  --g-code-bg: #232326;
  --g-field-bg: #2A2A2D;
  --g-text: #EDEDED;
  --g-muted: #9A9A9F;
  --g-accent: #EDEDED;
  --g-accent-hover: #FFFFFF;
  --g-accent-pressed: #D4D4D6;
  --g-accent-fg: #1C1C1E;
  --g-accent-soft: #EDEDED24;
  --g-hair: #333336;
  --g-window-border: #FFFFFF3A;
  --g-field-border: #FFFFFF33;
  --g-field-border-hover: #FFFFFF55;
  --g-overlay-hover: #FFFFFF16;
  --g-overlay-pressed: #FFFFFF28;
  --g-row-hover: #2A2A2D;
  --g-row-sel: #36363A;
  --g-good: #5FBF7F;
  --g-good-soft: #5FBF7F26;
  --g-danger: #FF6B61;
  --g-danger-soft: #FF6B612E;
}