/* =========================================================
   FASTUI DESIGN TOKENS — v1.0.0
   Consolidated master file
   ========================================================= */

/* ---------------------------------------------------------
   META / SYSTEM
   --------------------------------------------------------- */
:root {
    --ds-version: "1.0.0";
    --ds-name: "fastui";
    --ds-scale: 1;
    --group-color: initial;
    --group-typography: initial;
    --group-spacing: initial;
    --group-radius: initial;
    --group-shadow: initial;
    --group-surface: initial;
    --group-motion: initial;
    --group-component: initial;
    --comp-button: initial;
    --comp-input: initial;
    --comp-select: initial;
    --comp-checkbox: initial;
    --comp-radio: initial;
    --comp-switch: initial;
    --comp-card: initial;
    --comp-modal: initial;
    --comp-toast: initial;
    --comp-tooltip: initial;
    --comp-menu: initial;
    --comp-table: initial;
    --comp-tabs: initial;
    --comp-breadcrumb: initial;
    --comp-pagination: initial;
    --comp-alert: initial;
    --comp-progress: initial;
    --comp-skeleton: initial;
    --comp-calendar: initial;
    --future-1: initial;
    --future-2: initial;
    --future-3: initial;
}

/* ---------------------------------------------------------
   COLOR SYSTEM
   --------------------------------------------------------- */
:root {
    /* Grays */
    --gray-1: #f8f9fa;
    --gray-2: #f1f3f5;
    --gray-3: #e9ecef;
    --gray-4: #dee2e6;
    --gray-5: #ced4da;
    --gray-6: #adb5bd;
    --gray-7: #868e96;
    --gray-8: #495057;
    --gray-9: #343a40;
    --gray-10: #212529;
    /* Accent */
    --accent-1: #f0f7ff;
    --accent-2: #d9ebff;
    --accent-3: #b3d7ff;
    --accent-4: #4da3ff;
    --accent-5: #1c7ed6;
    --accent-6: #1864ab;
    --accent-7: #0b4b83;
    /* Semantic */
    --red-2: #ffe3e3;
    --red-3: #ffa8a8;
    --red-6: #fa5252;
    --red-7: #e03131;
    --yellow-2: #fff3bf;
    --yellow-3: #ffec99;
    --yellow-7: #f08c00;
    --yellow-8: #e67700;
    --green-2: #d3f9d8;
    --green-3: #b2f2bb;
    --green-6: #40c057;
    --green-7: #2f9e44;
    /* Text */
    --text-1: var(--gray-10);
    --text-2: var(--gray-8);
    --text-3: var(--gray-6);
    --text-4: var(--gray-5);
    --text-inverse: #ffffff;
    /* Surfaces */
    --surface-1: #ffffff;
    --surface-2: var(--gray-1);
    --surface-3: var(--gray-2);
    --surface-4: var(--gray-3);
}

/* ---------------------------------------------------------
   TYPOGRAPHY
   --------------------------------------------------------- */
:root {
    --font-family: "Inter", system-ui, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.1;
    --line-height-normal: 1.4;
    --line-height-loose: 1.6;
}

/* ---------------------------------------------------------
   SPACING
   --------------------------------------------------------- */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
}

/* ---------------------------------------------------------
   RADIUS
   --------------------------------------------------------- */
:root {
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-full: 999px;
}

/* ---------------------------------------------------------
   SHADOWS
   --------------------------------------------------------- */
:root {
    --shadow-1: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-2: 0 2px 4px rgba(0,0,0,0.08);
    --shadow-3: 0 4px 8px rgba(0,0,0,0.10);
    --shadow-4: 0 8px 16px rgba(0,0,0,0.12);
}

/* ---------------------------------------------------------
   MOTION
   --------------------------------------------------------- */
:root {
    --ease-out-1: cubic-bezier(0.25, 0.8, 0.5, 1);
    --ease-out-2: cubic-bezier(0.2, 0.8, 0.4, 1);
    --duration-fast: 120ms;
    --duration-medium: 180ms;
    --duration-slow: 260ms;
}

/* ---------------------------------------------------------
   COMPONENT TOKENS
   (Buttons, Inputs, Selects, Checkbox, Radio, Switch,
    Card, Modal, Toast, Tooltip, Menu, Table, Tabs,
    Breadcrumb, Pagination, Alert, Progress, Skeleton,
    Calendar)
   --------------------------------------------------------- */

/* BUTTONS */
:root {
    --button-font-size: 14px;
    --button-font-weight: 600;
    --button-radius: 6px;
    --button-pad-x: 14px;
    --button-pad-y: 8px;
    --button-primary-bg: var(--accent-4);
    --button-primary-text: var(--text-inverse);
    --button-primary-hover-bg: var(--accent-5);
    --button-secondary-bg: var(--surface-3);
    --button-secondary-text: var(--text-1);
    --button-secondary-hover-bg: var(--surface-4);
}

/* INPUTS */
:root {
    --input-bg: var(--surface-1);
    --input-border: 1px solid var(--surface-4);
    --input-radius: 6px;
    --input-pad-x: 10px;
    --input-pad-y: 8px;
    --input-font-size: 14px;
    --input-text: var(--text-1);
    --input-placeholder: var(--text-4);
}

/* SELECTS */
:root {
    --select-bg: var(--surface-1);
    --select-border: 1px solid var(--surface-4);
    --select-radius: 6px;
    --select-pad-x: 10px;
    --select-pad-y: 8px;
    --select-font-size: 14px;
}

/* CHECKBOX */
:root {
    --checkbox-size: 16px;
    --checkbox-radius: 4px;
    --checkbox-border: 1px solid var(--surface-4);
    --checkbox-bg: var(--surface-1);
    --checkbox-check-color: var(--accent-6);
}

/* RADIO */
:root {
    --radio-size: 16px;
    --radio-border: 1px solid var(--surface-4);
    --radio-dot-size: 8px;
    --radio-dot-color: var(--accent-6);
}

/* SWITCH */
:root {
    --switch-width: 36px;
    --switch-height: 20px;
    --switch-radius: 999px;
    --switch-bg: var(--surface-4);
    --switch-bg-active: var(--accent-4);
    --switch-thumb-size: 16px;
}

/* CARD */
:root {
    --card-bg: var(--surface-1);
    --card-radius: 10px;
    --card-shadow: var(--shadow-2);
    --card-pad: 16px;
}

/* MODAL */
:root {
    --modal-bg: var(--surface-1);
    --modal-radius: 10px;
    --modal-shadow: var(--shadow-4);
    --modal-backdrop: rgba(0,0,0,0.4);
    --modal-pad: 20px;
}

/* TOAST */
:root {
    --toast-bg: var(--surface-1);
    --toast-text: var(--text-1);
    --toast-radius: 8px;
    --toast-shadow: var(--shadow-3);
    --toast-pad: 14px;
}

/* TOOLTIP */
:root {
    --tooltip-bg: var(--gray-10);
    --tooltip-text: var(--text-inverse);
    --tooltip-radius: 6px;
    --tooltip-pad-x: 8px;
    --tooltip-pad-y: 6px;
}

/* MENU */
:root {
    --menu-bg: var(--surface-1);
    --menu-border: 1px solid var(--surface-4);
    --menu-radius: 8px;
    --menu-item-pad-x: 12px;
    --menu-item-pad-y: 8px;
}

/* TABLE */
:root {
    --table-border: 1px solid var(--surface-4);
    --table-row-hover-bg: var(--surface-3);
    --table-pad-x: 12px;
    --table-pad-y: 10px;
}

/* TABS */
:root {
    --tabs-text: var(--text-2);
    --tabs-text-active: var(--text-1);
    --tabs-indicator: var(--accent-4);
    --tabs-gap: 12px;
    --tabs-pad-y: 8px;
}

/* BREADCRUMB */
:root {
    --breadcrumb-text: var(--text-2);
    --breadcrumb-text-hover: var(--text-1);
    --breadcrumb-text-active: var(--text-1);
    --breadcrumb-bg: transparent;
    --breadcrumb-font-size: 14px;
    --breadcrumb-font-weight: 500;
    --breadcrumb-separator-color: var(--text-4);
    --breadcrumb-separator-size: 14px;
    --breadcrumb-gap: 6px;
    --breadcrumb-pad-x: 4px;
    --breadcrumb-pad-y: 2px;
    --breadcrumb-separator-gap: 4px;
    --breadcrumb-separator-weight: 500;
    --breadcrumb-radius: 4px;
}

/* PAGINATION */
:root {
    --pagination-text: var(--text-2);
    --pagination-text-hover: var(--text-1);
    --pagination-text-active: var(--text-inverse);
    --pagination-bg: transparent;
    --pagination-bg-hover: var(--surface-3);
    --pagination-bg-active: var(--accent-4);
    --pagination-border: 1px solid var(--surface-4);
    --pagination-radius: 6px;
    --pagination-font-size: 14px;
    --pagination-font-weight: 500;
    --pagination-icon-size: 16px;
    --pagination-pad-x: 10px;
    --pagination-pad-y: 6px;
    --pagination-gap: 6px;
    --pagination-group-gap: 10px;
    --pagination-min-width: 32px;
    --pagination-min-height: 32px;
}

/* ALERT */
:root {
    --alert-radius: 8px;
    --alert-border-width: 1px;
    --alert-font-size: 14px;
    --alert-font-weight: 500;
    --alert-line-height: 1.4;
    --alert-icon-size: 18px;
    --alert-icon-gap: 10px;
    --alert-info-bg: var(--accent-2);
    --alert-info-border: var(--accent-3);
    --alert-info-text: var(--accent-7);
    --alert-info-icon: var(--accent-6);
    --alert-success-bg: var(--green-2);
    --alert-success-border: var(--green-3);
    --alert-success-text: var(--green-7);
    --alert-success-icon: var(--green-6);
    --alert-warning-bg: var(--yellow-2);
    --alert-warning-border: var(--yellow-3);
    --alert-warning-text: var(--yellow-8);
    --alert-warning-icon: var(--yellow-7);
    --alert-danger-bg: var(--red-2);
    --alert-danger-border: var(--red-3);
    --alert-danger-text: var(--red-7);
    --alert-danger-icon: var(--red-6);
}

/* PROGRESS */
:root {
    --progress-linear-bg: var(--surface-4);
    --progress-linear-fill: var(--accent-4);
    --progress-linear-height: 6px;
    --progress-linear-radius: 3px;
    --progress-circular-size-sm: 20px;
    --progress-circular-size-md: 28px;
    --progress-circular-size-lg: 36px;
    --progress-circular-stroke-bg: var(--surface-4);
    --progress-circular-stroke-fill: var(--accent-4);
    --progress-circular-stroke-width: 3px;
}

/* SKELETON */
:root {
    --skeleton-bg: var(--surface-4);
    --skeleton-shine-bg: var(--surface-3);
    --skeleton-radius: 6px;
    --skeleton-line-height: 14px;
    --skeleton-gap: 10px;
    --skeleton-avatar-size-sm: 28px;
    --skeleton-avatar-size-md: 40px;
    --skeleton-avatar-size-lg: 56px;
}

/* CALENDAR */
:root {
    --calendar-bg: var(--surface-2);
    --calendar-text: var(--text-1);
    --calendar-radius: 10px;
    --calendar-border: 1px solid var(--surface-4);
    --calendar-shadow: var(--shadow-4);
    --calendar-header-text: var(--text-1);
    --calendar-header-font-size: 16px;
    --calendar-header-font-weight: 600;
    --calendar-weekday-text: var(--text-3);
    --calendar-weekday-font-size: 12px;
    --calendar-weekday-font-weight: 600;
    --calendar-day-font-size: 14px;
    --calendar-day-font-weight: 500;
    --calendar-pad-x: 16px;
    --calendar-pad-y: 14px;
    --calendar-header-pad-y: 10px;
    --calendar-header-gap: 12px;
    --calendar-weekday-gap: 6px;
    --calendar-grid-gap: 4px;
    --calendar-day-size: 34px;
    --calendar-day-radius: 6px;
    --calendar-day-today-bg: var(--accent-2);
    --calendar-day-today-text: var(--accent-7);
    --calendar-day-today-border: var(--accent-4);
    --calendar-day-selected-bg: var(--accent-4);
    --calendar-day-selected-text: var(--text-inverse);
    --calendar-day-selected-border: var(--accent-5);
    --calendar-day-range-bg: var(--accent-3);
    --calendar-day-range-text: var(--text-1);
    --calendar-day-range-border: var(--accent-4);
    --calendar-day-range-edge-bg: var(--accent-4);
    --calendar-day-range-edge-text: var(--text-inverse);
    --calendar-day-range-edge-border: var(--accent-5);
    --calendar-day-disabled-text: var(--text-4);
    --calendar-day-hover-bg: var(--surface-3);
}

/* ---------------------------------------------------------
   UTILITY TOKENS
   --------------------------------------------------------- */
:root {
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-fixed: 1200;
    --z-modal-backdrop: 1300;
    --z-modal: 1400;
    --z-popover: 1500;
    --z-toast: 1600;
    --z-tooltip: 1700;
    --opacity-0: 0;
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-40: 0.4;
    --opacity-60: 0.6;
    --opacity-80: 0.8;
    --opacity-100: 1;
    --scale-sm: 0.96;
    --scale-md: 0.98;
    --scale-lg: 1.02;
    --translate-sm: 2px;
    --translate-md: 4px;
    --translate-lg: 8px;
    --motion-snap: cubic-bezier(0.2, 0.8, 0.4, 1);
    --motion-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --motion-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --motion-fast: 120ms;
    --motion-normal: 180ms;
    --motion-slow: 260ms;
}