/* ============================================================================
   GRAPHITE — the shared App Kit style sheet.  (Promoted to the kit 2026-07-09.)
   Authority: _craft/design-system/reference-design-taste-profile.md
   Values doc: _craft/design-system/reference-style-graphite.md

   A "style" supplies token VALUES + a few recipe overrides; it never changes
   component structure. Graphite skins the App Kit into a calm monochrome
   instrument. Load it AFTER ./kit/app-kit.css and BEFORE the app's own CSS:
     app-kit.css  ->  graphite.css  ->  <app>.css
   so its :root overrides beat the kit's defaults, and the app's own CSS (last)
   sets the ONE thing that varies per app: the accent.

   PER-APP ACCENT — one instrument, many accents. Every app is monochrome; the
   single spot of chroma is the app's OWN icon color, set in the app's CSS:
     :root { --kit-accent: <icon>; --kit-accent-hover: <lighter>;
             --kit-accent-2: <darker>; --kit-accent-soft: rgba(<icon>,.12);
             --kit-accent-line: rgba(<icon>,.34); }
   CoS = compass blue · Insights = violet-slate · Home Life = emerald ·
   PawPaw = honey. The default below is a neutral blue; apps override it.

   THE FIVE MOVES (taste profile, Tier 1):
     1. Monochrome-first — achromatic near-black canvas, white/gray ink.
     2. Color = attention, never classification — one accent (the app's icon
        color), used only for identity + the one thing that needs the eye. No
        yellow/red status colors: state is read structurally (position + label).
     3. Subtle tonal depth — lit-from-above surfaces + a soft resting shadow +
        a hairline top highlight. Never flat, never decorated (no bg graphics).
     4. Bigger type — generous headline + readable body, more air than a cockpit.
     5. One rounded-rectangle family — pills retired for controls.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKEN VALUES  (override the kit's Editorial Blue :root)
   --------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Surfaces — a neutral graphite ramp (whisper-cool, NOT blue-navy). Each step
     lighter = physically higher (lit from above). */
  --kit-bg:        #0c0d10;   /* near-black canvas */
  --kit-nav:       #0f1013;
  --kit-surface:   #16181c;   /* base card/panel */
  --kit-surface-2: #1c1f24;   /* raised */
  --kit-surface-3: #24272e;   /* highest */
  --kit-field:     #101114;   /* inset field (darker than surface) */

  /* Ink — neutral white → gray, no color cast */
  --kit-ink:       #eceef2;
  --kit-soft:      #b4b9c3;
  --kit-muted:     #8d93a0;
  --kit-meta:      #6f7581;
  --kit-on-accent: #0b0d11;

  /* Lines — neutral hairlines; `edge` brightens raised edges */
  --kit-line:        #262930;
  --kit-line-strong: #363a43;
  --kit-edge:        #414652;

  /* Accent — DEFAULT (neutral blue). Each app overrides these five with its own
     icon color in its own CSS (loads last). The single spot of chroma on a
     monochrome surface: identity (the icon lockup) + attention (the one thing
     that needs you now). */
  --kit-accent:       #5b8cff;
  --kit-accent-hover: #83a6ff;
  --kit-accent-2:     #35528f;              /* identity-tile depth */
  --kit-accent-soft:  rgba(91, 140, 255, .12);
  --kit-accent-line:  rgba(91, 140, 255, .34);

  /* Status tokens — DECOLORIZED. Color never classifies (the keystone rule), so
     warn/ok/danger are neutral: any component still referencing them renders
     monochrome instead of amber/green/red. Genuine attention is re-introduced as
     the ACCENT only where it's earned. The honesty/staleness STATES are kept —
     expressed structurally below, not by hue. */
  --kit-warn:    #b4b9c3;   /* was amber  → neutral soft ink */
  --kit-ok:      #b4b9c3;   /* was green  → neutral soft ink */
  --kit-ok-soft: #1c1f24;   /* neutral surface, not green wash */
  --kit-danger:  #c9c1bf;   /* was red    → warm-neutral (a hair off the grays) */

  /* State token roles — honesty over liveliness. A stale/dormant surface RECEDES
     (dimmer ink + dashed hairline), never warns. */
  --kit-stale:   #8d93a0;
  --kit-dormant: #6f7581;
  --kit-silent:  #55606f;

  /* Shape — one rounded-rectangle family; pills retired. Flipping --kit-pill to a
     small radius retires every control pill app-wide (buttons, tabs, chips,
     progress) without editing each rule. */
  --kit-radius:    10px;   /* cards / general */
  --kit-radius-sm: 7px;    /* controls, inputs, small */
  --kit-radius-lg: 14px;   /* panels, large */
  --kit-pill:      8px;    /* RETIRED as a pill — now a rounded-rect radius */

  /* Elevation — resting depth from light, kept subtle. A contact shadow + an
     ambient shadow + a top hairline highlight; the recipe rides on the cards. */
  --kit-highlight:     rgba(255, 255, 255, .05);
  --kit-shadow-panel:  0 1px 2px rgba(0, 0, 0, .40);
  --kit-shadow-raise:  0 10px 26px -12px rgba(0, 0, 0, .60);
  --kit-shadow:        0 14px 40px -14px rgba(0, 0, 0, .62);  /* hover lift */
  --kit-shadow-soft:   0 6px 18px -8px rgba(0, 0, 0, .48);

  /* Type — the reserved serif register: the deepest long-read only, never
     everyday chrome. Self-hosted trio kept; serif is a system stack for now. */
  --kit-font-editorial: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

/* Density-scoped tokens must beat the kit's .kit-app.kit-density-cockpit block
   (equal specificity — graphite loads later, so it wins). */
.kit-app.kit-density-cockpit {
  --kit-gap: 13px;
  --kit-app-pad: 20px;
  --kit-radius: 10px;
}

/* ---------------------------------------------------------------------------
   2. TYPE SCALE  — bigger across the reading surfaces. Mono micro-labels stay
   small (metadata); headlines + body grow.
   --------------------------------------------------------------------------- */
.kit-app { font-size: 15.5px; }

.kit-title { font-weight: 650; letter-spacing: -.02em; }
.kit-panel-title, .kit-card-title { font-size: 17px; font-weight: 650; }
.kit-metric-value { font-size: 28px; font-weight: 650; }
.kit-row-title { font-size: 15.5px; }
.kit-subtitle, .kit-copy, .kit-row-copy { font-size: 14.5px; }

/* ---------------------------------------------------------------------------
   3. DEPTH  — resting elevation on cards/panels (lit from above).
   --------------------------------------------------------------------------- */
.kit-card,
.kit-panel,
.kit-metric {
  border-color: var(--kit-edge);
  background-color: var(--kit-surface);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 44%);
  box-shadow:
    inset 0 1px 0 var(--kit-highlight),
    var(--kit-shadow-panel),
    var(--kit-shadow-raise);
}

/* Link-cards keep the motion reward, but lift with light — accent border only on
   the genuine act (a link IS an action). */
a.kit-card:hover {
  transform: translateY(-2px);
  border-color: var(--kit-accent-line);
  box-shadow:
    inset 0 1px 0 var(--kit-highlight),
    var(--kit-shadow);
}

/* ---------------------------------------------------------------------------
   4. CONTROLS  — rounded-rect (pills retired), monochrome by default. The
   primary button is the ONE place the accent acts (a button is an action).
   --------------------------------------------------------------------------- */
.kit-btn { border-radius: var(--kit-radius-sm); letter-spacing: .02em; }

.kit-btn.secondary, .kit-btn.is-secondary {
  background: var(--kit-surface-2);
  border-color: var(--kit-edge);
  color: var(--kit-soft);
}
.kit-btn.secondary:hover, .kit-btn.is-secondary:hover {
  background: var(--kit-surface-3);
  border-color: var(--kit-line-strong);
  color: var(--kit-ink);
}

/* Chips — monochrome tonal by default (rounded-rect). Character is read by the
   LABEL, not a hue. */
.kit-chip, .kit-count {
  border-radius: var(--kit-radius-sm);
  color: var(--kit-soft);
  background: var(--kit-surface-2);
  border-color: var(--kit-edge);
}
.kit-chip.is-ok, .kit-chip.is-recorded,
.kit-chip.is-warn, .kit-chip.is-danger {
  color: var(--kit-soft);
  background: var(--kit-surface-2);
  border-color: var(--kit-edge);
}

/* Status dots — no red/amber/green classification. Neutral by default; the ONE
   that needs the eye takes the accent. */
.kit-status-dot,
.kit-status-dot.is-warn,
.kit-status-dot.is-ok,
.kit-status-dot.is-danger {
  background: var(--kit-line-strong);
  box-shadow: none;
}
.kit-status-dot.is-attn {
  background: var(--kit-accent);
  box-shadow: 0 0 0 3px var(--kit-accent-soft);
}

/* Tabs (pill-mode fallback) — rounded-rect; active = TONAL fill + neutral, NOT
   an accent wash. Active is classification, so it must not wear the accent. */
.kit-tab { border-radius: var(--kit-radius-sm); border-color: var(--kit-edge); }
.kit-tab.is-active, .kit-tab[aria-selected="true"] {
  color: var(--kit-ink);
  background: var(--kit-surface-3);
  border-color: var(--kit-line-strong);
}

/* Nav-item active (kit rail) — tonal, inset bar neutral-bright (not accent). */
.kit-nav-item.is-active,
.kit-nav-item[aria-current="page"] {
  background: var(--kit-surface-3);
  border-color: var(--kit-edge);
  box-shadow: inset 2px 0 0 var(--kit-line-strong);
}

/* Kickers/eyebrows — return to meta ink; the accent is spent only on the hero +
   the one thing that needs attention, never as decorative color. */
.kit-eyebrow { color: var(--kit-meta); }

/* Inputs — rounded-rect; focus ring stays the accent (focus IS attention). */
.kit-input, .kit-field input, .kit-field select, .kit-field textarea {
  border-radius: var(--kit-radius-sm);
  border-color: var(--kit-edge);
}

/* Progress — the fill is a single accent, not an accent→green gradient. */
.kit-progress > span, .kit-progress-bar {
  background: var(--kit-accent);
}

/* Empty/dashed states — neutral dashed hairline (honesty: an empty surface reads
   as quiet, not alarmed). */
.kit-empty, .kit-state {
  background: rgba(255, 255, 255, .015);
  border-color: var(--kit-line-strong);
}