/* porcelain — token skin, scoped to [data-theme="porcelain"] (also :root default). Consumes base.css + foundations token API. */

:root,[data-theme="porcelain"] { --bg: #FFFFFF;
  --bg-alt: #F3F7FB;
  --bg-dark: #12283C;
  --surface: #FFFFFF;
  --ink: #12283C;
  --ink-inverse: #FFFFFF;
  --text-body: #12283C;
  --muted: #54687C;
  --accent: #2E6BD6;
  --accent-hover: #2254AE;
  --accent-tint: #E8F0FB;
  --accent-2: #2E6BD6;            
  --line: #DFE8F1;

  
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-utility: 'Inter', system-ui, sans-serif;
  --display-weight: 600;
  --fs-h1: clamp(2.5rem, 5vw, 3.5rem); /* @kind font */
  --fs-h2: clamp(1.875rem, 3.5vw, 2.375rem); /* @kind font */
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --lh-body: 1.65; /* @kind font */

  
  --radius-sm: 8px;               
  --radius-md: 10px;              
  --radius-lg: 16px;              
  --shadow: 0 8px 24px rgba(18, 40, 60, 0.06);
  --shadow-hover: 0 8px 24px rgba(18, 40, 60, 0.10); }

[data-theme="porcelain"] h1 { letter-spacing: -0.02em; }

[data-theme="porcelain"] .photo { border-radius: var(--radius-lg);
  box-shadow: var(--shadow); }

[data-theme="porcelain"] .card:hover { box-shadow: var(--shadow-hover);
  transform: translateY(-2px); }

[data-theme="porcelain"] .card .icon-chip { width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--accent-tint);
  color: var(--accent);
  border-radius: var(--radius-sm); }

[data-theme="porcelain"] .section-alt .card { border-color: var(--line); }

[data-theme="porcelain"] .site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px); }