/*  Studio Amigo — Design tokens
 *  ─────────────────────────────────────────────────────────────────
 *  Single source for color, type, spacing, radius, and motion.
 *  Import this once at the top of any HTML artifact:
 *      <link rel="stylesheet" href="../colors_and_type.css">
 *  All other rules in this stylesheet are utility classes and base
 *  element resets that snap headings, body, and links to the system.
 */

/* ── Fonts ────────────────────────────────────────────────────── */
/* Both faces are self-hosted from fonts/ for best LCP on the marketing site.
 * Pretendard Variable (.woff2) — Korean + Latin
 * Geist (variable TTF, axis: wght 100–900) — Latin headings + body
 * Geist Mono is loaded from Google Fonts as a fallback; swap to self-host
 * by dropping a GeistMono variable file into fonts/ and replacing the @import. */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('fonts/PretendardVariable.woff2') format('woff2-variations'),
       url('fonts/PretendardVariable.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Geist[wght].ttf') format('truetype-variations'),
       url('fonts/Geist[wght].ttf') format('truetype');
}

/* EB Garamond — ceremonial serif. Used sparingly: the Compostela certificate
 * body and any place a hand-typeset / centuries-old document feel is wanted.
 * Loaded from Google Fonts since we don't have a brand-mandated serif file. */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');

/* Cafe24 Ssurround (Korean) + Cafe24 Decobox (Latin display) — used by the
 * studio home page and the legal pages. Decobox is a single-weight
 * decorative face; never request synthetic bold on text that uses it. */
@font-face {
  font-family: 'Cafe24 Ssurround';
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Cafe24Ssurround/Cafe24Ssurround.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/fonts-archive/Cafe24Ssurround/Cafe24Ssurround.woff') format('woff'),
       url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
}
@font-face {
  font-family: 'Cafe24 Decobox';
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Cafe24Decobox/Cafe24Decobox.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/fonts-archive/Cafe24Decobox/Cafe24Decobox.woff') format('woff'),
       url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Decobox.woff') format('woff');
}


/* ── Tokens ───────────────────────────────────────────────────── */
:root {
  /* COLOR — brand source of truth ─────────────────────────────── */
  /* Surfaces — the night sky */
  --night:        #0A0F2E;   /* primary background */
  --night-2:      #131A3D;   /* elevated surface, cards */
  --night-3:      #1F2750;   /* hover / pressed card */
  --night-4:      #2B3565;   /* dawn — top of hero gradient */

  /* Warm light */
  --bone:         #F5F1E8;   /* parchment / primary text on dark */
  --bone-2:       #B5B1A8;   /* secondary text on dark */
  --bone-3:       #6B6B7A;   /* tertiary, captions */

  /* Accent — the painted yellow arrow */
  --yellow:       #FFD93D;   /* the one accent. max 3 uses per page. */
  --yellow-press: #F0C92E;   /* press state, 6% darker */
  --yellow-soft:  rgba(255, 217, 61, 0.15);  /* yellow-on-night chip bg */

  /* Branch / alternate route */
  --clay:         #D97757;   /* warm tile orange — branch routes only */

  /* Semantic */
  --moss:         #7DB87D;   /* success */
  --moss-soft:    rgba(125, 184, 125, 0.20);
  --amber:        #E8A53D;   /* warning */
  --amber-soft:   rgba(232, 165, 61, 0.15);
  --coral:        #D97A6C;   /* error / destructive */
  --slate:        #7A9BC4;   /* info */
  --slate-soft:   rgba(122, 155, 196, 0.12);

  /* Borders */
  --border-subtle:  rgba(245, 241, 232, 0.18);
  --border-strong:  rgba(245, 241, 232, 0.32);
  --border-focus:   var(--yellow);

  /* Gradients */
  --grad-sunset:   linear-gradient(135deg, #FFD93D 0%, #FF8A65 100%);
  --grad-dawn:     linear-gradient(180deg, #0A0F2E 0%, #2B3565 100%);
  --grad-night:    linear-gradient(180deg, #0A0F2E 0%, #131A3D 100%);

  /* TYPE — two faces, both variable ───────────────────────────── */
  --font-latin:    'Geist', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-korean:   'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo',
                   'Noto Sans KR', sans-serif;
  --font-serif:    'EB Garamond', 'Georgia', 'Times New Roman', serif;
  --font-mono:     'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  /* Default stack — Pretendard renders Latin acceptably and Korean correctly,
     so it's the safe fallback when the language of a string is unknown. */
  --font-body:     var(--font-korean);

  /* Type scale — rem at 16-px base.
     Pair these with --tracking-tight on display+ sizes. */
  --t-display:   4.5rem;   /* 72 — hero only */
  --t-h1:        3rem;     /* 48 */
  --t-h2:        2rem;     /* 32 */
  --t-h3:        1.5rem;   /* 24 */
  --t-h4:        1.25rem;  /* 20 */
  --t-body-lg:   1.125rem; /* 18 */
  --t-body:      1rem;     /* 16 */
  --t-body-sm:   0.9375rem;/* 15 */
  --t-caption:   0.875rem; /* 14 — Korean floor */
  --t-micro:     0.75rem;  /* 12 — latin / numeric only */

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.08em;

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.55;

  --wt-regular: 400;
  --wt-medium:  500;
  --wt-semibold: 600;
  --wt-bold:    700;
  --wt-extra:   800;

  /* SPACING — 8-px base ───────────────────────────────────────── */
  --sp-1:   8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  48px;
  --sp-6:  64px;
  --sp-7:  96px;
  --sp-8: 128px;

  /* RADII ──────────────────────────────────────────────────────── */
  --r-xs:    8px;
  --r-sm:   12px;   /* inputs */
  --r-md:   16px;   /* buttons, small cards */
  --r-lg:   20px;   /* primary cards */
  --r-xl:   24px;   /* bottom sheets, modals */
  --r-pill: 999px;

  /* TEXTURES — inlined as data URIs so snapshots / bundles carry them
   * with no extra HTTP. Consumers use `backgroundImage: 'var(--amigo-contour)'`
   * (NOT `<img src>`) so the CSS layer owns asset resolution. */
  --amigo-contour:   url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 360' preserveAspectRatio='xMidYMid slice'%3E %3Cg fill='none' stroke='currentColor' stroke-width='0.75' opacity='0.7'%3E %3Cpath d='M-20 60 C 80 40, 180 100, 280 80 S 480 30, 620 60'%3E%3C/path%3E %3Cpath d='M-20 90 C 90 70, 180 130, 290 110 S 490 60, 620 90'%3E%3C/path%3E %3Cpath d='M-20 130 C 80 110, 200 170, 300 150 S 500 100, 620 130'%3E%3C/path%3E %3Cpath d='M-20 170 C 100 150, 200 210, 310 190 S 510 140, 620 170'%3E%3C/path%3E %3Cpath d='M-20 210 C 110 190, 220 250, 320 230 S 520 180, 620 210'%3E%3C/path%3E %3Cpath d='M-20 250 C 90 230, 210 290, 320 270 S 530 220, 620 250'%3E%3C/path%3E %3Cpath d='M-20 290 C 100 270, 220 330, 330 310 S 540 260, 620 290'%3E%3C/path%3E %3Cpath d='M-20 330 C 80 310, 200 370, 320 350 S 540 300, 620 330'%3E%3C/path%3E %3Cpath d='M120 140 C 160 120, 200 150, 240 130' opacity='0.8'%3E%3C/path%3E %3Cpath d='M125 155 C 165 135, 205 165, 245 145' opacity='0.6'%3E%3C/path%3E %3Cpath d='M380 220 C 420 200, 460 230, 500 210' opacity='0.8'%3E%3C/path%3E %3Cpath d='M385 235 C 425 215, 465 245, 505 225' opacity='0.6'%3E%3C/path%3E %3C/g%3E %3C/svg%3E");
  --amigo-parchment: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E %3Cfilter id='grain'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'%3E%3C/feTurbulence%3E %3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.12 0 0 0 0 0.08 0 0 0 0.55 0'%3E%3C/feColorMatrix%3E %3C/filter%3E %3Crect width='200' height='200' filter='url(%23grain)'%3E%3C/rect%3E %3C/svg%3E");

  /* HOME — warm hand-made surface ───────────────────────────────
   * The studio_amigo home page repaints to a cream-paper aesthetic to match
   * the speech-bubble logo. The /camino product page keeps the dark Night
   * palette unchanged — the tonal contrast IS the brand structure.
   * Use these tokens only inside the home page tree. */
  --home-paper:    #F5F1E8;
  --home-ink:      #1F2128;
  --home-ink-soft: rgba(31, 33, 40, 0.65);
  --home-ink-mute: rgba(31, 33, 40, 0.35);
  --amigo-sage:    #94B587;
  --amigo-sage-soft: rgba(148, 181, 135, 0.18);
  --amigo-sage-deep: #6B8F60;

  /* MOTION — walker's pace ────────────────────────────────────── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:    cubic-bezier(0.7, 0, 0.84, 0);

  --t-tap:      120ms;
  --t-hover:    200ms;
  --t-transit:  400ms;
  --t-reveal:   700ms;
  --t-ambient: 1600ms;

  /* SHADOWS — almost never used on dark, occasionally on bone ── */
  --shadow-passport: 0 1px 0 rgba(10,15,46,0.06), 0 12px 28px -16px rgba(10,15,46,0.16);
  --shadow-modal:    0 32px 64px -24px rgba(0,0,0,0.5);
}


/* ── Base resets — opt-in ─────────────────────────────────────── */
/* Apply with class="amigo-base" on a wrapper, or paste into your own
 * top-level body rule. Not auto-applied so you can use these tokens
 * inside larger systems without fighting global resets. */
.amigo-base {
  background: var(--night);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--wt-regular);
  font-feature-settings: "tnum" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.amigo-base * { box-sizing: border-box; }

.amigo-base h1, .amigo-base h2, .amigo-base h3, .amigo-base h4 {
  font-family: var(--font-latin);
  font-weight: var(--wt-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-heading);
  color: var(--bone);
  margin: 0;
}

.amigo-base h1 { font-size: var(--t-h1); line-height: var(--lh-display); }
.amigo-base h2 { font-size: var(--t-h2); }
.amigo-base h3 { font-size: var(--t-h3); }
.amigo-base h4 { font-size: var(--t-h4); }

.amigo-base p { margin: 0; }
.amigo-base a {
  color: var(--yellow);
  text-decoration: none;
  transition: opacity var(--t-hover) var(--ease-default);
}
.amigo-base a:hover { opacity: 0.8; }


/* ── Utility classes — used by preview cards and UI kits ──────── */
.t-display { font-family: var(--font-latin); font-size: var(--t-display);
             font-weight: var(--wt-bold); letter-spacing: var(--tracking-tight);
             line-height: var(--lh-display); }
.t-h1      { font-family: var(--font-latin); font-size: var(--t-h1);
             font-weight: var(--wt-bold); letter-spacing: var(--tracking-tight);
             line-height: var(--lh-heading); }
.t-h2      { font-family: var(--font-latin); font-size: var(--t-h2);
             font-weight: var(--wt-bold); letter-spacing: var(--tracking-tight);
             line-height: var(--lh-heading); }
.t-h3      { font-family: var(--font-latin); font-size: var(--t-h3);
             font-weight: var(--wt-semibold); line-height: var(--lh-heading); }
.t-body-lg { font-size: var(--t-body-lg); line-height: var(--lh-body); }
.t-body    { font-size: var(--t-body); line-height: var(--lh-body); }
.t-caption { font-size: var(--t-caption); line-height: var(--lh-body); color: var(--bone-2); }
.t-micro   { font-size: var(--t-micro); letter-spacing: var(--tracking-eyebrow);
             text-transform: uppercase; color: var(--bone-2); }

.t-ko      { font-family: var(--font-korean); }
.t-latin   { font-family: var(--font-latin); }
.t-mono    { font-family: var(--font-mono); }

.muted     { color: var(--bone-2); }
.dim       { color: var(--bone-3); }


/* ── Component primitives — match the codebase widgets ────────── */
.amigo-card {
  background: var(--night-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
}
.amigo-card--bone {
  background: var(--bone);
  color: var(--night);
  border-color: rgba(10,15,46,0.08);
  box-shadow: var(--shadow-passport);
}

.amigo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-1);
  height: 56px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-weight: var(--wt-semibold);
  font-size: var(--t-body-lg);
  border: none;
  cursor: pointer;
  transition: background var(--t-hover) var(--ease-default),
              transform var(--t-tap) var(--ease-default);
}
.amigo-btn--primary {
  background: var(--yellow);
  color: var(--night);
}
.amigo-btn--primary:hover  { background: var(--yellow-press); }
.amigo-btn--primary:active { transform: scale(0.98); }

.amigo-btn--secondary {
  background: transparent;
  color: var(--bone);
  border: 1.5px solid var(--bone-2);
}
.amigo-btn--secondary:hover { border-color: var(--bone); }

.amigo-btn--tertiary {
  background: transparent;
  color: var(--yellow);
  height: 44px;
  padding: 0 var(--sp-2);
}
.amigo-btn--tertiary:hover { color: var(--yellow-press); }

.amigo-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: var(--t-caption);
  font-weight: var(--wt-medium);
  background: var(--night-3);
  color: var(--bone-2);
  border: 1px solid var(--border-subtle);
}
.amigo-pill--yellow  { background: var(--yellow-soft); color: var(--yellow); border-color: transparent; }
.amigo-pill--moss    { background: var(--moss-soft);   color: var(--moss);   border-color: transparent; }
.amigo-pill--amber   { background: var(--amber-soft);  color: var(--amber);  border-color: transparent; }
.amigo-pill--slate   { background: var(--slate-soft);  color: var(--slate);  border-color: transparent; }
.amigo-pill--coral   { background: transparent;        color: var(--coral);  border-color: var(--coral); }

.amigo-input {
  width: 100%;
  height: 52px;
  padding: 0 var(--sp-2);
  background: var(--night-2);
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--t-body-lg);
  transition: border-color var(--t-hover) var(--ease-default);
}
.amigo-input::placeholder { color: var(--bone-3); }
.amigo-input:focus { outline: none; border-color: var(--yellow); }

/* The arrow — both visual motif and component */
.amigo-arrow {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.1em;
  transition: transform var(--t-hover) var(--ease-default);
}
.amigo-arrow svg { width: 100%; height: 100%; display: block; }
*:hover > .amigo-arrow { transform: translateX(4px); }


/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .amigo-base *,
  .amigo-base *::before,
  .amigo-base *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ── Language display mode ────────────────────────────────────── */
/* The footer's three-state toggle (BOTH · EN · KO) sets a data-lang attribute
 * on <html>. Default is "all" (both languages stacked, as authored). When the
 * reader picks EN or KO, the inactive language is hidden — but ONLY on
 * elements tagged with `lang="ko"` or `lang="en"`. Untagged neutral elements
 * (UI chrome, numbers, icons) stay visible in both modes.
 *
 * To make a bilingual pair toggleable, add `lang="ko"` and `lang="en"` to
 * each side. The system is opt-in to keep retrofits incremental. */
html[data-lang="en"] [lang="ko"]  { display: none !important; }
html[data-lang="ko"] [lang="en"]  { display: none !important; }