/* Caveat, Google Fonts (handwritten greeting only) — @import must precede all other rules */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&display=swap');

/* ==========================================================================
   Shibin Dotco, Design tokens
   Source of truth: https://shibin.co/brand
   Mirrors the production globals.css. Do not modify without first updating
   shibin.co/brand, this file is meant to drift only alongside the brand page.
   ========================================================================== */

/* Inter, self-hosted variable font */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
}

:root {
  /* ----- Colors, the seven tokens on shibin.co/brand ----- */
  --background:     #F8F7F2;  /* warm cream canvas */
  --foreground:     #1A1A1A;  /* near-black text */
  --accent:         #1C1856;  /* deep indigo, the one accent */
  --text-secondary: #4A4A4A;
  --text-muted:     #6B6B6B;
  --text-faint:     #9B9B9B;
  --divider:        #E0DED8;

  /* ----- Fonts ----- */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand:  'Caveat', ui-serif, Georgia, serif;

  /* ----- Layout ----- */
  --content-max: 960px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-inter);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Default image radius, mirrors production globals.css */
img:not([data-raw]) { border-radius: 4px; }

/* Blinking cursor, 3px-wide indigo, step-end timing, after "AI" on the hero subhead */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
.cursor {
  display: inline-block;
  width: 3px;
  height: 1.1em;
  background: var(--accent);
  margin-left: 4px;
  position: relative;
  top: 0.22em;
  border-radius: 1px;
  animation: blink 1s step-end infinite;
}