/* FIRST SIGHT — shared design system. Approved washed cyan / warm charcoal.
   Load after page styles. Keep layout in page CSS and all renderer colours untouched.
   Fonts: Inter UI/body; Instrument Serif editorial display; Outfit wordmark;
   JetBrains Mono compact metadata. Never apply logo filters to photo assets. */
:root{--fs-paper:#191b17;--fs-surface:#22261f;--fs-mat:#171a15;--fs-ink:#efeee6;--fs-muted:#b6bbb0;--fs-accent:#85bac8;--fs-line:#3c443c;--fs-line-strong:#60706b;--fs-sage:#30433d;--fs-body:Inter,system-ui,sans-serif;--fs-display:"Instrument Serif",Georgia,serif;--fs-brand:Outfit,system-ui,sans-serif;--fs-mono:"JetBrains Mono",monospace;--fs-radius:7px;--fs-space-1:4px;--fs-space-2:8px;--fs-space-3:12px;--fs-space-4:16px;--fs-space-6:24px;--fs-control-height:44px;--fs-danger:#e2564a;--fs-logo-ink:#a3cbd4;--fs-on-accent:#17221e;--fs-raised:#2a2e27}
html{background:var(--fs-paper);color-scheme:dark}
body[data-surface]{--black:var(--fs-paper);--white:var(--fs-ink);--gray:var(--fs-muted);--line:var(--fs-line);--accent:var(--fs-accent);--amber:var(--fs-accent);background:var(--fs-paper);color:var(--fs-ink)}
body[data-surface] .nav-logo{color:var(--fs-logo-ink)}
body[data-surface] nav:not([aria-label]){background:rgba(25,27,23,.92);border-color:var(--fs-line)}
body[data-surface] .nav-logo img{filter:sepia(1) saturate(1.6) hue-rotate(140deg)}
body[data-surface] :is(.btn-primary,.nav-cta,.btn.pri){background:var(--fs-accent);color:var(--fs-on-accent);border-color:var(--fs-accent)}
body[data-surface] :is(.btn-primary,.nav-cta,.btn.pri):hover{background:var(--fs-logo-ink);color:var(--fs-on-accent);transform:none}
body[data-surface] :is(input,select,textarea){accent-color:var(--fs-accent)}
body[data-surface] :focus-visible{outline-color:var(--fs-logo-ink)}
/* Community: keep real posts, recipes, credits and moderation intact. */
body[data-surface=community] :is(.tile,.lcard,.msheet,.photo-prompt){background:var(--fs-surface);border-color:var(--fs-line)}
body[data-surface=community] .tile .ph{background:var(--fs-mat)}
body[data-surface=community] .try-card{background:var(--fs-accent);color:var(--fs-on-accent);border:1px solid var(--fs-accent);border-radius:var(--fs-radius);min-height:44px;padding:0 12px;font-weight:600}
body[data-surface=community] .try-card::before{content:none}
body[data-surface=community] .try-card:hover{background:var(--fs-logo-ink);color:var(--fs-on-accent);border-color:var(--fs-logo-ink)}
body[data-surface=community] :is(.eyebrow,.stock,.like.on,.lineage b){color:var(--fs-logo-ink)}
body[data-surface=community] .light{background:rgba(25,27,23,.97)}
body[data-surface=community] .lclose{background:#22261fe8;border-color:var(--fs-line-strong);color:var(--fs-ink)}
body[data-surface=community] .modal{background:rgba(25,27,23,.85)}
/* Editor: shared geometry and quiet selected states on desktop and mobile. */
body.editor-theme[data-surface=editor]{--bg:var(--fs-paper);--chrome:var(--fs-surface);--chrome-2:var(--fs-raised);--raise:#343b31;--ink:var(--fs-ink);--muted:var(--fs-muted);--faint:#a0aa9a;--amber:var(--fs-accent);--amber-2:var(--fs-logo-ink);--gold:var(--fs-accent);--line:var(--fs-line);--line-2:var(--fs-line-strong)}
body.editor-theme .bar .mark{color:var(--fs-logo-ink)}
body.editor-theme .bar .brandmk{filter:sepia(1) saturate(1.6) hue-rotate(140deg)}
body.editor-theme[data-surface] .app :is(.icbtn.go,#saveBtn,#choosePhotoBtn){background:var(--fs-accent);color:var(--fs-on-accent);border-color:var(--fs-accent)}
body.editor-theme[data-surface] .app :is(.icbtn.go,#saveBtn,#choosePhotoBtn):hover{background:var(--fs-logo-ink);color:var(--fs-on-accent)}
body.editor-theme[data-surface] .app :is(#saveBtn,#choosePhotoBtn):disabled{background:var(--fs-raised);border-color:var(--fs-line);color:#899481}
body.editor-theme[data-surface] .app :is(#fsQuickDock,#fsFineDock) button{background:var(--fs-raised);color:var(--fs-ink)}
body.editor-theme[data-surface] :is(#fsQuickDock,#fsFineDock,#mchips,.fs-adjustment-tabs,.cat-filter,.seg,#feDevelopment) button:is(.on,[aria-expanded=true],[aria-pressed=true]){background:#85bac825!important;color:#bde2e9!important}
body.editor-theme[data-surface] :is(#msheet,.cloud-card,.cloud-sheet,#sharePop){background-color:var(--fs-surface);color:var(--fs-ink);border-color:var(--fs-line-strong)}
body.editor-theme[data-surface] #msheet.peek{background:transparent!important;border-color:transparent!important}
body.editor-theme[data-surface] input[type=range]{accent-color:var(--fs-accent)}
body.editor-theme[data-surface] input[type=range]::-webkit-slider-thumb{background:var(--fs-logo-ink);border-color:var(--fs-logo-ink)}
body.editor-theme[data-surface] input[type=range]::-moz-range-thumb{background:var(--fs-logo-ink);border-color:var(--fs-logo-ink)}
body.editor-theme[data-surface] .fs-camera [data-shot]{background:var(--fs-accent);border-color:var(--fs-logo-ink);color:var(--fs-accent)}
body.editor-theme[data-surface] .fs-camera-open{background:#85bac81c;border-color:#85bac855;color:#c5dfe2}
/* Admin: same palette, keep destructive and error states red. */
body[data-surface=admin] :is(.kpi,.card,.gate){background:var(--fs-surface);border-color:var(--fs-line)}
body[data-surface=admin] .kpi b{color:var(--fs-logo-ink)}
body[data-surface=admin] .tag{color:var(--fs-logo-ink);border-color:#85bac860}
body[data-surface=admin] .bar{background:#85bac830}
body[data-surface=admin] .bar i{background:var(--fs-accent)}
body[data-surface=admin] input:focus{border-color:var(--fs-accent)}
body[data-surface=admin] h1{color:var(--fs-logo-ink)}

/* Shared typography, control geometry, focus and brand signature. */
body[data-surface]{font-family:var(--fs-body);-webkit-font-smoothing:antialiased}
body[data-surface] :is(.nav-logo,.editor-brand .mark){font-family:var(--fs-brand);font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--fs-logo-ink)}
body[data-surface] :is(.nav-logo img,.editor-brand .brandmk){width:26px;height:26px;flex-shrink:0}
body[data-surface] :is(.serif,.hero h1,.gate h3){font-family:var(--fs-display);font-weight:400}
body[data-surface] :is(.mono,.eyebrow,.kicker){font-family:var(--fs-mono)}
body[data-surface] :is(.btn,.nav-cta){border-radius:var(--fs-radius);white-space:nowrap;text-align:center}
body[data-surface] button:focus-visible,body[data-surface] a:focus-visible{outline:2px solid var(--fs-logo-ink);outline-offset:3px}
body[data-surface=admin] :is(.btn,input){min-height:var(--fs-control-height);border-radius:var(--fs-radius)}
body[data-surface] :is(.msg.err,.never,.btn.danger){color:var(--fs-danger)}