/**
 * Myco panel — design tokens (single source of truth).
 *
 * Values come from the "Myco Panel Redesign" handoff board (v1, Aug 2026).
 * Light is the default theme; dark swaps SURFACE tokens only (accents stay).
 * Theme is chosen by `data-theme="light|dark"` on <html> (set server-side from
 * the myco_theme cookie in header.php, toggled by ui.js). No token may be
 * defined only inside the dark block — every token gets its light value here.
 */

:root {
	color-scheme: light;
	/* ---- Type ---- */
	--myco-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--myco-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--myco-font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--myco-display-weight: 560;
	--myco-display-italic-weight: 440;

	/* ---- Surfaces (light) ---- */
	--myco-bg: #F6F3EA;            /* page background, input prefix blocks, inset wells */
	--myco-card: #FFFDF8;          /* cards, modals, tables, light sidebar (assistant) */
	--myco-tint: #FBF8F0;          /* highlighted table rows, modal footers, table headers */
	--myco-well: #F6F3EA;          /* inset wells inside cards (same as bg in light) */
	--myco-thumb: #F0EDE2;         /* image / thumbnail placeholders */
	--myco-track: #E9E3D3;         /* progress-bar tracks, meter empty segments */
	--myco-surface-dark: #0E1413;  /* sidebar, wizard topbar, dark cards, mobile menu */
	--myco-card-dark: #121917;     /* card background in dark theme */
	--myco-input-bg: #FFFFFF;      /* text inputs, selects, secondary buttons */

	/* ---- Lines ---- */
	--myco-border: #E3DDCD;        /* card & table borders (1px) */
	--myco-divider: #EDE7D8;       /* row dividers inside cards and tables */
	--myco-border-strong: #D8D2C2; /* input & secondary-button borders, off toggle */
	--myco-border-dashed: #C9C2AE; /* dashed add-new tiles, empty radio rings */
	--myco-line-on-dark: rgba( 236, 231, 219, 0.12 );

	/* ---- Text ---- */
	--myco-ink: #0A0E0D;           /* primary text, dark buttons, active tab underline */
	--myco-text: #0A0E0D;
	--myco-text-2: #5C6B64;        /* secondary text, descriptions */
	--myco-muted: #7C8B84;         /* muted text, labels, inactive nav, placeholder icons */
	--myco-cream: #ECE7DB;         /* text on dark surfaces, active stepper node */
	--myco-on-accent: #0A0E0D;     /* text on mint */

	/* ---- Accents (theme-invariant) ---- */
	--myco-accent: #5BD6AE;        /* primary buttons, active toggle, progress fill, logo */
	--myco-accent-ink: #147A58;    /* success text, status Online/Ready/Paid */
	--myco-link: #177557;
	--myco-link-hover: #0F5940;
	--myco-warn: #E8B873;
	--myco-warn-ink: #8A5B1E;
	--myco-danger: #B04A36;
	--myco-danger-hover: #8F3A2A;
	--myco-danger-on-dark: #D97B66;
	--myco-info: #5C6B64;

	/* ---- Alpha overlays ---- */
	--myco-overlay-active-dark: rgba( 236, 231, 219, 0.12 );  /* active item on dark */
	--myco-scrim: rgba( 10, 14, 13, 0.45 );                   /* modal scrim */
	--myco-hover: rgba( 10, 14, 13, 0.05 );                   /* hover on light */
	--myco-active: rgba( 10, 14, 13, 0.08 );                  /* active/pressed on light */
	--myco-success-fill: rgba( 91, 214, 174, 0.12 );
	--myco-success-fill-strong: rgba( 91, 214, 174, 0.18 );
	--myco-warn-fill: rgba( 232, 184, 115, 0.16 );
	--myco-warn-pill: rgba( 232, 184, 115, 0.25 );
	--myco-warn-border: rgba( 232, 184, 115, 0.5 );
	--myco-danger-fill: rgba( 176, 74, 54, 0.07 );
	--myco-danger-pill: rgba( 176, 74, 54, 0.12 );
	--myco-danger-border: rgba( 176, 74, 54, 0.5 );
	--myco-focus-ring: rgba( 91, 214, 174, 0.45 );

	/* ---- Geometry ---- */
	--myco-radius-xs: 8px;    /* chips, small buttons */
	--myco-radius-sm: 10px;   /* buttons, inputs */
	--myco-radius-md: 12px;   /* banners, option rows, dropdowns */
	--myco-radius: 14px;      /* cards */
	--myco-radius-lg: 16px;   /* modals, plan cards */
	--myco-radius-xl: 18px;   /* screen frames */
	--myco-radius-pill: 999px;

	/* ---- Elevation ---- */
	--myco-shadow-modal: 0 30px 70px rgba( 0, 0, 0, 0.4 );
	--myco-shadow-pop: 0 16px 40px rgba( 10, 14, 13, 0.18 );
	--myco-shadow-toast: 0 10px 30px rgba( 0, 0, 0, 0.4 );
	--myco-shadow: none;      /* cards: border only */

	/* ---- Layout ---- */
	--myco-sidebar-w: 224px;
	--myco-content-pad-y: 36px;
	--myco-content-pad-x: 44px;
	--myco-card-pad: 20px 22px;
	--myco-card-pad-tight: 18px 20px;
	--myco-modal-pad: 26px 28px;
	--myco-gap: 14px;
	--myco-mobile-nav-h: 64px;

	/* ---- Control heights ---- */
	--myco-h-xs: 30px;  /* table buttons */
	--myco-h-sm: 34px;  /* card buttons */
	--myco-h-md: 38px;  /* inputs, standard buttons */
	--myco-h-lg: 42px;  /* wizard CTAs */
	--myco-h-xl: 46px;  /* pay button */

	/* ---- Dark button / avatar tile ---- */
	--myco-btn-dark-bg: var( --myco-ink );
	--myco-btn-dark-fg: var( --myco-cream );

}

/* ---- Dark theme: surfaces only ---- */
:root[data-theme="dark"] {
	color-scheme: dark;
	--myco-bg: #0A0E0D;
	--myco-card: #121917;
	--myco-tint: #161E1B;
	--myco-well: #0E1413;
	--myco-thumb: #1A221F;
	--myco-track: rgba( 236, 231, 219, 0.12 );
	--myco-input-bg: #0E1413;

	--myco-border: rgba( 236, 231, 219, 0.12 );
	--myco-divider: rgba( 236, 231, 219, 0.1 );
	--myco-border-strong: rgba( 236, 231, 219, 0.22 );
	--myco-border-dashed: rgba( 236, 231, 219, 0.3 );

	--myco-ink: #ECE7DB;
	--myco-text: #ECE7DB;
	--myco-text-2: #A9B3AE;
	--myco-muted: #8C9A93;

	--myco-link: #5BD6AE;
	--myco-link-hover: #7FE3C1;
	--myco-danger: #D97B66;
	--myco-danger-hover: #E6957F;
	--myco-warn-ink: #E8B873;
	--myco-accent-ink: #5BD6AE;

	--myco-hover: rgba( 236, 231, 219, 0.06 );
	--myco-active: rgba( 236, 231, 219, 0.1 );
	--myco-warn-fill: rgba( 232, 184, 115, 0.1 );
	--myco-warn-border: rgba( 232, 184, 115, 0.35 );
	--myco-danger-fill: rgba( 217, 123, 102, 0.1 );
	--myco-danger-border: rgba( 217, 123, 102, 0.45 );
	--myco-scrim: rgba( 0, 0, 0, 0.6 );
	--myco-shadow-pop: 0 16px 40px rgba( 0, 0, 0, 0.5 );

	/* "Dark" buttons/avatars invert on the dark theme (cream on ink). */
	--myco-btn-dark-bg: #ECE7DB;
	--myco-btn-dark-fg: #0A0E0D;
}