/* ═══════════════════════════════════════════════════════════════════ tokens/primitives.css Primitive design tokens — raw values without semantic meaning. These are the "atoms" of the design system. Load FIRST, before semantic tokens. ═══════════════════════════════════════════════════════════════════ */ @layer tokens { :root { /* ══ BRAND IDENTITY COLORS ═════════════════════════════════════ Distinct from --color-primary (UI accent). These tokens represent the SetModus brand mark identity. PLACEHOLDER VALUES: --brand-primary and --brand-accent currently match the interim mark/lockup SVGs. Both will be updated to the designer-led identity's palette when the redesign ships. See /home/nedim/sm_branding/setmodus-brand-system.md (designer brief, outside the repo) for the redesign trajectory. SYSTEM CONSTANT: --brand-chrome stays through the redesign. It is the operator-neutral background for surfaces hosting reseller-overrideable logos (mailer header band). The designer is asked NOT to coordinate their palette with --brand-chrome; the chrome surface is reseller-content, not platform-brand-content. */ --brand-primary: #1E40AF; /* PLACEHOLDER — designer redefines */ --brand-accent: #F59E0B; /* PLACEHOLDER — designer redefines */ --brand-chrome: #1f2937; /* System constant — operator-neutral */ /* ══ BRAND COLORS — original electric indigo ═══════════════ */ --color-primary-hue: 247; --color-primary-sat: 83%; --color-primary-lit: 67%; --color-primary: #6366f1; --color-primary-hover: #4f46e5; --color-success: #22c55e; --color-warning: #f59e0b; --color-danger: #ef4444; --color-info: #3b82f6; /* ══ ADDITIONAL BRAND COLORS ═══════════════════════════════ */ --color-sky: #0ea5e9; --color-sky-light: #38bdf8; --color-cyan: #06b6d4; --color-purple: #8b5cf6; --color-purple-light: #a78bfa; --color-teal: #14b8a6; --color-teal-light: #2dd4bf; --color-emerald: #10b981; --color-emerald-light: #34d399; --color-slate: #64748b; --color-slate-light: #94a3b8; --color-success-light: #4ade80; --color-warning-light: #fbbf24; --color-danger-light: #f87171; --color-info-light: #60a5fa; --color-primary-light: #818cf8; /* ── Dark variants (used in gradients and hover states) ──── */ --color-success-dark: #15803d; --color-warning-dark: #d97706; --color-danger-dark: #b91c1c; --color-info-dark: #2563eb; /* ══ NEUTRAL PALETTE ═══════════════════════════════════════ */ --color-white: #ffffff; --color-black: #000000; --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; /* ══ SPACING SCALE — 0.25rem (4px) increments ════════════ */ --space-0: 0; --space-px: 1px; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ══ TYPOGRAPHY — sizes ═══════════════════════════════════ */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ /* ══ TYPOGRAPHY — weights ═════════════════════════════════ */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ══ TYPOGRAPHY — families ════════════════════════════════ */ --font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* ══ BORDER RADIUS ════════════════════════════════════════════ Aligned with legacy/app-legacy.css values 2026-05-27. Legacy's unlayered :root always shadowed these layered ones at runtime, so the previous "Tailwind-style" values (4/8/12/16/24px) were dead code. Updated to match what components ACTUALLY get (6/10/14/16/20px — slightly more contemporary curves matching the brand's softer feel). Future migration target: deprecate legacy's :root definitions, leaving these as the sole source. */ --radius-none: 0; --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.625rem; /* 10px */ --radius-lg: 0.875rem; /* 14px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.25rem; /* 20px */ --radius-full: 9999px; --radius: var(--radius-md); /* Alias for backward compat */ /* ══ SHADOWS — refined multi-layer depth shadows ═══════════ Modern UI shadows use 2-3 layers: a tight contact shadow + a wider ambient shadow. This creates more believable depth than a single offset blur. The slate-blue tint (vs pure black) gives the surface a cooler, more refined feel — matches the trend in Apple's HIG and modern web apps. */ --shadow-sm: 0 1px 1px 0 color-mix(in srgb, var(--color-text-heading) 4%, transparent), 0 1px 3px 0 color-mix(in srgb, var(--color-text-heading) 6%, transparent); --shadow-md: 0 1px 2px 0 color-mix(in srgb, var(--color-text-heading) 6%, transparent), 0 4px 8px -2px color-mix(in srgb, var(--color-text-heading) 8%, transparent), 0 8px 16px -4px color-mix(in srgb, var(--color-text-heading) 4%, transparent); --shadow-lg: 0 2px 4px 0 color-mix(in srgb, var(--color-text-heading) 5%, transparent), 0 8px 16px -4px color-mix(in srgb, var(--color-text-heading) 8%, transparent), 0 16px 32px -8px color-mix(in srgb, var(--color-text-heading) 6%, transparent); --shadow-xl: 0 4px 8px 0 color-mix(in srgb, var(--color-text-heading) 6%, transparent), 0 16px 32px -8px color-mix(in srgb, var(--color-text-heading) 10%, transparent), 0 32px 64px -16px color-mix(in srgb, var(--color-text-heading) 8%, transparent); --shadow-inner: inset 0 1px 3px 0 color-mix(in srgb, var(--color-text-heading) 6%, transparent); /* ══ TRANSITIONS ══════════════════════════════════════════ */ --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 350ms; --ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* ══ Z-INDEX SCALE ════════════════════════════════════════ */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; } }