/* ============================================================ iSticker — Design Tokens Single source of truth for every visual property. Prefix: --is- ============================================================ */ :root { /* ---- Typography ---- */ --is-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --is-font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Courier New", monospace; --is-fs-xs: 0.6875rem; /* 11px */ --is-fs-sm: 0.75rem; /* 12px */ --is-fs-md: 0.8125rem; /* 13px */ --is-fs-base: 0.875rem; /* 14px */ --is-fs-lg: 1rem; /* 16px */ --is-fs-xl: 1.25rem; /* 20px */ --is-fs-2xl: 1.5rem; /* 24px */ --is-fw-normal: 400; --is-fw-medium: 500; --is-fw-semibold: 600; --is-fw-bold: 700; --is-lh-tight: 1.2; --is-lh-normal: 1.5; --is-lh-relaxed: 1.7; /* ---- Spacing (4px grid) ---- */ --is-sp-0: 0; --is-sp-1: 0.25rem; /* 4 */ --is-sp-2: 0.5rem; /* 8 */ --is-sp-3: 0.75rem; /* 12 */ --is-sp-4: 1rem; /* 16 */ --is-sp-5: 1.25rem; /* 20 */ --is-sp-6: 1.5rem; /* 24 */ --is-sp-8: 2rem; /* 32 */ --is-sp-10: 2.5rem; /* 40 */ --is-sp-12: 3rem; /* 48 */ /* ---- Radii ---- */ --is-r-xs: 2px; --is-r-sm: 4px; --is-r-md: 6px; --is-r-lg: 8px; --is-r-xl: 12px; --is-r-2xl: 16px; --is-r-full: 9999px; /* ---- Shadows ---- */ --is-shadow-xs: 0 1px 2px rgba(0,0,0,.05); --is-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --is-shadow-md: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.05); --is-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04); --is-shadow-xl: 0 20px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.04); /* ---- Transitions ---- */ --is-dur-fast: 100ms; --is-dur-normal: 180ms; --is-dur-slow: 300ms; --is-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --is-ease-in: cubic-bezier(0.55, 0, 1, 0.45); --is-ease-inout: cubic-bezier(0.45, 0, 0.55, 1); /* ---- Z-index layers ---- */ --is-z-base: 0; --is-z-dropdown: 100; --is-z-sticky: 200; --is-z-overlay: 300; --is-z-modal: 400; --is-z-toast: 500; /* ---- Layout ---- */ --is-header-h: 48px; --is-panel-w: 280px; --is-panel-w-lg: 300px; /* ---- Sizing constraints ---- */ --is-input-h: 32px; --is-input-h-sm: 26px; --is-btn-h: 32px; --is-btn-h-sm: 26px; --is-btn-h-xs: 22px; } /* ============================================================ Light Theme (default) ============================================================ */ :root, [data-theme="light"] { /* Surfaces */ --is-bg-app: #f5f5f7; --is-bg-panel: #ffffff; --is-bg-raised: #ffffff; --is-bg-inset: #f0f0f2; --is-bg-overlay: rgba(0, 0, 0, 0.45); /* Canvas specific */ --is-bg-canvas: #e8e8ec; --is-checkerboard-a: #e0e0e0; --is-checkerboard-b: #ffffff; /* Text */ --is-fg-primary: #1d1d1f; --is-fg-secondary: #6e6e73; --is-fg-tertiary: #aeaeb2; --is-fg-inverse: #ffffff; --is-fg-placeholder:#c7c7cc; /* Borders */ --is-border-default: #d2d2d7; --is-border-subtle: #e5e5ea; --is-border-focus: #0071e3; --is-border-active: #0071e3; /* Brand / Accent */ --is-accent: #0071e3; --is-accent-hover: #0077ed; --is-accent-active: #006edb; --is-accent-subtle: rgba(0, 113, 227, 0.08); --is-accent-fg: #ffffff; /* Semantic */ --is-success: #34c759; --is-success-subtle: rgba(52, 199, 89, 0.1); --is-warning: #ff9f0a; --is-warning-subtle: rgba(255, 159, 10, 0.1); --is-danger: #ff3b30; --is-danger-subtle: rgba(255, 59, 48, 0.08); --is-info: #5ac8fa; /* Interactive states */ --is-hover: rgba(0, 0, 0, 0.04); --is-active: rgba(0, 0, 0, 0.07); --is-selected: rgba(0, 113, 227, 0.1); /* Input */ --is-input-bg: #ffffff; --is-input-border: #d2d2d7; --is-input-focus: #0071e3; /* Scrollbar */ --is-scrollbar-thumb: rgba(0, 0, 0, 0.18); --is-scrollbar-track: transparent; /* Badge */ --is-badge-bg: #f0f0f2; --is-badge-fg: #6e6e73; } /* ============================================================ Dark Theme ============================================================ */ [data-theme="dark"] { /* Surfaces */ --is-bg-app: #1c1c1e; --is-bg-panel: #2c2c2e; --is-bg-raised: #3a3a3c; --is-bg-inset: #1c1c1e; --is-bg-overlay: rgba(0, 0, 0, 0.6); /* Canvas */ --is-bg-canvas: #28282a; --is-checkerboard-a: #333336; --is-checkerboard-b: #3a3a3c; /* Text */ --is-fg-primary: #f5f5f7; --is-fg-secondary: #98989d; --is-fg-tertiary: #636366; --is-fg-inverse: #1d1d1f; --is-fg-placeholder:#48484a; /* Borders */ --is-border-default: #48484a; --is-border-subtle: #38383a; --is-border-focus: #0a84ff; --is-border-active: #0a84ff; /* Brand / Accent */ --is-accent: #0a84ff; --is-accent-hover: #409cff; --is-accent-active: #007aff; --is-accent-subtle: rgba(10, 132, 255, 0.15); --is-accent-fg: #ffffff; /* Semantic */ --is-success: #30d158; --is-success-subtle: rgba(48, 209, 88, 0.15); --is-warning: #ffd60a; --is-warning-subtle: rgba(255, 214, 10, 0.12); --is-danger: #ff453a; --is-danger-subtle: rgba(255, 69, 58, 0.15); --is-info: #64d2ff; /* Interactive states */ --is-hover: rgba(255, 255, 255, 0.06); --is-active: rgba(255, 255, 255, 0.1); --is-selected: rgba(10, 132, 255, 0.18); /* Input */ --is-input-bg: #1c1c1e; --is-input-border: #48484a; --is-input-focus: #0a84ff; /* Scrollbar */ --is-scrollbar-thumb: rgba(255, 255, 255, 0.2); --is-scrollbar-track: transparent; /* Badge */ --is-badge-bg: #3a3a3c; --is-badge-fg: #98989d; /* Shadows are heavier in dark mode */ --is-shadow-xs: 0 1px 2px rgba(0,0,0,.25); --is-shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2); --is-shadow-md: 0 4px 6px -1px rgba(0,0,0,.35), 0 2px 4px -2px rgba(0,0,0,.2); --is-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.35), 0 4px 6px -4px rgba(0,0,0,.15); --is-shadow-xl: 0 20px 25px -5px rgba(0,0,0,.35), 0 8px 10px -6px rgba(0,0,0,.15); }