/* SENPRO design tokens. GENERATED by `python manage.py build_tokens`
   from design/design-system/tokens.json: do not edit by hand. */

@font-face { font-family: 'Satoshi'; src: url('../senpro/fonts/Satoshi-Variable.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope/Manrope-Variable-latin.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }

:root, [data-theme="light"] {
  --surface-page: #f5f5f5; /* App background behind the sidebar and top bar; page canvas for lists, grids and the feed. */
  --surface-card: #ffffff; /* Cards, sidebar, top bar, modals, inputs and secondary buttons. */
  --surface-sunken: #faf8f5; /* Modal footer bar and attachment rows: a quiet step down from surface-card. */
  --surface-subtle: #f4f2ee; /* Info callouts and the selected option tile's fill. */
  --surface-muted: #efede9; /* Organisation switcher and small neutral action chips on cards. */
  --surface-showcase: #f7f5f2; /* Documentation and showcase backgrounds; not used in product screens. */
  --surface-media: #ede9e2; /* Empty media area on content cards (16:9) before an image loads or when there is none. */
  --surface-hover: #ece8e1; /* Tertiary button hover and secondary button pressed fill. */
  --surface-pressed: #e2dcd2; /* Tertiary button pressed fill. */
  --surface-secondary-hover: #f6f4f0; /* Secondary button hover fill. */
  --scrim: #6e6a64; /* Solid backdrop behind modals in mockups; in product use at ~70% over the page. */
  --scrim-overlay: rgba(110,106,100,0.7); /* The modal backdrop as used in product: scrim at 70% in light, black at 60% in dark. */
  --ink: #1c1a17; /* Primary text and headings on every surface; the selected filter pill fill; the focus ring colour. 15:1+ on surface-page. */
  --ink-secondary: #3d3934; /* Nav items, icon buttons, tertiary button text, body copy in callouts. 11:1 on white. */
  --ink-muted: #5f5a52; /* Descriptions, helper text, overlines, card meta, close/⋯ icons. 6.8:1 on white, 6.4:1 on surface-sunken. */
  --ink-subtle: #6b665e; /* Sidebar section headings (Library, More, Business), footer copyright and state labels in documentation. 5.7:1 on white. */
  --ink-placeholder: #8a847b; /* Input placeholders, search icon, counts inside filter pills. 3.7:1 on white: FAILS 4.5:1 for text (kept from source) — never use for content the user must read. Dark: 3.8:1 on surface-card, same flag. */
  --ink-disabled: #b3ada3; /* Disabled secondary/tertiary button text. Decorative only (2.2:1). */
  --border: #e6e2db; /* 1px borders on cards, the sidebar edge and the top bar. */
  --border-input: #ddd8cf; /* Inputs, select triggers, option tiles, filter pills. 1.4:1 on white: below the 3:1 control-border target (kept from source; consider darkening). */
  --border-control: #cfc8bc; /* Secondary button border. 1.7:1 on white (kept from source). */
  --border-strong: #b9b1a4; /* Secondary button border on hover and press. */
  --divider: #ece8e1; /* Hairlines between modal sections and around the modal footer and composer toolbar. */
  --divider-row: #f0ece6; /* Row separators inside list and calendar cards. */
  --brand: #7a6446; /* Primary buttons and icons in attachment tiles. White on brand 5.6:1. Dark: tan #C4A57C with on-brand (ink) text, 7.5:1. */
  --brand-hover: #665339; /* Primary button hover. */
  --brand-pressed: #564530; /* Primary button pressed. */
  --brand-disabled: #dcd5ca; /* Primary button disabled fill (white text on it is decorative, 1.5:1). */
  --brand-soft: #efe7dc; /* Active sidebar item fill and small author avatars. */
  --on-brand-soft: #6b5639; /* Text on brand-soft: active nav label and avatar initials. 5.7:1. */
  --on-brand: #ffffff; /* Text and icons on brand, danger and ink fills. Dark: ink (#1C1A17), because brand, danger and ink fills are light in dark mode (7.5:1 on brand, 6.3:1 on danger). */
  --brand-tan: #a68b63; /* The tan of PRO in UI-drawn placeholders; tinted (25%) as the audience selector fill in the composer. */
  --logo-tile: #414042; /* The charcoal of the square SEN/PRO logo tile. */
  --logo-tan: #aa8d6b; /* PRO in the square logo. 3.3:1 on logo-tile: large display lettering only. */
  --chip: #f1ede6; /* Removable group chips inside the tag input. */
  --avatar: #d9cfc1; /* Account avatar button in the top bar (text ink-secondary). */
  --danger: #b42318; /* Destructive buttons (Delete). White on it 6.6:1. Dark: #F0796C with ink text, 6.3:1; as text on surface-card 6.2:1. */
  --danger-hover: #9a1c12; /* Destructive button hover. */
  --danger-pressed: #7f170f; /* Destructive button pressed. */
  --danger-disabled: #ebc3bf; /* Destructive button disabled fill. */
  --badge-alert: #c0392b; /* Unread count badge on top-bar icons. White on it 5.4:1. */
  --focus-ring: var(--ink); /* Keyboard focus: 2px surface-card gap then a 2px ring in this colour (shadow-focus). */
  --surface-inverse: var(--ink); /* The one dark surface: the client details card and the planner macro strip. Text on it is on-inverse (17:1) or on-inverse-muted. Dark: #2A2622, one step up from surface-card; text on it uses on-inverse, not on-brand. */
  --on-inverse-muted: #b3ada3; /* Labels on surface-inverse (details card labels, macro strip headings). 7.8:1 on ink. */
  --on-inverse: #ffffff; /* Text and icons on surface-inverse. Light: white (17:1 on ink). Dark: ink (13:1 on the raised #2A2622). */
  --success: #3fa772; /* Status fills and dots: habit done, check-in completed. 3:1 on white, so fills and icons only; glyphs on it are ink (5.8:1). From the live-site status palette. */
  --success-soft: #e3f3ea; /* Success badge fill. */
  --on-success-soft: #1e6b45; /* Text on success-soft (5.6:1) and positive trend text on white. */
  --warning: #e0a63a; /* Status fills and dots: habit partly done, check-in due. Fills only; glyphs on it are ink (8:1). From the live-site status palette. */
  --warning-soft: #fbeacb; /* Warning badge fill: Scheduled, Pending, Due today. From the live-site scheduled-post badge. */
  --on-warning-soft: #8a6212; /* Text on warning-soft (4.6:1). From the live-site scheduled-post badge. */
  --danger-soft: #fbe7e5; /* Danger badge fill (text is danger, 5.5:1): Did not complete, missed. */
  --shadow-modal: 0 24px 64px rgba(20,18,15,0.32); /* Modals. Menus use shadow-menu; cards stay flat with a 1px border. */
  --shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px #1c1a17; /* Keyboard focus on buttons, inputs and tiles. */
  --shadow-menu: 0 8px 24px rgba(20,18,15,0.12); /* Dropdown menus, the notifications panel and other popovers. */
}

[data-theme="dark"] {
  color-scheme: dark;
  --surface-page: #141210;
  --surface-card: #1e1b18;
  --surface-sunken: #191714;
  --surface-subtle: #26221e;
  --surface-muted: #2a2622;
  --surface-showcase: #191714;
  --surface-media: #2a2622;
  --surface-hover: #2e2a25;
  --surface-pressed: #38332d;
  --surface-secondary-hover: #26221e;
  --scrim: #000000;
  --scrim-overlay: rgba(0,0,0,0.6);
  --ink: #f2eee8;
  --ink-secondary: #d9d3c9;
  --ink-muted: #a8a095;
  --ink-subtle: #9d958a;
  --ink-placeholder: #7d766c;
  --ink-disabled: #57514a;
  --border: #34302a;
  --border-input: #48423b;
  --border-control: #554e45;
  --border-strong: #6b6358;
  --divider: #2e2a25;
  --divider-row: #29251f;
  --brand: #c4a57c;
  --brand-hover: #d1b48c;
  --brand-pressed: #b39469;
  --brand-disabled: #3a342c;
  --brand-soft: #352b20;
  --on-brand-soft: #e3caa6;
  --on-brand: #1c1a17;
  --brand-tan: #b8986c;
  --chip: #2a2622;
  --avatar: #4a4036;
  --danger: #f0796c;
  --danger-hover: #f4958a;
  --danger-pressed: #e0645a;
  --danger-disabled: #4a2a26;
  --badge-alert: #f0796c;
  --surface-inverse: #2a2622;
  --on-inverse-muted: #a8a095;
  --on-inverse: var(--ink);
  --success: #4cbf85;
  --success-soft: #173526;
  --on-success-soft: #8fdcb3;
  --warning: #e8b04d;
  --warning-soft: #3a2c12;
  --on-warning-soft: #f0c878;
  --danger-soft: #3d1c18;
  --shadow-modal: 0 24px 64px rgba(0,0,0,0.6);
  --shadow-focus: 0 0 0 2px #1e1b18, 0 0 0 4px #f2eee8;
  --shadow-menu: 0 8px 24px rgba(0,0,0,0.45);
}

:root {
  --space-4: 4px; /* Hairline gaps: modal title to subtitle, pill internals. */
  --space-6: 6px; /* Label to input; icon to text in small links. */
  --space-8: 8px; /* Button groups in headers, icon to label inside buttons. */
  --space-10: 10px; /* Gap between footer buttons; icon to label in callouts. */
  --space-12: 12px; /* Grid gap between paired fields and option tiles. */
  --space-14: 14px; /* Option tile padding; section inner gap in modals. */
  --space-16: 16px; /* Gap between modal header items; field stacks in small forms. */
  --space-20: 20px; /* Top-bar side padding; card padding in docs. */
  --space-24: 24px; /* Gap between modal sections, card grid gap, page-header bottom margin. */
  --space-28: 28px; /* Modal horizontal padding. */
  --space-32: 32px; /* Main column top padding. */
  --space-40: 40px; /* Main column side padding. */
  --radius-xs: 6px; /* Logo mark corner at 32px; tiny icon buttons inside chips. */
  --radius-sm: 8px; /* Sidebar items, filter pills, chips, 40px icon tiles. */
  --radius-md: 10px; /* Buttons, inputs, select triggers, icon buttons, callouts, org switcher. */
  --radius-lg: 12px; /* Option tiles and attachment rows. */
  --radius-xl: 14px; /* Cards: content cards, list and grid containers. */
  --radius-2xl: 16px; /* Modals. */
  --radius-full: 9999px; /* Avatars and count badges. */
  --control-md: 44px; /* Default button, input and icon-button height: the touch-target minimum. */
  --control-sm: 36px; /* Small buttons in page headers, list rows and filter pills. */
  --nav-item: 40px; /* Sidebar item height. */
  --topbar-height: 64px; /* Top bar height. */
  --sidebar-width: 272px; /* Sidebar width on desktop. */
  --page-max: 1040px; /* Maximum width of every page's content. Content is centred in the main area at this width on every layout (feed, list, card grid, settings). */
  --planner-min-height: 500px; /* Minimum height of the planner's days (Week view), so an empty week still looks like a planner rather than a strip of day headings (RS-164). */
  --page-end-space: 320px; /* Space below the content of list and card pages (Library, Consultations, Questionnaires, Services), so the last item can be scrolled up the screen and its ⋯ menu opens fully in view. */
  --modal-sm: 480px; /* Small form modals (New client). */
  --modal-md: 560px; /* Sectioned form modals (New team member). */
  --modal-lg: 720px; /* Composer modal (New post). */
  --modal-wide: 880px; /* The What's new overlay: the release list beside the selected update (Sean's What's New design). */
  --font-sans: 'Satoshi', 'Helvetica Neue', sans-serif;
  --font-display: 'Manrope', 'Helvetica Neue', sans-serif;
  --text-page-title: 500 30px/1.2 var(--font-display); /* One H1 per page, top-left of the main column. */
  --text-page-title-tracking: -0.01em;
  --text-page-title-mobile: 500 20px/1.2 var(--font-display); /* The page-title H1 on phones (below 768px), so long titles fit beside the header actions. */
  --text-page-title-mobile-tracking: -0.01em;
  --text-modal-title: 700 20px/1.3 var(--font-display); /* Modal and section headings. */
  --text-modal-title-tracking: -0.01em;
  --text-wordmark: 600 17px/1.2 var(--font-sans); /* The SENPRO wordmark beside the square mark. Always uppercase. */
  --text-wordmark-tracking: 0.06em;
  --text-body-lg: 400 18px/1.55 var(--font-sans); /* Composer text area. */
  --text-card-title: 600 16px/1.35 var(--font-display); /* Content card titles, clamped to two lines. */
  --text-section-title: 700 16px/1.35 var(--font-display); /* Headings inside cards and panels: Recent activity, Past check-ins, Ingredients, Method. */
  --text-section-title-tracking: -0.01em;
  --text-body: 400 15px/1.35 var(--font-sans); /* Default UI text: inputs, buttons (600), nav items (500), option titles (600). */
  --text-input-mobile: 400 16px/1.35 var(--font-sans); /* Text in fields (inputs, text areas, selects) on phones, below 768px: iOS zooms the page in on any field under 16px. Desktop fields stay body. */
  --text-body-sm: 400 14px/1.45 var(--font-sans); /* Modal subtitles, callouts, links, filter pills. */
  --text-label: 600 14px/1.35 var(--font-sans); /* Form field labels above inputs. */
  --text-caption: 400 13px/1.4 var(--font-sans); /* Option descriptions, card meta, helper text, sidebar section headings. */
  --text-overline: 700 12px/1.3 var(--font-sans); /* Uppercase section labels inside modals (Details, Role, Client access). */
  --text-overline-tracking: 0.08em;
  --text-micro: 700 11px/1.45 var(--font-sans); /* Count badges only. */
}