/* Notefriends proposal. Opt in explicitly; never changes the workshop's :root.
   NF-141: Design System V2 shell tokens. Shell only; document Looks use --note-* in reading.css. */
.notefriends-brand {
  --nf-paper: #fafaf8;            /* quiet shell surface: sidebar, topbar, page */
  --nf-sheet: #ffffff;            /* work surface, inputs, menus */
  --nf-line: #e2dfd8;             /* the one hairline divider */
  --nf-pencil: #1f1d1a;           /* text and the primary fill */
  --nf-pencil-muted: #6b665e;     /* secondary text; 5.0:1 on --nf-nav-bg */
  --nf-hover: #f1f0ec;            /* hover fill */
  --nf-selected: #e9e7e1;         /* pressed fill and the current row */
  --nf-menu-on: var(--nf-selected); /* the row a menu is on (drawn open in the pixel scene) */
  --nf-border: #8c8880;           /* control boundary, 3.5:1 on white (WCAG 1.4.11) */
  --nf-accent: #2a56c6;           /* focus ring, links, selection ring */
  --nf-danger: #b3261e;           /* the approved companions' red */
  --nf-danger-bg: #fef3f2;
  --nf-warn-bg: #fff8e5;
  --nf-warn-line: #d9a514;
  --nf-disabled-bg: #f4f3f0;
  --nf-disabled: #8a867f;
  /* Brand crayons stay decorative (project icons, Looks). They are not used for functional controls. */
  --nf-pencil-yellow: #f5db81;
  --nf-crayon-coral: #e27666;
  --nf-mint: #98bcaa;
  --nf-sky-blue: #99bce5;
  --nf-rust: #963b25;
  --nf-violet: #7a52c8;
  --nf-focus: 2px solid var(--nf-accent);
  --focus: var(--nf-focus);      /* generic base focus uses the app's token too, never the older orange accent */
  --nf-font-ui: 'Hanken Grotesk', Arial, sans-serif;
  --nf-font-label: 'Space Grotesk', Arial, sans-serif;
  --nf-font-mono: 'Courier Prime', ui-monospace, monospace;   /* tickets and receipts (room apps batch G): the typewriter face the Looks bundle */
  --nf-stroke: 1px;
  --nf-radius: 10px;              /* every functional control */
  --nf-radius-lg: 14px;           /* notices and grouped cards */
  --nf-radius-menu: 12px;         /* menus, popovers, the block bar */
  /* Shades: every shadow and scrim is built from these three, never from a literal rgb(). */
  --nf-shade: rgb(31 29 26 / .12);
  --nf-shade-md: rgb(31 29 26 / .18);
  --nf-shade-lg: rgb(31 29 26 / .25);
  --nf-scrim: rgb(31 29 26 / .28);  /* behind a dialog or sheet */
  --nf-shadow-menu: 0 8px 24px var(--nf-shade), 0 1px 3px rgb(31 29 26 / .08);
  --nf-shadow-bar: 0 2px 10px rgb(31 29 26 / .1), 0 1px 2px rgb(31 29 26 / .06);
  --nf-shadow-sheet: 0 -8px 30px var(--nf-shade);                                       /* a phone bottom sheet */
  --nf-shadow-drawer: -8px 0 30px var(--nf-shade);                                      /* the Things sidebar */
  --nf-shadow-dialog: 0 24px 60px var(--nf-shade-lg);                                   /* a centred dialog */
  --nf-shadow-card: 0 0 0 1px var(--nf-line), 0 18px 40px var(--nf-shade);              /* the Style sheet's floating card */
  --nf-shadow-float: 0 0 0 1px var(--nf-line), 0 6px 16px var(--nf-shade);              /* a small floating bar */
  --nf-shadow-tabs: 0 8px 24px var(--nf-shade), 0 0 0 1px var(--nf-line);               /* the phone tab bar */
  --nf-shadow-pop: 0 8px 30px var(--nf-shade-md);                                       /* a row menu */
  --nf-shadow-hairline: 0 0 0 1px var(--nf-line);
  --nf-shadow-swatch: inset 0 0 0 1px var(--nf-shade);                                  /* a colour swatch's edge */
  --nf-ring-accent: 0 0 0 2px var(--nf-accent);
  --nf-ring-ink: 0 0 0 2px var(--nf-pencil);
  --nf-ring-ink-offset: 0 0 0 2px var(--nf-sheet), 0 0 0 4px var(--nf-pencil);
  /* Text and icons that sit on a coloured fill. */
  --nf-on-accent: #ffffff;        /* unread counts and badges on --nf-accent */
  --nf-on-danger: #ffffff;        /* text on a filled danger button (white in light, dark ink in dark) */
  --nf-on-yellow: #1f1d1a;        /* Nota's disc, the "new" pill and highlights on --nf-pencil-yellow */
  --nf-nota-blush: #ed4339;       /* the blush dots on Nota's face, the logo's red */
  /* Rooms: avatar tones are people's initials on a flat colour; decorative, like the crayons. */
  --nf-on-avatar: #ffffff;        /* initials on an avatar tone: white in both schemes */
  --nf-avatar-green: #2f6f5e;
  --nf-avatar-brown: #8a5a2b;
  --nf-avatar-plum: #7a4b84;
  --nf-avatar-blue: #4b5fa8;
  --nf-avatar-grey: #6b665e;
  --nf-poll: #e3ddc9;             /* a poll option's filled bar */
  --nf-fresh: #fffbef;            /* a page slot Nota just added */
  --nf-win: #9cc8a6;              /* the option notebook the room chose */
  /* Type scale: the sizes the shell repeats, named by role. */
  --nf-text-initial-xs: 8px;      /* a voter's initials */
  --nf-text-initial-sm: 9px;      /* a stacked avatar's initials */
  --nf-text-tiny: 11px;           /* counts, badges */
  --nf-text-note: 11.5px;
  --nf-text-meta: 12px;
  --nf-text-small: 12.5px;
  --nf-text-control: 13px;        /* compact buttons */
  --nf-text-row: 13.5px;          /* sidebar and sheet rows */
  --nf-text-body: 14px;
  --nf-text-msg: 14.5px;          /* chat messages */
  --nf-text-sheet: 15px;
  --nf-text-lead: 16px;           /* phone card titles */
  --nf-text-title: 17px;          /* the room title */
  --nf-text-card: 18px;           /* card titles */
  --nf-text-hero-phone: 26px;
  --nf-text-hero: 34px;           /* the New room headline */
  --nf-sheet-w: 300px;            /* the "Things" column */
  --nf-solid-hover: #343029;      /* entry-page graphite action */
  --nf-solid-active: #000000;
  --nf-control-h: 40px;           /* 44px at phone width, below */
  /* Magic Notebook slice 2: one proposed set for the global shell and its pages (shown beside the rendered shell in apps/playground/shell.html).
     V2 above stays the base; these add the navigation frame, the filled-field family and the page typography. */
  --nf-nav-bg: #f2f1ed;           /* the navigation surface, a step darker than the page so the shell reads as one frame */
  --nf-nav-current: #ffffff;      /* the open destination's pill */
  --nf-nav-w: 272px;              /* the rooms sidebar (docs/02-design/design-system-v2.md#shell-rules, Visual standard) */
  --nf-font-display: Newsreader, Georgia, serif; /* titles: the room title, notebook and card titles, the New room headline (Rooms visual standard) */
  --nf-page-measure: 760px;       /* the reading width of a global page */
  /* Rooms visual standard (docs/02-design/design-system-v2.md#shell-rules, ADR-023) */
  --nf-page: #e9e7e1;             /* behind framed areas */
  --nf-nota: #f6efdb;             /* Nota's message card */
  --nf-nota-line: #e8dcb6;        /* its border */
  --nf-agreed-bg: #dcebdd;        /* the Agreed mark */
  --nf-agreed: #24573a;
  /* K2: the rest of the app's colours. --nf-danger-note is red text on a note surface: its dark half follows the Look's color-scheme, not the app's. */
  --nf-danger-note: light-dark(#9b1c13, #ff9d93);
  --nf-glass-bg: rgb(255 255 255 / .26);   /* the glass material for controls that float over a note */
  --nf-glass-edge: 1px solid rgb(255 255 255 / .6);
  --nf-glass-shadow: 0 8px 24px rgb(0 0 0 / .14), inset 0 1px 1px rgb(255 255 255 / .8), inset 0 -1px 1px rgb(0 0 0 / .05);
  --nf-cover-rule: rgb(31 29 26 / .08);    /* the ruled lines on a notebook cover */
  --nf-cover-spine: rgb(0 0 0 / .14);
  --nf-cover-spine-edge: rgb(255 255 255 / .35);
  /* An uploaded HTML file's canvas: white in both schemes, like a browser page. */
  --nf-html-canvas: #ffffff;
  --nf-room-clay: #f1d9c7;        /* a room picture's tint (constants/room-pictures.ts); yellow stays Nota's */
  --nf-room-sky: #d6e3f3;
  --nf-room-lilac: #e6def0;
  --nf-room-rose: #f3dcd8;
  --nf-room-sage: #dce9d5;
  --nf-room-sand: #ece4cf;
  --nf-on-room: #1f1d1a;          /* the icon, emoji or letter on a tint */
}
/* Dark (docs/02-design/design-system-v2.md#dark-mode): the same tokens with dark values, from the companion's dark block. shell/scheme.ts and public/scheme.js set data-scheme on <html>.
   Text keeps 4.5:1 and control boundaries 3:1 on these surfaces (tests/dark-tokens.test.ts). Avatar tones, crayons, --nf-pencil-yellow and --nf-on-yellow do not change. */
:root[data-scheme="dark"] .notefriends-brand, :root[data-scheme="dark"].notefriends-brand {
  color-scheme: dark;
  --nf-paper: #191816;
  --nf-sheet: #22201e;
  --nf-line: #2e2b28;
  --nf-pencil: #edeae4;
  --nf-pencil-muted: #a39e95;
  --nf-hover: #2a2825;
  --nf-selected: #33302c;
  --nf-menu-on: var(--nf-hover);
  --nf-border: #7a756c;
  --nf-accent: #8aa8f5;
  --nf-danger: #f4877a;
  --nf-danger-bg: #3a1f1b;
  --nf-warn-bg: #2d2614;
  --nf-disabled-bg: #1f1e1c;
  --nf-disabled: #77726a;
  --nf-shade: rgb(0 0 0 / .4);
  --nf-shade-md: rgb(0 0 0 / .5);
  --nf-shade-lg: rgb(0 0 0 / .6);
  --nf-scrim: rgb(0 0 0 / .55);
  --nf-shadow-menu: 0 8px 24px var(--nf-shade), 0 1px 3px rgb(0 0 0 / .3);
  --nf-shadow-bar: 0 2px 10px rgb(0 0 0 / .35), 0 1px 2px rgb(0 0 0 / .25);
  --nf-on-accent: #10131c;
  --nf-on-danger: #1f1d1a;
  --nf-poll: #3a3427;
  --nf-fresh: #26221a;
  --nf-win: #4f8f63;
  --nf-solid-hover: #d3d0ca;
  --nf-solid-active: #ffffff;
  --nf-nav-bg: #141312;
  --nf-nav-current: #22201e;
  --nf-page: #0f0e0d;
  --nf-nota: #2a2416;
  --nf-nota-line: #453a1c;
  --nf-agreed-bg: #1d3326;
  --nf-agreed: #8fd3a6;
  --nf-glass-bg: rgb(34 32 30 / .45);
  --nf-glass-edge: 1px solid rgb(255 255 255 / .14);
  --nf-glass-shadow: 0 8px 24px rgb(0 0 0 / .5), inset 0 1px 1px rgb(255 255 255 / .1), inset 0 -1px 1px rgb(0 0 0 / .3);
  --nf-cover-rule: rgb(255 255 255 / .06);
  --nf-room-clay: #5a3f2e;
  --nf-room-sky: #2f4058;
  --nf-room-lilac: #463a56;
  --nf-room-rose: #5a3634;
  --nf-room-sage: #34483a;
  --nf-room-sand: #4d4430;
  --nf-on-room: #f1eee7;
}
/* The wordmark is two files, drawn in the dark ink for dark (components/shared/wordmark.tsx); the one that does not match the scheme is not shown. */
:root:not([data-scheme="dark"]) .word-dark, :root[data-scheme="dark"] .word-light { display: none; }
/* A pointer action (including subsequent scripted focus) is not a keyboard-focus state. Keep focus,
   selected/error borders and the caret; suppress only the outline, across every branded app page. */
.notefriends-brand[data-focus-input=pointer] { --nf-focus: 0 solid transparent; }
.notefriends-brand[data-focus-input=pointer] :is(:focus, :focus-within) { outline: none !important; }
.notefriends-brand :focus:not(:focus-visible), .notefriends-brand dialog:focus { outline: none; }
@media (max-width: 750px) { .notefriends-brand { --nf-control-h: 44px; } }