/* LumioTrees tokens.css
 * Purpose: design tokens only (colors, typography tokens, spacing/radius/shadows, semantic variables).
 */

:root {

/* =====================
   TYPOGRAPHY
===================== */

--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;


/* =====================
   BASE COLORS
===================== */

--color-body-bg: #F4F5FA;
--color-card-bg: #FFFFFF;
--color-menu-active-bg: #F0F0F1;

--color-text-primary: #1D2327;
--color-text-secondary: #50575e;
--color-text-muted: #8c8f94;
--color-text-inverted: #FFFFFF;


/* =====================
   BRAND / ACCENT
===================== */

--color-primary: #61A945;
--color-primary-hover: #53933b;
--color-primary-active: #457b31;

--color-accent-soft: #eaf5e4;


/* =====================
   BACKGROUNDS
===================== */

--bg-page: var(--color-body-bg);
--bg-card: var(--color-card-bg);
--bg-secondary: #fafafb;
--bg-hover: #f6f7f7;
--bg-active: var(--color-menu-active-bg);


/* =====================
   BORDERS
===================== */

--border-default: #dcdcde;
--border-light: #e5e5e5;
--border-strong: #c3c4c7;
--border-focus: var(--color-primary);


/* =====================
   BUTTONS
===================== */

--btn-header-menu-bg: transparent;
--btn-header-menu-hover: #F4F5FA;
--btn-header-menu-text: var(--color-text-primary);

--btn-card-menu-bg: transparent;
--btn-card-menu-hover: #F4F5FA;
--btn-card-menu-text: var(--color-text-primary);

--btn-primary-bg: var(--color-primary);
--btn-primary-hover: var(--color-primary-hover);
--btn-primary-text: #ffffff;

--btn-secondary-bg: #444444;
--btn-secondary-hover: #1D2327;
--btn-secondary-text: #ffffff;

--btn-ghost-bg: #F4F5FA;
--btn-ghost-hover: #C0C0C0;
--btn-ghost-text: #888888;

--btn-danger-bg: #FFECEC;
--btn-danger-hover: #FFB3B3;
--btn-danger-text: #C0392B;


/* =====================
   LINKS
===================== */

--link-color: var(--color-primary);
--link-hover: var(--color-primary-hover);
--link-visited: #4e8d39;


/* =====================
   TABLES
===================== */

--table-header-bg: #f6f7f7;
--table-row-alt: #fafafa;
--table-row-hover: #f3f4f6;


/* =====================
   FORMS
===================== */

--input-bg: #ffffff;
--input-border: #c3c4c7;
--input-focus: var(--color-primary);
--input-placeholder: #8c8f94;


/* =====================
   STATUS COLORS
===================== */

--color-success: #46b450;
--color-warning: #ffb900;
--color-error: #d63638;
--color-info: #2271b1;


/* =====================
   BADGES
===================== */

--badge-bg: #eaf5e4;
--badge-text: #457b31;


/* =====================
   MODALS
===================== */

--modal-bg: #ffffff;
--modal-overlay: rgba(0,0,0,0.4);


/* =====================
   ICONS
===================== */

--icon-default: #646970;
--icon-muted: #8c8f94;
--icon-active: var(--color-primary);
--icon-danger: var(--color-error);


/* =====================
   SHADOWS
===================== */

--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 6px 16px rgba(0,0,0,0.10);
--shadow-lg: 0 10px 28px rgba(0,0,0,0.16);


/* =====================
   RADIUS
===================== */

--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;

}