// Atelier — design tokens + shared CSS + small primitives.
// One source of truth for palette, type, spacing.

window.TC = {
  // cool modern — paper / near-white with blue undertone
  bone:        '#F2F4F8',  // page background
  boneDeep:    '#E5E9F0',  // section alt
  boneSoft:    '#F8FAFC',  // card surface

  // deep ink — cool near-black with navy undertone
  ink:         '#0F172A',  // primary text, dark surfaces
  ink90:       '#1E293B',
  inkSoft:     '#334155',  // secondary text
  mute:        '#64748B',  // meta text
  muteLight:   '#94A3B8',

  // electric cobalt accent (replaces terracotta)
  terra:       '#2563EB',  // primary accent
  terraDeep:   '#1D4ED8',  // accent pressed
  terraLight:  '#60A5FA',  // accent on dark

  // lines & tints
  line:        'rgba(15,23,42,0.10)',
  lineSoft:    'rgba(15,23,42,0.05)',
  lineStrong:  'rgba(15,23,42,0.20)',
  terraTint:   'rgba(37,99,235,0.08)',
  terraTint2:  'rgba(37,99,235,0.14)',

  // type stacks
  serif:       '"Instrument Serif", "Cormorant Garamond", Georgia, serif',
  sans:        '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
  mono:        '"JetBrains Mono", ui-monospace, Menlo, monospace',
};

// Small primitives used across sections.
window.Eyebrow = ({ children, light, style }) => (
  <div style={{
    fontFamily: TC.mono,
    fontSize: 11,
    letterSpacing: 2,
    textTransform: 'uppercase',
    color: light ? TC.terraLight : TC.terra,
    fontWeight: 500,
    display: 'inline-flex',
    alignItems: 'center',
    gap: 10,
    ...style,
  }}>
    <span style={{
      width: 6, height: 6, borderRadius: 3,
      background: 'currentColor',
      display: 'inline-block',
    }} />
    {children}
  </div>
);

window.SectionHead = ({ eyebrow, children, sub, light, align = 'left', maxWidth = 900 }) => (
  <div style={{
    textAlign: align,
    margin: align === 'center' ? '0 auto' : undefined,
    maxWidth,
    marginBottom: 72,
  }}>
    <Eyebrow light={light}>{eyebrow}</Eyebrow>
    <h2 style={{
      fontFamily: TC.serif,
      fontSize: 'clamp(44px, 6.2vw, 92px)',
      lineHeight: 0.96,
      letterSpacing: -2.2,
      fontWeight: 400,
      margin: '24px 0 0',
      color: light ? TC.bone : TC.ink,
    }}>{children}</h2>
    {sub && (
      <p style={{
        fontSize: 19, lineHeight: 1.55,
        color: light ? 'rgba(241,233,218,0.65)' : TC.inkSoft,
        margin: '24px 0 0',
        maxWidth: 560,
      }}>{sub}</p>
    )}
  </div>
);

window.AtLogo = ({ size = 26, color, terraColor }) => (
  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: color || TC.ink }}>
    <svg viewBox="0 0 32 32" width={size} height={size} style={{ flexShrink: 0 }}>
      <defs>
        <linearGradient id="atLogoG" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="currentColor" />
          <stop offset="100%" stopColor="currentColor" stopOpacity="0.85" />
        </linearGradient>
      </defs>
      <path d="M16 2.5 L29.5 10 L29.5 22 L16 29.5 L2.5 22 L2.5 10 Z"
        fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
      <path d="M16 2.5 L16 29.5" stroke="currentColor" strokeWidth="0.7" opacity="0.38" />
      <path d="M2.5 10 L29.5 22" stroke="currentColor" strokeWidth="0.7" opacity="0.38" />
      <path d="M2.5 22 L29.5 10" stroke="currentColor" strokeWidth="0.7" opacity="0.38" />
      <circle cx="16" cy="16" r="3.2" fill={terraColor || TC.terra} />
    </svg>
    <span style={{
      fontFamily: TC.serif, fontSize: size * 1.08, letterSpacing: -0.6,
      fontWeight: 400, lineHeight: 1,
    }}>
      guama<em style={{ color: terraColor || TC.terra, fontStyle: 'italic' }}>.dev</em>
    </span>
  </span>
);

// Shared CSS (one big sheet; injected once)
if (!document.getElementById('at-shared-css')) {
  const s = document.createElement('style');
  s.id = 'at-shared-css';
  s.textContent = `
    @keyframes atPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.35)} }
    @keyframes atBlink { 50% { opacity: 0; } }
    @keyframes atSpin { to { transform: rotate(360deg); } }
    @keyframes atFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes atSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
    @keyframes atShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

    .at-caret { color: ${TC.terra}; animation: atBlink 1.1s steps(1) infinite; font-weight: 300;
      font-style: normal; display: inline-block; margin-left: 2px; }

    a { color: inherit; }

    /* Nav link */
    .at-nav-link {
      position: relative;
      color: ${TC.ink};
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      padding: 8px 2px;
      transition: color .18s ease;
    }
    .at-nav-link::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
      background: ${TC.terraDeep};
      transform-origin: left; transform: scaleX(0);
      transition: transform .28s cubic-bezier(.2,.7,.3,1);
    }
    .at-nav-link:hover { color: ${TC.terraDeep}; }
    .at-nav-link:hover::after { transform: scaleX(1); }

    /* Buttons */
    .at-btn {
      position: relative; display: inline-flex; align-items: center; gap: 10px;
      padding: 15px 24px; border-radius: 999px; border: 1px solid transparent;
      font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: -0.1px;
      cursor: pointer; text-decoration: none;
      transition: transform .2s, background .2s, color .2s, border-color .2s, box-shadow .2s;
      overflow: hidden; isolation: isolate;
    }
    .at-btn svg { transition: transform .25s ease; }
    .at-btn:hover svg { transform: translate(2px, -2px); }

    .at-btn-pri { background: ${TC.ink}; color: ${TC.bone}; }
    .at-btn-pri:hover { background: ${TC.terraDeep}; transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(130,50,27,0.5); }

    .at-btn-ghost { background: transparent; border-color: ${TC.line}; color: ${TC.ink}; }
    .at-btn-ghost:hover { border-color: ${TC.ink}; background: rgba(26,22,18,0.04); }

    .at-btn-light { background: ${TC.bone}; color: ${TC.ink}; }
    .at-btn-light:hover { background: #fff; transform: translateY(-1px); }

    /* Arrow link */
    .at-arrow { display: inline-flex; align-items: center; gap: 6px; color: ${TC.terraDeep};
      text-decoration: none; font-weight: 500; border-bottom: 1px solid transparent;
      transition: border-color .18s, color .18s; padding-bottom: 2px; }
    .at-arrow svg { transition: transform .2s; }
    .at-arrow:hover { border-color: currentColor; }
    .at-arrow:hover svg { transform: translate(3px, -3px); }

    /* Footer links */
    .at-foot-link {
      position: relative; display: inline-flex; align-items: center;
      color: rgba(241,233,218,0.65);
      text-decoration: none; font-size: 14px;
      padding: 6px 0;
      transition: color .18s, padding-left .25s;
    }
    .at-foot-link::before {
      content: '→'; position: absolute; left: -18px; opacity: 0;
      transition: opacity .2s, left .25s; color: ${TC.terraLight};
    }
    .at-foot-link:hover { color: ${TC.bone}; padding-left: 18px; }
    .at-foot-link:hover::before { opacity: 1; left: 0; }
  `;
  document.head.appendChild(s);
}