/* =========================================================
   HOLONICA — Foundations
   Source: github.com/Holonica-Development-Team/company-homepage
   File:   src/app/globals.css (Tailwind v4 @theme inline)
   ========================================================= */

/* --- Webfonts ---
   Antic Didone   — display serif, brand wordmark + headlines.
                    Single-weight face (Regular only). Brand uses
                    synthetic weights 700/800 for hero/section
                    titles — we allow font-synthesis to do that.
   Shippori Mincho B1 — Japanese display + body serif.
   Geist          — UI sans.
   Geist Mono     — monospace.
*/
@font-face {
  font-family: 'Antic Didone';
  font-style: normal;
  font-weight: 100 900;          /* let synthesis cover the range */
  font-display: swap;
  src: url('../fonts/AnticDidone-Regular.ttf') format('truetype');
}

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700;800&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Color tokens (verbatim from repo) ---------- */
  --background: #ffffff;
  --foreground: #171717;

  /* Brand accent — the only chromatic color in the system.
     Used for the wordmark "Holonica" and for selection/focus.
     #F4D03F = warm saffron yellow, echoes the gilt highlights
     in the classical paintings used as eyecatch imagery. */
  --accent: #F4D03F;

  /* Greyscale ramp — derived from foreground at fixed alphas.
     The site uses these via tailwind's slate/neutral but we
     pin them so kits stay self-contained. */
  --ink-0:  #ffffff;
  --ink-50: #fafafa;
  --ink-100:#f5f5f5;
  --ink-200:#e5e5e5;  /* hairlines, dividers */
  --ink-300:#d4d4d4;
  --ink-400:#a3a3a3;  /* muted captions */
  --ink-500:#737373;  /* secondary text */
  --ink-600:#525252;
  --ink-700:#404040;
  --ink-800:#262626;
  --ink-900:#171717;  /* foreground */

  /* Selection */
  --selection-bg: var(--accent);
  --selection-fg: var(--ink-900);

  /* ---------- Type ---------- */
  --font-display:  'Antic Didone', 'Shippori Mincho B1', 'Times New Roman', serif;
  --font-jp:       'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-sans:     'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — verbatim from page.module.css.
     Hero title sits at clamp(36px, 6vw, 64px) and is the
     largest type on the site. Section titles are a flat 48px. */
  --t-hero:     clamp(36px, 6vw, 64px);   /* heroTitle */
  --t-section:  48px;                     /* sectionTitle */
  --t-h3:       24px;                     /* card headings */
  --t-lead:     20px;                     /* hero supporting */
  --t-body:     18px;                     /* sectionDescription */
  --t-ui:       16px;                     /* default body & buttons */
  --t-nav:      15px;                     /* nav links */
  --t-small:    14px;
  --t-caption:  12px;

  --leading-tight: 1.1;    /* heroTitle, sectionTitle */
  --leading-snug:  1.35;
  --leading-body:  1.6;    /* descriptions */

  --tracking-hero:  -0.04em;  /* heroTitle */
  --tracking-tight: -0.02em;  /* logo, h2 */
  --tracking-wide:  0.08em;   /* eyebrows */

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* Page rhythm — verbatim from page.module.css */
  --page-max:     1200px;
  --page-gutter:  24px;
  --hero-pad-top: 160px;
  --section-y:    100px;
  --section-gap:  160px;   /* gap between alternating rows */
  --row-gap:      80px;    /* gap inside a row (text ↔ image) */

  /* ---------- Borders & radii ----------
     Two flavors: pill buttons (100px) and soft cards (24px).
     The actual code uses border-radius: 100px on buttons and
     border-radius: 24px on preview images. Hard corners exist
     only on the wordmark glyph and inline elements. */
  --r-none:  0;
  --r-card:  24px;   /* preview images */
  --r-pill:  100px;  /* CTA buttons */
  --hairline: 1px solid var(--ink-200);

  /* ---------- Shadows ----------
     The site uses one big soft drop on preview images and
     a tighter button-hover shadow. */
  --shadow-none: none;
  --shadow-card:    0 40px 80px rgba(0,0,0,.08);
  --shadow-btn-hov: 0 6px 16px rgba(0,0,0,.20);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --d-fast: 160ms;
  --d-base: 240ms;
  --d-slow: 480ms;
}

/* ---------- Resets aligned to the brand ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Antic Didone is single-weight; allow the browser to synthesize
     bolder weights so headline tokens at 700/800 still read heavy. */
  font-synthesis: weight style;
}
::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* ---------- Headings, eyebrows ---------- */
.h-hero {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-hero);
  text-wrap: balance;
  margin: 0;
}
.h-section {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-section);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0;
}
.h-3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: var(--leading-snug);
  margin: 0;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-500);
}
.lead {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  line-height: var(--leading-body);
  color: var(--ink-500);
}
.body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--leading-body);
  color: var(--ink-500);
}
.body-jp {
  font-family: var(--font-jp);
  font-size: var(--t-body);
  line-height: 1.8;
  color: var(--ink-700);
}
.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-500); }
.hairline { border-bottom: var(--hairline); }

/* Wordmark used in the header next to the bezel logo */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

/* ---------- Hero glow ----------
   The actual page draws a giant blurred yellow ellipse behind
   the hero title. Reusable as a class. */
.hero-glow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero-glow::before {
  content: '';
  position: absolute;
  top: 55%; left: 50%;
  width: 1200px; height: 700px;
  background: radial-gradient(circle,
    rgba(244,208,63,.35) 0%,
    rgba(244,208,63,.10) 40%,
    rgba(255,255,255,0) 70%);
  transform: translate(-50%,-50%);
  filter: blur(80px);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  animation: glowPulse 10s infinite ease-in-out;
}
@keyframes glowPulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1);     opacity: .4; }
  50%      { transform: translate(-50%,-50%) scale(1.8,1.1); opacity: .7; }
}

/* Section-title halo — a softer version behind h-section in cards */
.title-halo {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.title-halo::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 140%; height: 140%;
  background: radial-gradient(circle,
    rgba(244,208,63,.45) 0%,
    rgba(244,208,63,0) 70%);
  transform: translate(-50%,-50%);
  filter: blur(25px);
  z-index: -1;
  pointer-events: none;
}

/* ---------- Buttons (verbatim ctaButton) ---------- */
.btn {
  display: inline-block;
  padding: 12px 32px;
  font-family: var(--font-sans);
  font-size: var(--t-ui);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-pill);
  border: 0;
  cursor: pointer;
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out);
}
.btn-primary {
  background: #000;
  color: #fff;
}
.btn-primary:hover {
  background: #222;
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hov);
}
.btn-ghost {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--ink-300);
}
.btn-ghost:hover {
  border-color: var(--ink-900);
}