/* ====================================================================== EcoDrop Kiosk OS V2 --------------------------------------------------------------------- File : /kiosk/ui/tokens.css Module : EcoDrop Design Tokens Version : 1.0.0 Status : Draft Author : EcoDrop Platform References : EMS / EHIG / EDS ====================================================================== */ :root { /* =============================================================== BRAND COLORS =============================================================== */ --eco-color-brand-50: #F3FCF6; --eco-color-brand-100: #DDF7E5; --eco-color-brand-200: #BDEFCF; --eco-color-brand-300: #8EE2AD; --eco-color-brand-400: #56CF82; --eco-color-brand-500: #22B85F; --eco-color-brand-600: #16994D; --eco-color-brand-700: #117A3E; --eco-color-brand-800: #0D5F31; --eco-color-brand-900: #083C20; --eco-color-accent: var(--eco-color-brand-500); --eco-color-accent-hover: var(--eco-color-brand-600); --eco-color-accent-active: var(--eco-color-brand-700); /* =============================================================== NEUTRAL COLORS =============================================================== */ --eco-color-white: #FFFFFF; --eco-color-gray-50: #F8FAFC; --eco-color-gray-100: #F1F5F9; --eco-color-gray-200: #E2E8F0; --eco-color-gray-300: #CBD5E1; --eco-color-gray-400: #94A3B8; --eco-color-gray-500: #64748B; --eco-color-gray-600: #475569; --eco-color-gray-700: #334155; --eco-color-gray-800: #1E293B; --eco-color-gray-900: #0F172A; --eco-color-black:#05070A; /* =============================================================== SURFACE COLORS =============================================================== */ --eco-surface-app: #07110C; --eco-surface-main: #0C1712; --eco-surface-card: rgba(18,28,23,.88); --eco-surface-card-hover: rgba(25,38,31,.95); --eco-surface-dialog: rgba(14,23,18,.97); --eco-surface-glass: rgba(255,255,255,.08); --eco-surface-glass-strong: rgba(255,255,255,.12); --eco-surface-overlay: rgba(0,0,0,.45); /* =============================================================== TEXT COLORS =============================================================== */ --eco-text-primary:#FFFFFF; --eco-text-secondary:#D6E4DC; --eco-text-tertiary:#9FB3A8; --eco-text-disabled:#6B7B73; --eco-text-on-brand:#FFFFFF; /* =============================================================== BORDER COLORS =============================================================== */ --eco-border-soft:rgba(255,255,255,.08); --eco-border-normal:rgba(255,255,255,.12); --eco-border-strong:rgba(255,255,255,.18); --eco-border-brand:rgba(34,184,95,.35); /* =============================================================== SEMANTIC COLORS =============================================================== */ --eco-success:#22C55E; --eco-warning:#F59E0B; --eco-error:#EF4444; --eco-info:#3B82F6; --eco-success-bg:rgba(34,197,94,.12); --eco-warning-bg:rgba(245,158,11,.12); --eco-error-bg:rgba(239,68,68,.12); --eco-info-bg:rgba(59,130,246,.12); /* =============================================================== IMPACT COLORS =============================================================== */ --eco-impact-co2:#4ADE80; --eco-impact-cups:#22B85F; --eco-impact-wallet:#FBBF24; --eco-impact-city:#38BDF8; /* =============================================================== SPACING SYSTEM Base = 8px =============================================================== */ --eco-space-0:0px; --eco-space-1:4px; --eco-space-2:8px; --eco-space-3:12px; --eco-space-4:16px; --eco-space-5:20px; --eco-space-6:24px; --eco-space-7:28px; --eco-space-8:32px; --eco-space-9:36px; --eco-space-10:40px; --eco-space-12:48px; --eco-space-14:56px; --eco-space-16:64px; --eco-space-20:80px; --eco-space-24:96px; --eco-space-32:128px; /* =============================================================== RADIUS =============================================================== */ --eco-radius-xs:4px; --eco-radius-sm:8px; --eco-radius-md:12px; --eco-radius-lg:16px; --eco-radius-xl:24px; --eco-radius-2xl:32px; --eco-radius-round:9999px; /* =============================================================== BORDER WIDTH =============================================================== */ --eco-border-width-thin:1px; --eco-border-width-normal:2px; --eco-border-width-thick:3px; } /* =============================================================== GLASS SYSTEM =============================================================== */ --eco-glass-opacity-light:0.06; --eco-glass-opacity-normal:0.10; --eco-glass-opacity-strong:0.16; --eco-glass-blur-light:8px; --eco-glass-blur-normal:16px; --eco-glass-blur-strong:24px; --eco-glass-border:rgba(255,255,255,.12); --eco-glass-highlight:rgba(255,255,255,.18); /* =============================================================== SHADOWS =============================================================== */ --eco-shadow-none:none; --eco-shadow-soft: 0 4px 12px rgba(0,0,0,.18); --eco-shadow-card: 0 10px 30px rgba(0,0,0,.22); --eco-shadow-floating: 0 20px 60px rgba(0,0,0,.32); --eco-shadow-glow: 0 0 30px rgba(34,184,95,.18); --eco-shadow-success: 0 0 40px rgba(34,197,94,.24); /* =============================================================== OPACITY =============================================================== */ --eco-opacity-hidden:0; --eco-opacity-disabled:.35; --eco-opacity-muted:.60; --eco-opacity-medium:.80; --eco-opacity-visible:1; /* =============================================================== BLUR =============================================================== */ --eco-blur-none:0; --eco-blur-sm:4px; --eco-blur-md:8px; --eco-blur-lg:16px; --eco-blur-xl:32px; /* =============================================================== MOTION =============================================================== */ --eco-motion-instant:100ms; --eco-motion-fast:180ms; --eco-motion-normal:300ms; --eco-motion-slow:500ms; --eco-motion-story:1200ms; --eco-motion-intro:1800ms; --eco-motion-idle:3000ms; /* =============================================================== EASING =============================================================== */ --eco-ease-standard:cubic-bezier(.2,.8,.2,1); --eco-ease-enter:cubic-bezier(.16,1,.3,1); --eco-ease-exit:cubic-bezier(.7,0,.84,0); --eco-ease-story:cubic-bezier(.22,1,.36,1); /* =============================================================== SCALE =============================================================== */ --eco-scale-hover:1.02; --eco-scale-active:.98; --eco-scale-success:1.04; /* =============================================================== ICONS =============================================================== */ --eco-icon-xs:14px; --eco-icon-sm:18px; --eco-icon-md:24px; --eco-icon-lg:32px; --eco-icon-xl:48px; --eco-icon-2xl:64px; /* =============================================================== TOUCH TARGETS =============================================================== */ --eco-touch-min:48px; --eco-touch-comfort:56px; --eco-touch-large:64px; /* =============================================================== CARD SIZES =============================================================== */ --eco-card-padding-sm:16px; --eco-card-padding-md:24px; --eco-card-padding-lg:32px; --eco-card-gap:24px; /* =============================================================== BUTTONS =============================================================== */ --eco-button-height-sm:44px; --eco-button-height-md:56px; --eco-button-height-lg:72px; --eco-button-radius:18px; /* =============================================================== INPUTS =============================================================== */ --eco-input-height:64px; --eco-input-radius:18px; /* =============================================================== PROGRESS RING =============================================================== */ --eco-ring-size-sm:120px; --eco-ring-size-md:220px; --eco-ring-size-lg:320px; --eco-ring-stroke:12px; --eco-ring-track:rgba(255,255,255,.08); --eco-ring-progress:var(--eco-color-brand-500); /* =============================================================== CUP COMPONENT =============================================================== */ --eco-cup-width:260px; --eco-cup-height:360px; --eco-cup-glow: 0 0 80px rgba(34,184,95,.18); /* =============================================================== SCANNER =============================================================== */ --eco-scanner-line:#56CF82; --eco-scanner-glow: 0 0 40px rgba(86,207,130,.45); --eco-scanner-speed:1600ms; /* =============================================================== GATE =============================================================== */ --eco-gate-animation:2200ms; --eco-gate-wire:#77E2A3; /* =============================================================== WEIGHT =============================================================== */ --eco-weight-value-size:96px; --eco-weight-unit-size:28px; --eco-weight-ring-color: var(--eco-color-brand-500); /* =============================================================== SUCCESS =============================================================== */ --eco-success-delay-title:2000ms; --eco-success-delay-points:4000ms; --eco-success-delay-impact:6000ms; --eco-success-return-home:8000ms; /* =============================================================== INTRO =============================================================== */ --eco-intro-duration:5000ms; /* =============================================================== IDLE STORY MODE =============================================================== */ --eco-idle-delay:30000ms; --eco-idle-slide-duration:5000ms; --eco-idle-fade-duration:1200ms; /* =============================================================== STAFF MODE =============================================================== */ --eco-staff-timeout:5000ms; --eco-staff-surface:#111827; --eco-staff-card:#1F2937; --eco-staff-border:rgba(255,255,255,.08); /* =============================================================== DIAGNOSTICS =============================================================== */ --eco-status-online:#22C55E; --eco-status-warning:#F59E0B; --eco-status-offline:#EF4444; --eco-status-disabled:#6B7280; /* =============================================================== TABLET Samsung Galaxy Tab A7 Lite =============================================================== */ --eco-screen-width:1340px; --eco-screen-height:800px; --eco-safe-top:24px; --eco-safe-right:24px; --eco-safe-bottom:24px; --eco-safe-left:24px; /* =============================================================== CONTENT =============================================================== */ --eco-content-max-width:1280px; --eco-header-height:88px; --eco-footer-height:72px; /* =============================================================== HERO =============================================================== */ --eco-hero-width:100%; --eco-hero-gap:48px; --eco-hero-title-max:760px; /* =============================================================== IMPACT CARDS =============================================================== */ --eco-impact-card-width:320px; --eco-impact-card-height:180px; --eco-impact-card-radius:24px; /* =============================================================== LANGUAGE SWITCH =============================================================== */ --eco-language-width:56px; --eco-language-height:56px; /* =============================================================== PIN PAD =============================================================== */ --eco-pin-key-size:82px; --eco-pin-gap:18px; --eco-pin-radius:22px; /* =============================================================== DIALOG =============================================================== */ --eco-dialog-width:640px; --eco-dialog-radius:28px; /* =============================================================== LOADER =============================================================== */ --eco-loader-size:64px; --eco-loader-stroke:5px; /* =============================================================== GRID =============================================================== */ --eco-grid-columns:12; --eco-grid-gap:24px; /* =============================================================== CONTAINER =============================================================== */ --eco-container-padding:40px; /* =============================================================== Z INDEX =============================================================== */ --eco-z-background:0; --eco-z-content:10; --eco-z-header:20; --eco-z-overlay:100; --eco-z-dialog:200; --eco-z-toast:300; --eco-z-system:999; /* =============================================================== ACCESSIBILITY =============================================================== */ --eco-focus-ring-width:3px; --eco-focus-ring-color:#56CF82; --eco-disabled-opacity:.45; /* =============================================================== TRANSITIONS =============================================================== */ --eco-transition-fast: all var(--eco-motion-fast) var(--eco-ease-standard); --eco-transition-normal: all var(--eco-motion-normal) var(--eco-ease-standard); --eco-transition-slow: all var(--eco-motion-slow) var(--eco-ease-standard); /* =============================================================== STORY COLORS =============================================================== */ --eco-story-planet:#56CF82; --eco-story-city:#38BDF8; --eco-story-community:#FBBF24; --eco-story-person:#FFFFFF; --eco-story-cup:#22B85F; /* =============================================================== RESERVED Future Versions =============================================================== */ --eco-ai-primary:transparent; --eco-ai-secondary:transparent; --eco-carbon-positive:transparent; --eco-passport-primary:transparent; --eco-sdk-primary:transparent; --eco-theme-airport:transparent; --eco-theme-museum:transparent; --eco-theme-coffee:transparent; /* =============================================================== END OF TOKENS =============================================================== */ } /* =============================================================== RESPONSIVE TOKENS Samsung Galaxy Tab A7 Lite First =============================================================== */ @media (max-width: 1340px){ :root{ --eco-content-max-width:1200px; --eco-container-padding:32px; --eco-hero-gap:40px; --eco-impact-card-width:300px; --eco-ring-size-lg:300px; --eco-cup-width:230px; --eco-cup-height:320px; } } /* =============================================================== LANDSCAPE OPTIMIZATION =============================================================== */ @media (orientation:landscape){ :root{ --eco-header-height:80px; --eco-footer-height:64px; } } /* =============================================================== ACCESSIBILITY TOKENS =============================================================== */ @media (prefers-reduced-motion:reduce){ :root{ --eco-motion-instant:0ms; --eco-motion-fast:0ms; --eco-motion-normal:0ms; --eco-motion-slow:0ms; --eco-motion-story:0ms; --eco-motion-intro:0ms; --eco-idle-slide-duration:0ms; } } /* =============================================================== ROOT APPLICATION TOKENS =============================================================== */ html{ font-size:16px; color:var(--eco-text-primary); background:var(--eco-surface-app); accent-color:var(--eco-color-brand-500); } body{ margin:0; padding:0; min-width:100vw; min-height:100vh; overflow:hidden; background:var(--eco-surface-app); color:var(--eco-text-primary); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } /* =============================================================== GLOBAL APPLICATION VARIABLES =============================================================== */ :root{ --eco-app-background: radial-gradient(circle at top, rgba(34,184,95,.12), transparent 40%), radial-gradient(circle at bottom right, rgba(59,130,246,.06), transparent 35%), var(--eco-surface-app); --eco-card-background: linear-gradient( 180deg, rgba(255,255,255,.06), rgba(255,255,255,.03) ); --eco-card-border: 1px solid rgba(255,255,255,.08); --eco-card-shadow: var(--eco-shadow-card); --eco-focus-outline: 0 0 0 3px rgba(34,184,95,.25); } /* =============================================================== SYSTEM FLAGS =============================================================== */ :root{ --eco-enable-glass:1; --eco-enable-animation:1; --eco-enable-sound:1; --eco-enable-story:1; --eco-enable-diagnostics:1; --eco-enable-particles:0; --eco-enable-debug:0; } /* =============================================================== EXPERIENCE CONSTANTS =============================================================== */ :root{ --eco-intro-time:5000ms; --eco-pin-timeout:5000ms; --eco-door-timeout:15000ms; --eco-idle-time:30000ms; --eco-success-time:8000ms; --eco-diagnostics-timeout:120000ms; --eco-service-timeout:120000ms; } /* =============================================================== BRAND PRINCIPLES =============================================================== */ /* Technology disappears. Impact remains. Return. Reward. Repeat. One Cup. One Journey. One Planet. EcoDrop Design Tokens Version 1.0.0 Reference Documents EMS EHIG EDS ESM EKA ESS EEB EDP */ /* =============================================================== END OF FILE =============================================================== */