/* ============================================================
   INSTITUT CIVRA — DESIGN SYSTEM "TRIBUNE" V2.1.1 · design tokens
   ------------------------------------------------------------
   Provenance: Claude Design project "Institut Civra V2 directions",
   handoff/tokens.css of the audited v2.1.1 bundle (D1-T0 mapping),
   ported IN FULL for D1-T1 — this file replaces the partial P10-T1
   import and is now the single Tribune foundation layer.
   Additions on top of the bundle, each labelled "Civra extension":
     - the ochre activity/automatic-proposal state tokens (P10-T1,
       consumed by the voice review surfaces and their guard);
     - the composite type roles (--civ-font-role-…) required by the
       existing font: shorthand consumers (D1-T0 mapping, section 6.2);
     - the 17px respondent body minimum (a11y checklist v2.1) and the
       1.3 heading leading the composite roles need.
   tokens.css (V1) is a deprecated alias layer resolving into this
   file and must precede nothing: link tribune-tokens.css first.
   Namespace rule (pinned by the voice-surface guards): ONLY --civ-
   and --_civ- custom properties may be declared here.
   Convention: --civ-<category>-<role>[-<variant>]. No raw hex/px in
   views — always reference a semantic token. No remote font is ever
   loaded; every family stack falls back to system-ui or ui-monospace
   (fonts.css declares the self-hosted faces).
   ============================================================ */

:root {
  /* ---------- PRIMITIVES (internal use, never referenced in views) ---------- */
  --_civ-ink-900: #14110f;   /* Tribune ink */
  --_civ-ink-700: #3a352f;
  --_civ-ink-600: #4d463d;
  --_civ-ink-500: #6b6357;
  --_civ-warm-200: #d4ccbc;
  --_civ-warm-150: #e5dfd3;
  --_civ-warm-100: #f2efe8;
  --_civ-warm-050: #e8e6e0;
  --_civ-white:   #ffffff;

  --_civ-teal-700: #0b5b53;  /* Tribune green */
  --_civ-teal-600: #0e6f65;
  --_civ-teal-500: #3d7d76;
  --_civ-teal-400: #6fa39d;
  --_civ-teal-300: #a9c8c4;
  --_civ-teal-tint: #dff0ed;
  --_civ-teal-tint-border: #c2ded9;

  --_civ-ochre-600: #b8791f; /* dark ochre (text on light) */
  --_civ-ochre-500: #d98a1f; /* ochre */
  --_civ-ochre-tint: #fbefd8;
  --_civ-ochre-tint-border: #f0dcae;
  --_civ-ochre-on-dark: #f0dcae;

  --_civ-red-600:   #a3242b; /* error */
  --_civ-red-tint:  #f7e4e3;
  --_civ-green-600: #1f6b46; /* success */
  --_civ-green-tint:#e2f0e8;
  --_civ-green-tint-border: #c4e2d1;

  /* Civra extension (D1 device pass): the error and success hues ON THE INK
     SURFACE. The bundle ships the same pattern for two families only —
     `--_civ-ochre-on-dark` and `--_civ-on-dark-teal` — and stops there,
     because its own voice frames carry no error or success state. Ours do.
     The dark-surface text roles they feed are pinned by ContrastGuardTest;
     both land at the level the existing on-dark tints already hold (muted
     10.45:1, teal 10.52:1), which is why they read as the same family and
     not as two brighter strangers. Their light-surface counterparts are
     untouched: nothing outside the oral mode moves. */
  --_civ-red-300:   #f0b4b0; /* error on ink — 10.62:1 on ink-900 */
  --_civ-green-300: #96cdb0; /* success on ink — 10.44:1 on ink-900 */

  /* Civra extension (D1-T4): warm ambers for the WARNING role. The bundle
     has no warning hue, and the Tribune ochre is not AA at small sizes —
     these three values are AA-proven and were held by the V1 alias layer,
     which documented exactly that. They move here because the back-office
     now reads the foundation directly. */
  --_civ-amber-700: #7f5300;
  --_civ-amber-tint: #fbf1dc;
  --_civ-amber-tint-border: #f0dcae;

  /* Civra extension (D1-T4): the synthetic-data marker. Deliberately NOT a
     status hue — synthetic data is not a state of the study, and reusing a
     status colour would say it is. No Tribune equivalent exists; the hatch
     pattern and the label carry the meaning, never the colour alone. */
  --_civ-violet-600: #4f4a63;
  --_civ-violet-tint: #efedf4;
  --_civ-violet-tint-border: #d9d4e6;

  /* text tints on the ink surface */
  --_civ-on-dark-strong: #ffffff;
  --_civ-on-dark-muted:  #c9c0b2;
  --_civ-on-dark-teal:   #a9c8c4;

  /* ============================================================
     TEXT
     ============================================================ */
  --civ-color-text-default:   var(--_civ-ink-900);  /* 16.4:1 on surface-page — contrast-table.json */
  --civ-color-text-secondary: var(--_civ-ink-600);  /* 8.1:1 on surface-page */
  --civ-color-text-muted:     var(--_civ-ink-500);  /* 5.2:1 — metadata >=16px only, never body copy */
  --civ-color-text-invert:    var(--_civ-white);    /* 18.8:1 on surface-invert */
  --civ-color-text-on-dark:   var(--_civ-on-dark-muted);   /* secondary on ink, 10.4:1 */
  --civ-color-text-link:      var(--_civ-teal-700); /* 8.0:1 on card */
  --civ-color-text-data:      var(--_civ-ochre-600);/* data on light — LARGE >=24px/bold only, 3.6:1 */
  --civ-color-text-data-dark: var(--_civ-ochre-500);/* data on ink — 6.8:1 */

  /* ============================================================
     SURFACES
     ============================================================ */
  --civ-color-surface-app:    var(--_civ-warm-050); /* application canvas */
  --civ-color-surface-page:   var(--_civ-warm-100); /* warm page background */
  --civ-color-surface-card:   var(--_civ-white);
  --civ-color-surface-sunken: var(--_civ-warm-100); /* rails, bar tracks */
  --civ-color-surface-invert: var(--_civ-ink-900);  /* headers, heroes, oral mode */

  /* ============================================================
     ACTIONS
     ============================================================ */
  --civ-color-action-primary-bg:      var(--_civ-ink-900);  /* main CTA = ink */
  --civ-color-action-primary-text:    var(--_civ-white);
  --civ-color-action-primary-hover:   var(--_civ-ink-700);
  --civ-color-action-secondary-bg:    transparent;
  --civ-color-action-secondary-text:  var(--_civ-ink-900);
  --civ-color-action-secondary-border:var(--_civ-ink-900);
  --civ-color-action-emphasis-bg:     var(--_civ-ochre-500);/* final-submit emphasis — rare use */
  --civ-color-action-emphasis-text:   var(--_civ-ink-900);  /* ink on ochre: 6.8:1 */
  --civ-color-action-on-invert-bg:    var(--_civ-white);    /* button on ink surface */
  --civ-color-action-on-invert-text:  var(--_civ-ink-900);

  /* ============================================================
     BORDERS
     ============================================================ */
  --civ-color-border-subtle:  var(--_civ-warm-150);
  --civ-color-border-default: var(--_civ-warm-200);
  --civ-color-border-strong:  var(--_civ-ink-900);  /* editorial rule */
  --civ-color-border-invert:  rgba(255,255,255,.16);
  /* Civra extension (D1-T4): the modal scrim. The bundle defines no overlay,
     and the back-office was dimming a warm page behind a COOL near-black
     inherited from the retired V1 direction. The Tribune ink at half opacity
     dims the same page without changing its temperature. */
  --civ-color-scrim:          rgba(20,17,15,.5);

  /* ============================================================
     FOCUS (WCAG 2.2 — ring + offset, never carried by color alone)
     ============================================================ */
  --civ-color-focus-ring:     var(--_civ-teal-700);
  --civ-color-focus-ring-dark:var(--_civ-ochre-500); /* on ink surfaces */
  --civ-focus-width:          3px;
  --civ-focus-offset:         2px;
  --civ-focus-shadow:         0 0 0 var(--civ-focus-offset) var(--civ-color-surface-card), 0 0 0 calc(var(--civ-focus-offset) + var(--civ-focus-width)) var(--civ-color-focus-ring);

  /* ============================================================
     STATES
     ============================================================ */
  --civ-color-state-selected-bg:     var(--_civ-teal-700);
  --civ-color-state-selected-text:   var(--_civ-white);
  --civ-color-state-selected-border: var(--_civ-teal-700);
  --civ-color-state-success-text:    var(--_civ-green-600);  /* real confirmation ONLY */
  --civ-color-state-success-bg:      var(--_civ-green-tint);
  --civ-color-state-error-text:      var(--_civ-red-600);
  --civ-color-state-error-bg:        var(--_civ-red-tint);
  --civ-color-state-error-border:    var(--_civ-red-600);
  --civ-color-state-live-bg:         var(--_civ-teal-tint);   /* "collecting" pill */
  --civ-color-state-live-text:       var(--_civ-teal-700);
  --civ-color-state-disabled-opacity: .45;
  /* Civra extension (D1-T4): the three roles the back-office needs and the
     bundle does not define — the success and live borders (error already
     has one), and the whole warning family. Icon and label always
     accompany: no status is ever carried by colour alone. */
  --civ-color-state-success-border:  var(--_civ-green-tint-border);
  --civ-color-state-live-border:     var(--_civ-teal-tint-border);
  --civ-color-state-warning-text:    var(--_civ-amber-700);
  --civ-color-state-warning-bg:      var(--_civ-amber-tint);
  --civ-color-state-warning-border:  var(--_civ-amber-tint-border);

  /* Civra extension (D1-T4): synthetic-data marker, not a status. */
  --civ-color-marker-synthetic-text:   var(--_civ-violet-600);
  --civ-color-marker-synthetic-bg:     var(--_civ-violet-tint);
  --civ-color-marker-synthetic-border: var(--_civ-violet-tint-border);
  /* Civra extension (P10-T1): activity + automatic proposal, ochre.
     Consumed by the voice review surfaces; pinned by their guard. */
  --civ-color-state-activity:        var(--_civ-ochre-500);
  --civ-color-state-activity-text:   var(--_civ-ochre-600);
  --civ-color-state-activity-tint:   var(--_civ-ochre-tint);
  --civ-color-state-activity-border: var(--_civ-ochre-tint-border);

  /* Civra extension (D1 device pass): the same four states, said ON THE INK
     SURFACE. Measured against the ink, THREE of the light-surface roles above
     are unreadable there — error 2.55:1, success 2.91:1, live 2.36:1, all
     under the 3:1 floor that even non-text has to clear. The fourth is not:
     activity-text lands at 5.19:1 and would technically pass. It gets an
     on-dark role anyway, because a dark ochre on ink reads as tarnished
     rather than as a state, and because the foundation already holds the
     lighter value this family is meant to use on the ink.
     Until now the oral mode dodged the question by keeping those notes on
     light insets; the owner ruled on 2026-07-28 that the oral tunnel carries
     no light rectangle. Colour still never carries a state alone — icon and
     label do, and the `_status_note.html.twig` tone map is unchanged. */
  --civ-color-state-error-on-dark:    var(--_civ-red-300);
  --civ-color-state-success-on-dark:  var(--_civ-green-300);
  --civ-color-state-live-on-dark:     var(--_civ-on-dark-teal);
  --civ-color-state-activity-on-dark: var(--_civ-ochre-on-dark);

  /* ============================================================
     SYNTHETIC DATA / CHARTS
     Sequential ramp: leader in ochre, rest in a green gradient.
     Ochre is never the only semantic distinction.
     ============================================================ */
  --civ-color-chart-lead:   var(--_civ-ochre-500);
  --civ-color-chart-1:      var(--_civ-teal-700);
  --civ-color-chart-2:      var(--_civ-teal-500);
  --civ-color-chart-3:      var(--_civ-teal-400);
  --civ-color-chart-4:      var(--_civ-teal-300);
  --civ-color-chart-track:  var(--_civ-warm-100);
  --civ-color-chart-axis:   var(--_civ-ink-500);

  /* ============================================================
     SPACING — 4px scale
     ============================================================ */
  --civ-space-1: 4px;
  --civ-space-2: 8px;
  --civ-space-3: 12px;
  --civ-space-4: 16px;
  --civ-space-5: 20px;
  --civ-space-6: 24px;
  --civ-space-8: 32px;
  --civ-space-10: 40px;
  --civ-space-12: 48px;
  --civ-space-16: 64px;

  /* ============================================================
     RADII
     ============================================================ */
  --civ-radius-xs:   4px;   /* data pills, tags */
  --civ-radius-sm:   6px;   /* buttons, fields (frank editorial angle) */
  --civ-radius-md:   10px;
  --civ-radius-lg:   14px;  /* cards */
  --civ-radius-xl:   16px;  /* heroes */
  --civ-radius-pill: 999px;
  --civ-radius-device: 38px;/* mockup bezel — never on production surfaces */

  /* ============================================================
     SHADOWS — warm, discreet
     ============================================================ */
  --civ-shadow-card:     0 1px 2px rgba(20,17,15,.04), 0 2px 8px rgba(20,17,15,.05);
  --civ-shadow-raised:   0 4px 14px rgba(11,91,83,.18);   /* selected option */
  --civ-shadow-overlay:  0 22px 50px rgba(20,17,15,.20);  /* modals, panels */
  --civ-shadow-none:     none;

  /* ============================================================
     TYPOGRAPHY — families, weights, sizes
     ============================================================ */
  --civ-font-display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  --civ-font-heading: 'Archivo', system-ui, sans-serif;
  --civ-font-body:    'Public Sans', system-ui, sans-serif;
  --civ-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --civ-weight-regular: 400;
  --civ-weight-medium:  500;
  --civ-weight-semibold:600;
  --civ-weight-bold:    700;
  --civ-weight-black:   800;

  --civ-text-hero:    clamp(48px, 9vw, 86px); /* heroised data */
  --civ-text-display: clamp(30px, 6vw, 44px);
  --civ-text-h1:      27px;
  --civ-text-h2:      23px;
  --civ-text-h3:      19px;
  --civ-text-body-lg: 18px;
  --civ-text-body:    16px;
  --civ-text-sm:      14px;
  --civ-text-xs:      13px;
  --civ-text-kicker:  12px;
  /* Civra extensions: respondent minimums (a11y checklist v2.1 — body
     >=17px, important help/labels/actions >=16px on respondent product
     screens; the 14px --civ-text-sm is below that floor by design and
     stays for non-respondent chrome only). */
  --civ-text-respondent-body: 17px;
  --civ-text-respondent-sm: 16px;
  --civ-tracking-kicker: .1em;
  --civ-tracking-caps:   .04em;
  --civ-leading-tight:   1.02;
  --civ-leading-snug:    1.15;
  --civ-leading-body:    1.55;
  /* Civra extension: multi-line functional headings and labels. */
  --civ-leading-heading: 1.3;

  /* ============================================================
     TYPE ROLES — composite font shorthands (Civra extension,
     D1-T0 mapping section 6.2: the existing stylesheet consumes
     font: shorthands; the bundle only ships families and sizes).
     letter-spacing cannot ride a font shorthand: kicker and caps
     consumers pair their role with --civ-tracking-….
     ============================================================ */
  --civ-font-role-hero:    var(--civ-weight-black) var(--civ-text-hero)/var(--civ-leading-tight) var(--civ-font-display);
  --civ-font-role-display: var(--civ-weight-black) var(--civ-text-display)/var(--civ-leading-tight) var(--civ-font-display);
  --civ-font-role-h1:      var(--civ-weight-bold) var(--civ-text-h1)/var(--civ-leading-snug) var(--civ-font-heading);
  --civ-font-role-h2:      var(--civ-weight-bold) var(--civ-text-h2)/var(--civ-leading-snug) var(--civ-font-heading);
  --civ-font-role-h3:      var(--civ-weight-semibold) var(--civ-text-h3)/var(--civ-leading-heading) var(--civ-font-heading);
  --civ-font-role-body-lg: var(--civ-weight-regular) var(--civ-text-body-lg)/var(--civ-leading-body) var(--civ-font-body);
  --civ-font-role-body:    var(--civ-weight-regular) var(--civ-text-body)/var(--civ-leading-body) var(--civ-font-body);
  --civ-font-role-respondent-body: var(--civ-weight-regular) var(--civ-text-respondent-body)/var(--civ-leading-body) var(--civ-font-body);
  --civ-font-role-body-sm: var(--civ-weight-regular) var(--civ-text-sm)/var(--civ-leading-body) var(--civ-font-body);
  --civ-font-role-label:   var(--civ-weight-semibold) var(--civ-text-sm)/var(--civ-leading-heading) var(--civ-font-body);
  --civ-font-role-caption: var(--civ-weight-regular) var(--civ-text-xs)/var(--civ-leading-body) var(--civ-font-body);
  --civ-font-role-kicker:  var(--civ-weight-bold) var(--civ-text-kicker)/var(--civ-leading-heading) var(--civ-font-heading);
  --civ-font-role-mono:    var(--civ-weight-medium) var(--civ-text-sm)/var(--civ-leading-body) var(--civ-font-mono);
  --civ-font-role-mono-s:  var(--civ-weight-medium) var(--civ-text-xs)/var(--civ-leading-body) var(--civ-font-mono);
  /* Civra extensions (D1-T4): the two faces the design system gives its
     controls and its column headers, which the shared components had never
     been given. Both speak the titling family in capitals — pair them with
     --civ-tracking-caps, letter-spacing cannot ride a font shorthand.
     --civ-font-role-action is the ONE button face of the product: the
     respondent sheet says the same thing at the respondent floor
     (--r-font-btn), and a single component may not wear two faces.
     --civ-text-kicker (12px) is deliberately NOT used by either: the D1-T0
     mapping section 6.1 forbids useful information at 11-12px, and a column
     header and a button label are both useful information. */
  --civ-font-role-action:  var(--civ-weight-bold) var(--civ-text-sm)/var(--civ-leading-heading) var(--civ-font-heading);
  --civ-font-role-caps:    var(--civ-weight-black) var(--civ-text-xs)/var(--civ-leading-heading) var(--civ-font-heading);

  /* ============================================================
     MOTION — functional only
     ============================================================ */
  --civ-motion-fast:   120ms;
  --civ-motion-base:   200ms;
  --civ-motion-slow:   320ms;
  --civ-motion-ease:   cubic-bezier(.2, 0, 0, 1);
  --civ-motion-ease-out: cubic-bezier(0, 0, .2, 1);

  /* ============================================================
     BREAKPOINTS (reference — consumed in @media rules)
     ============================================================ */
  --civ-bp-xs: 320px;
  --civ-bp-sm: 390px;
  --civ-bp-md: 768px;
  --civ-bp-lg: 1024px;
  --civ-bp-xl: 1440px;

  /* ============================================================
     Z-INDEX
     ============================================================ */
  --civ-z-base:    0;
  --civ-z-sticky:  100;
  --civ-z-header:  200;
  --civ-z-tabbar:  200;
  --civ-z-overlay: 900;
  --civ-z-modal:   1000;
  --civ-z-toast:   1100;

  /* ============================================================
     TOUCH TARGETS
     ============================================================ */
  --civ-target-min:     44px;  /* WCAG 2.2 absolute minimum */
  --civ-target-comfort: 56px;  /* primary buttons, options */
}

/* Every duration collapses to zero under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --civ-motion-fast: 0ms;
    --civ-motion-base: 0ms;
    --civ-motion-slow: 0ms;
  }
}