/* ============================================================================
   tinyyy studio — shared design system
   The single source of truth for the suite's look: design tokens & themes,
   brand letters, motion primitives, language toggle, footer and theme pill.
   Served canonically at https://tinyyy.studio/shared.css; tinyyy.studio links
   it relatively and every <app>.tinyyy.studio page links it absolutely, so
   all the pages feel like one place.

   ⚠ Deploying the studio site ships this file to EVERY page that links it,
   immediately — keep edits backward compatible with the app pages.

   Page-specific layout (headers, heroes, sections) lives in each site's own
   styles.css, linked AFTER this file so it can override. Per-page metrics:
     --page-max  content width of the footer rail (default 1240px)
     --page-pad  horizontal page padding (default 40px)
   ============================================================================ */

/* 1. Design tokens & themes -------------------------------------------------- */

:root {
  --font-body: 'Schibsted Grotesk', sans-serif;
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-hand: 'Caveat', cursive;

  /* Page metrics — app pages override these in their own styles.css */
  --page-max: 1240px;
  --page-pad: 40px;

  /* Warm Sand (default) */
  --bg: #F3EEE7;
  --ink: #2A2620;
  --muted: #7C7468;
  --muted2: #A79E90;
  --card: #FFFFFF;
  --panel: #E8DFD2;
  --field: #EAE3D8;
  --btnfg: #FBF7F0;
  --y: #C85F3C;
  --line: #E4DCCF;

  /* Tricolor brand accents — identical across every theme */
  --y1: #E3A63C;
  --y2: #DB6E45;
  --y3: #7FA24A;

  color-scheme: light;
}

[data-theme="sage"] {
  --bg: #EAEDE6; --ink: #232722; --muted: #727A6C; --muted2: #9AA091;
  --card: #FFFFFF; --panel: #DEE4D6; --field: #E3E7DC; --btnfg: #F8FAF5;
  --y: #5E7A4C; --line: #DCE1D4; color-scheme: light;
}
[data-theme="stone"] {
  --bg: #EFEEEB; --ink: #24221E; --muted: #7A756C; --muted2: #A29C92;
  --card: #FFFFFF; --panel: #E3E0DA; --field: #E7E4DE; --btnfg: #FBFAF7;
  --y: #B5543A; --line: #E2DFD8; color-scheme: light;
}
[data-theme="blush"] {
  --bg: #F4ECEA; --ink: #2A2321; --muted: #8A7B77; --muted2: #B0A19D;
  --card: #FFFFFF; --panel: #EBDCD9; --field: #EFE2DF; --btnfg: #FCF7F5;
  --y: #BF5468; --line: #E9DCD9; color-scheme: light;
}
[data-theme="terracotta"] {
  --bg: #F5EBE4; --ink: #33241C; --muted: #8C7A6D; --muted2: #B3A292;
  --card: #FFFFFF; --panel: #ECDCCF; --field: #F0E4D9; --btnfg: #FCF6EF;
  --y: #BC5A34; --line: #EAD9CB; color-scheme: light;
}
[data-theme="charcoal"] {
  --bg: #201F1C; --ink: #F1ECE3; --muted: #A49E92; --muted2: #7C766B;
  --card: #2B2A26; --panel: #33312C; --field: #33312C; --btnfg: #201F1C;
  --y: #E0A24A; --line: #35332E; color-scheme: dark;
}
[data-theme="original-blue"] {
  --bg: #EDF1F6; --ink: #14213D; --muted: #4D5A75; --muted2: #7A89A8;
  --card: #FFFFFF; --panel: #DCE5F0; --field: #EDF1F6; --btnfg: #FFFFFF;
  --y: #F0563C; --line: #DDE4EE; color-scheme: light;
}

/* 2. Base -------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--ink);
  overflow-x: clip; /* clip, not hidden — pages bleed elements to the viewport edge (e.g. the studio's apps shelf) */
  transition: background .4s ease, color .4s ease;
}

*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--y);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 3. Brand letters ----------------------------------------------------------- */

.y { color: inherit; cursor: default; transition: color .25s; }
.y:hover { color: var(--y); }
.yl { transition: color .3s; }
.yl1, .yl2, .yl3 { color: var(--y); }
.y-tri .yl1 { color: var(--y1); }
.y-tri .yl2 { color: var(--y2); }
.y-tri .yl3 { color: var(--y3); }
@keyframes yflash {
  0% { color: var(--y1); }
  33% { color: var(--y2); }
  66% { color: var(--y3); }
  100% { color: var(--y1); }
}
.y-tri .y { cursor: default; }
.y-tri .y:hover { animation: yflash .42s steps(1, end) infinite; }

/* 4. Motion / interaction primitives ------------------------------------------ */

.bnc { transition: transform .35s cubic-bezier(.34, 1.9, .5, 1), box-shadow .35s ease; }
.bnc:hover { transform: translateY(-3px); }
.bnc:active { transform: translateY(0) scale(.97); }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
.rise { animation: riseIn .8s cubic-bezier(.2, .7, .3, 1) both; }

/* Scroll-reveal: elements settle in as they enter the viewport */
.rise-on-scroll {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
}
.rise-on-scroll.in { opacity: 1; transform: none; }

.yyy-wrap {
  display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer;
  text-decoration: none; color: inherit; white-space: nowrap;
}
.yyy-mark {
  display: inline-block;
  transition: transform .4s cubic-bezier(.34, 1.8, .5, 1);
  transform-origin: left center;
}
.yyy-wrap:hover .yyy-mark { transform: scale(.8); }
.yyy-pinch {
  display: inline-block; opacity: 0;
  transform: translateY(6px) scale(.4) rotate(-20deg);
  transition: all .4s cubic-bezier(.34, 1.8, .5, 1);
  pointer-events: none;
}
.yyy-wrap:hover .yyy-pinch { opacity: 1; transform: translateX(-1.6em) translateY(0) scale(1) rotate(0deg); }

/* 5. Language toggle ----------------------------------------------------------- */

.lang-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.lang-toggle button {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--muted); transition: color .2s;
}
.lang-toggle button:hover { color: var(--ink); }
.lang-toggle button[aria-pressed="true"] { color: var(--ink); }
.lang-sep { color: var(--muted2); }

/* 6. Footer -------------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--line); }
.footer-inner {
  max-width: var(--page-max); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px var(--page-pad); font-size: 13px; color: var(--muted2); gap: 16px;
}
.brand-footer { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--ink); }
.brand-footer .yyy-pinch { font-size: 13px; }
.footer-tag { font-size: 11px; }

/* 7. Theme pill ------------------------------------------------------------------ */

.scheme-pill {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: #fff; border-radius: 99px; padding: 9px 10px 9px 18px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .18); display: flex; gap: 12px; align-items: center; z-index: 60;
}
.scheme-name { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; color: #5a5a5a; white-space: nowrap; min-width: 74px; }
.scheme-divider { width: 1px; height: 20px; background: #e6e6e6; }
.scheme-chips { display: flex; gap: 9px; }
.sw-chip {
  width: 27px; height: 27px; border-radius: 50%; border: 2px solid var(--chip-ink);
  background: var(--chip-bg); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .2s ease, transform .2s ease;
}
.sw-chip:hover { transform: scale(1.12); }
.sw-chip[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--chip-ink); }
.sw-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--chip-y); display: block; }

/* 8. Small screens ----------------------------------------------------------------- */

@media (max-width: 560px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .scheme-pill { padding: 8px 9px 8px 14px; gap: 9px; }
  .scheme-name { min-width: 62px; font-size: 11px; }
  .scheme-chips { gap: 7px; }
}

/* 9. Reduced motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: none; }
  .rise-on-scroll { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}