/* Studio 02: shared materials and identity for calculators and guides. */
:root {
  color-scheme: light;
  --background: #F1F2ED;
  --foreground: #252C27;
  --card: #FCFDF9;
  --card-foreground: #252C27;
  --popover: #FCFDF9;
  --popover-foreground: #252C27;
  --primary: #A04428;
  --primary-foreground: #FFFFFF;
  --secondary: #E4E9E1;
  --secondary-foreground: #252C27;
  --muted: #E8ECE5;
  --muted-foreground: #59645B;
  --accent: #DFE5DC;
  --accent-foreground: #252C27;
  --destructive: #A52D2D;
  --destructive-foreground: #FFFFFF;
  --border: #22352A24;
  --input: #22352A38;
  --ring: #A04428;
  --detail: #596B4A;
  --glass: #FFFFFFDC;
  --glass-edge: #FFFFFFED;
  --glass-highlight: #FFFFFF;
  --selected: #344B3712;
  --shadow: #25332212;
  --tint: #BDA47D18;
  --recipe-bg: var(--card);
  --recipe-foreground: var(--foreground);
  --recipe-border: var(--border);
  --radius: 1rem;
}
[data-appearance="dark"] {
  color-scheme: dark;
  --background: #181A19;
  --foreground: #F2F2EC;
  --card: #292D2A;
  --card-foreground: #F2F2EC;
  --popover: #292D2A;
  --popover-foreground: #F2F2EC;
  --primary: #EFAC85;
  --primary-foreground: #181A19;
  --secondary: #303631;
  --secondary-foreground: #F2F2EC;
  --muted: #222624;
  --muted-foreground: #AAB0AA;
  --accent: #343C35;
  --accent-foreground: #F2F2EC;
  --destructive: #EF9991;
  --destructive-foreground: #181A19;
  --border: #FFFFFF1F;
  --input: #FFFFFF30;
  --ring: #EFAC85;
  --detail: #BAC7A7;
  --glass: #313833DB;
  --glass-edge: #FFFFFF2B;
  --glass-highlight: #FFFFFF22;
  --selected: #FFFFFF1B;
  --shadow: #00000029;
  --tint: #98704E12;
}
/* These primitives are also used by the generated static pages. */
.studio-wrap { width: min(1112px, calc(100% - 80px)); margin-inline: auto; }
.studio-glass { border: 1px solid var(--glass-edge); background: var(--glass); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 8px 28px var(--shadow); }
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .studio-glass { background: color-mix(in srgb, var(--glass) 73%, transparent); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); }
}
.studio-header { position: sticky; top: 14px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; margin-top: 20px; pointer-events: none; }
.studio-header::before { content: ""; position: absolute; inset: -14px -12px -16px; z-index: -1; background: linear-gradient(to bottom, var(--background) 78%, transparent); }
.studio-header > * { pointer-events: auto; }
.studio-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--foreground); text-decoration: none; flex-shrink: 0; }
.studio-brand strong { font: bold 31px/1 Georgia, serif; letter-spacing: -1.5px; }
.studio-brand span { max-width: 48px; font-size: 11px; line-height: 1.25; color: var(--muted-foreground); }
.studio-nav { display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 50px; }
.studio-nav a { display: grid; place-items: center; min-height: 40px; min-width: 84px; padding: 8px 14px; color: var(--muted-foreground); font-size: 12px; text-decoration: none; border-radius: 30px; transition: background 160ms, color 160ms; }
.studio-nav a:hover, .studio-nav a[aria-current] { background: var(--selected); color: var(--foreground); }
.studio-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--foreground); cursor: pointer; }
.studio-eyebrow { font-size: 10px; letter-spacing: .14em; font-weight: 500; color: var(--muted-foreground); text-transform: uppercase; }
@media (max-width: 760px) {
  .studio-wrap { width: calc(100% - 36px); }
  .studio-header { top: 8px; height: 58px; margin-top: 8px; gap: 8px; }
  .studio-brand strong { font-size: 27px; }
  .studio-brand span { display: none; }
  .studio-nav { gap: 0; padding: 4px; }
  .studio-nav a { min-width: 54px; min-height: 36px; padding: 8px; font-size: 11px; }
  .studio-icon { width: 42px; height: 42px; }
}
@media (max-width: 360px) {
  .studio-wrap { width: calc(100% - 28px); }
  .studio-brand strong { font-size: 24px; }
  .studio-nav a { min-width: 48px; padding-inline: 6px; }
}
@media (prefers-reduced-transparency: reduce) {
  .studio-glass { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}