/**
 * JG Client Portal — Design Tokens
 * ---------------------------------------------------------------------------
 * Instance of the studio token grammar:
 *   project-specific-guidelines/visual/tokens-spec.md
 * Naming: spec dot-form (color.text.default) → CSS kebab (--color-text-default).
 *
 * Tier order (never skip a level):
 *   primitive / brand  ->  semantic  ->  component
 * Components reference semantics. Semantics reference brand or primitives.
 * DO NOT hardcode raw values in styles.css — always reference a token.
 *
 * Retrofit journal + value-unification log:
 *   project-specific-guidelines/visual/tokens-notes.md
 */

:root {
  /* =========================================================================
     1. PRIMITIVE TIER — never consumed directly
     ========================================================================= */

  --primitive-neutral-0: #FFFFFF;

  /* Functional success — status colors route through primitives, never brand */
  --primitive-green-100: #EAF3DE;
  --primitive-green-700: #3B6D11;

  /* =========================================================================
     2. BRAND TIER — JG warm ink/bone ramp, never consumed directly
     The studio's warm neutrals: paper at the light end, chrome ink at the dark.
     ========================================================================= */

  --brand-ink-warm-50:  #F4F3F0;
  --brand-ink-warm-200: #E6E4DE;
  --brand-ink-warm-400: #B7B3AA;
  --brand-ink-warm-500: #8A8880;
  --brand-ink-warm-700: #55524C;
  --brand-ink-warm-800: #3B3A37;
  --brand-ink-warm-950: #171717;
  --brand-ink-warm-975: #121212;

  /* =========================================================================
     3. SEMANTIC TIER — what styles.css consumes
     ========================================================================= */

  /* color.surface.* */
  --color-surface-canvas:  var(--brand-ink-warm-50);
  --color-surface-raised:  var(--primitive-neutral-0);
  --color-surface-inverse: var(--brand-ink-warm-975);
  --color-surface-inverse-hover:  rgba(255,255,255,0.05);
  --color-surface-inverse-active: rgba(255,255,255,0.07);
  --color-surface-tint: rgba(23,23,23,0.04);
  --color-surface-sunken: var(--brand-ink-warm-200); /* recessed well inside a raised container (minted 2026-08-06: deliverable-card exploration band) */

  /* color.text.* */
  --color-text-default: var(--brand-ink-warm-800);
  --color-text-strong:  var(--brand-ink-warm-950);
  --color-text-subdued: var(--brand-ink-warm-500);
  --color-text-quote:   var(--brand-ink-warm-700);
  --color-text-link:    var(--brand-ink-warm-950);
  --color-text-inverse:          var(--primitive-neutral-0);
  --color-text-inverse-link:     rgba(255,255,255,0.75);
  --color-text-inverse-subdued:  rgba(255,255,255,0.55);
  --color-text-inverse-subtle:   rgba(255,255,255,0.40);
  --color-text-inverse-faint:    rgba(255,255,255,0.25);

  /* color.accent.* — brand-identity roles; the ONLY place brand is consumed as accent */
  --color-accent-default: var(--brand-ink-warm-950);
  --color-accent-text:    var(--brand-ink-warm-950);

  /* color.border.* */
  --color-border-default: var(--brand-ink-warm-200);
  --color-border-strong:  var(--brand-ink-warm-950);
  --color-border-marker:  var(--brand-ink-warm-400);
  --color-border-inverse-subtle: rgba(255,255,255,0.25);
  --color-border-inverse-strong: var(--primitive-neutral-0);

  /* color.action.* */
  --color-action-primary-bg: var(--brand-ink-warm-950);
  --color-action-primary-fg: var(--primitive-neutral-0);

  /* color.status.* — reference primitives, NEVER brand */
  --color-status-success-fg:   var(--primitive-green-700);
  --color-status-success-bg:   var(--primitive-green-100);
  --color-status-success-icon: var(--primitive-green-700);

  /* Minted 2026-08-09 — SETTLEMENT PENDING: a financial row that has been sent
     and not yet settled. The system had exactly one status pair (success) and no
     word for "open", so an unpaid invoice rendered unstyled and read as if it
     were finished. Deliberately NOT a warning or error role: the portal's laws
     bar overdue badges, so this is calm and informational, never alarming.
     Aliased to the ink ramp rather than a new hue — introducing a second colour
     is a brand decision, not a component one. */
  --color-status-open-fg:      var(--brand-ink-warm-700);
  --color-status-open-bg:      var(--brand-ink-warm-50);
  --color-status-open-border:  var(--brand-ink-warm-400);

  /* =========================================================================
     type.* — role bundles (family / size / weight / line-height / spacing)
     ========================================================================= */

  --type-family-display: 'Jost', sans-serif;
  --type-family-sans:    'Inter', sans-serif;

  --type-weight-regular:  400;
  --type-weight-medium:   500;
  --type-weight-semibold: 600;

  /* type.heading.title — page titles */
  --type-heading-title-size: 30px;
  /* type.heading.section — major divisions (dashboard sections, phase cards) */
  --type-heading-section-size: 22px;
  /* type.heading.component — titles inside contained objects (tiles, rows, action cards) */
  --type-heading-component-size: 16.5px;

  /* type.body.default — paragraph copy */
  --type-body-default-size: 15px;
  --type-body-default-leading: 1.7;
  /* type.body.compact — card blurbs, contract quotes, sublines, dense copy */
  --type-body-compact-size: 13.5px;
  --type-body-compact-leading: 1.6;

  /* type.label.default — nav, buttons, controls */
  --type-label-default-size: 14px;
  /* type.label.compact — chips, pills, statuses */
  --type-label-compact-size: 12.5px;

  /* type.meta — dates, IDs, secondary facts */
  --type-meta-size: 12.5px;

  /* type.legal — chrome fine print (copyright, footer line, portal label) */
  --type-legal-size: 10.5px;
  --type-legal-tracking: 0.12em;

  /* type.metric.default — money and figures; tabular */
  --type-metric-default-size: 16px;

  /* =========================================================================
     space.* (4px grid) and radius.*
     ========================================================================= */

  --space-100: 4px;
  --space-200: 8px;
  --space-300: 12px;
  --space-400: 16px;
  --space-500: 20px;
  --space-600: 24px;
  --space-700: 28px;
  --space-800: 32px;
  --space-1000: 40px;
  --space-1100: 44px;

  /* elevation.* */
  --elevation-raised-hover: 0 10px 30px rgba(23,23,23,0.08);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
}