/* ============================================================
   Calculation Hub — UI Atoms (HUB CORE)
   Governance v6 — Institutional Token Authority
   ------------------------------------------------------------
   Owns:
   - Brand tokens
   - Surface tokens
   - Border discipline
   - Typography scale
   - Radius scale
   - Motion tokens
   - Panel geometry tokens
   - Input primitives
   - Button primitives
   - Copy states

   Does NOT own:
   - Layout grid
   - Panel shell styling
   - Tool internals
   ============================================================ */


/* ============================================================
   TOKEN SYSTEM — AUTHORITATIVE
   ============================================================ */
:root {

  /* ----------------------------------------------------------
     Typography System (Locked Scale)
  ---------------------------------------------------------- */
  --pp-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pp-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --pp-h1-size: 32px;
  --pp-h1-weight: 700;

  --pp-h2-size: 22px;
  --pp-h2-weight: 600;

  --pp-h3-size: 18px;
  --pp-h3-weight: 600;

  --pp-body-size: 15px;
  --pp-body-weight: 400;

  --pp-small-size: 13px;
  --pp-small-weight: 400;

  /* Result authority */
  --pp-numeric-size: 32px;
  --pp-numeric-weight: 800;


  /* ----------------------------------------------------------
     Institutional Brand
     Calm, analytical, premium
  ---------------------------------------------------------- */
  --pp-brand-900: #162b63;
  --pp-brand-700: #1d3878;
  --pp-brand-500: #3557a6;
  --pp-brand-100: rgba(22, 43, 99, 0.10);


  /* ----------------------------------------------------------
     Surface Hierarchy
     Calibrated to:
     - keep the UI visually quiet
     - reduce flat equal-box perception
     - preserve result and structural separation
  ---------------------------------------------------------- */
--pp-bg: #edf2f7;
--pp-surface-base: #ffffff;
--pp-surface-muted: #f5f8fc;
--pp-surface-result: #eef3fa;
--pp-surface-analytical: #f5f8fc;
--pp-surface-soft: #f8fafc;
  



  /* ----------------------------------------------------------
     Border Discipline
     Tuned to stay structured without over-outlining the UI
  ---------------------------------------------------------- */
  --pp-border-structural: #c2cedf;
  --pp-border-subtle: #d9e1eb;
  --pp-border-accent: #90a5cf;


  /* ----------------------------------------------------------
     Text Hierarchy
     Slightly sharpened for institutional clarity
  ---------------------------------------------------------- */
  --pp-text-900: #0b1220;
  --pp-text-800: #121b30;
  --pp-text-700: #1f2a3f;
  --pp-text-600: #39475f;
  --pp-text-500: #667487;

  /* Temporary compatibility aliases
     These support legacy references until leaf files are cleaned. */
  --pp-muted: var(--pp-text-500);
  --pp-accent: var(--pp-brand-700);


  /* ----------------------------------------------------------
     Geometry Discipline
  ---------------------------------------------------------- */
  --pp-radius-sm: 8px;
  --pp-radius-md: 12px;
  --pp-radius-lg: 16px;


  /* ----------------------------------------------------------
     Panel System Geometry (Authoritative)
     Consumed by pp-panels.css
  ---------------------------------------------------------- */
  --pp-panel-pad-top: 15px;
  --pp-panel-pad-bottom: 16px;
  --pp-panel-pad-x: 20px;
  --pp-panel-gap: 24px;

  /* Result authority */
  --pp-result-accent-width: 5px;
  --pp-result-accent-opacity: 1;

  /* ----------------------------------------------------------
     Mobile Tool Composition
     Opt-in geometry consumed by governed panel/component layers.
     These tokens do not style a tool unless its root declares the
     institutional mobile-composition contract.
  ---------------------------------------------------------- */
  --pp-mobile-section-pad-x: 14px;
  --pp-mobile-section-pad-y: 16px;
  --pp-mobile-section-gap: 16px;
  --pp-mobile-stack-gap: 0px;
  --pp-mobile-row-pad-y: 12px;
  --pp-mobile-row-gap: 10px;
  --pp-mobile-surface-pad: 12px;
  --pp-mobile-control-min-size: 44px;
  --pp-mobile-divider: color-mix(in srgb, var(--pp-border-subtle) 72%, transparent);


  /* ----------------------------------------------------------
     Motion Tokens
     Tight, calm, nearly invisible
  ---------------------------------------------------------- */
  --pp-trans-fast: 140ms;
  --pp-trans-base: 170ms;
}


/* ============================================================
   GLOBAL BOX MODEL
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}


/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
body {
  font-family: var(--pp-font);
  font-size: var(--pp-body-size);
  font-weight: var(--pp-body-weight);
  background: var(--pp-bg);
  color: var(--pp-text-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* ============================================================
   INPUT PRIMITIVES
   ============================================================ */
.pp-input,
.input,
input.input,
select.input {
  width: 100%;
  height: 44px;
  padding: 0 12px;

  border: 1px solid var(--pp-border-structural);
  border-radius: var(--pp-radius-sm);

  background: var(--pp-surface-base);
  color: var(--pp-text-900);

  font-size: 16px;
  outline: none;

  transition:
    box-shadow var(--pp-trans-fast),
    border-color var(--pp-trans-fast),
    background var(--pp-trans-fast);
}

.pp-input:focus,
.input:focus,
input.input:focus,
select.input:focus {
  border-color: var(--pp-brand-700);
  box-shadow: 0 0 0 3px var(--pp-brand-100);
}

.pp-input::placeholder,
.input::placeholder,
input.input::placeholder,
select.input::placeholder {
  color: var(--pp-text-500);
}


/* ============================================================
   BUTTON PRIMITIVES
   ============================================================ */
.pp-btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 7px 13px;

  border-radius: var(--pp-radius-md);
  border: 1px solid var(--pp-border-structural);

  background: var(--pp-surface-base);
  color: var(--pp-text-900);

  font-size: var(--pp-small-size);
  font-weight: 600;
  line-height: 1.2;

  cursor: pointer;
  user-select: none;
  text-decoration: none;

  transition:
    background var(--pp-trans-base),
    border-color var(--pp-trans-base),
    color var(--pp-trans-base);
}

.pp-btn:hover,
.btn:hover {
  background: var(--pp-surface-muted);
}

.pp-btn:focus,
.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--pp-brand-100);
  border-color: var(--pp-brand-700);
}

.pp-btn.primary,
.btn.primary {
  background: var(--pp-brand-900);
  border-color: var(--pp-brand-900);
  color: var(--pp-surface-base);
}

.pp-btn.primary:hover,
.btn.primary:hover {
  background: var(--pp-brand-700);
  border-color: var(--pp-brand-700);
}


/* ============================================================
   COPY BUTTON STATE
   ============================================================ */
.pp-copy,
.btn-copy {
  border: 1px solid var(--pp-border-structural);
  background: var(--pp-surface-base);
  color: var(--pp-text-700);
}

.pp-copy.copied,
.btn-copy.copied {
  background: var(--pp-surface-muted);
  color: var(--pp-brand-900);
}